みっきぃ(@miki73_m)です。前回「Emdedlyカード」について紹介しました。
↓こんな感じ
「Embedlyカード」がはてなブログカードと違ってまたいい感じ
はてな風ブログカードと差別化しようと思って取り入れたのですが、やっぱりはてな風ブログカードも気になる・・・
なにかいいのないか探していた所、さらさらり(@sarasaralli)さんがはてな風ブログカードのブックマークレットを紹介してくれていたので、導入してみました。こちらも「Embedly」のようにはてなブログを経由しないみたいです。
はてな風ブログカードのブックマークレット導入方法
スタイルシート(style.css)
WordPressの「管理画面」ー「外観」ー「テーマの編集」の「スタイルシート」(style.css)に下記のコードを追加します。小テーマで編集するのをオススメします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
/*--------------------------------------*/ /* ブログカード ここから */ /*--------------------------------------*/ .blogcard{ width:100%; max-width:500px !important; margin:0 0 20px 0; background:#fff; border:1px solid#ccc; border-radius:5px; box-sizing:border-box; padding:12px; } .blogcard-thumb{ width:100px; height:100px; float:right; margin:0 0 10px 10px; padding:0; position:relative; overflow:hidden; } .blogcard-thumb a{ position:absolute; width:1000%; left:50%; margin:0 0 0 -500%; text-align:center; } .blogcard-thumb img{ width:auto; height:100px; margin:0; vertical-align:middle; display:inline; } p.blogcard-title{ margin:0 !important; } .blogcard-title a{ color:#333; font-weight:bold; text-decoration:none !important; font-size:17px; margin:0 0 10px 0; line-height:1.5; } p.blogcard-desc{ margin:0 !important; color:#666; font-size:11px; line-height:1.5; } .blogcard-footer{ border-top:1px solid#eee; clear:both; margin:10px 0 0 0; padding:0; } .blogcard-footer p{ margin:3px 0 0 0 !important; } .blogcard-footer a{ color:#999; margin:0px 5px 0 0; font-size:11px; text-decoration:none !important; } .blogcard-footer img{ margin:0 5px 0 0px !important; padding:0; border:none; display:inline; vertical-align:middle; } /*--------------------------------------*/ /* ブログカード ここまで */ /*--------------------------------------*/ |
小テーマについてはこちら
ブックマークレット登録方法
まず以下のコードをコピーします。
1 |
javascript:(function(){javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',r()})(document,this.jQuery,function($){var ogurl=$("meta[property='og:url']").attr("content");var ogtitle=$("meta[property='og:title']").attr("content");var ogdesc=$("meta[property='og:description']").attr("content");var ogimg=$("meta[property='og:image']:last").attr("content");var urlhost=location.host;if(ogtitle==null){ogtitle=document.title};if(ogurl==null){ogurl=location.href};if(ogdesc==null){ogdesc=""};if(ogimg==null){ogimg="http://capture.heartrails.com/100x100/?"+location.href};var card='<!--'+ogtitle+'--><div class="blogcard"><div class="blogcard-thumb"><a href="'+ogurl+'" target="_blank"><img src="'+ogimg+'"></a></div><p class="blogcard-title"><a href="'+ogurl+'" target="_blank">'+ogtitle+'</a></p><p class="blogcard-desc">'+ogdesc+'</p><div class="blogcard-footer"><p ><img src="http://favicon.hatena.ne.jp/?url='+ogurl+'"><a href="http://'+urlhost+'" target="_blank">'+urlhost+'</a><img src="https://b.hatena.ne.jp/entry/image/'+ogurl+'"></p></div></div><!--ブログカード終わり-->';prompt("blogcard",card);});})(); |

次にどこでもいいので好きなページをブックマークします。ブックマークしたページの上で右クリックー「編集」をクリックします。
名前を変更し、先ほどコピーしたコードを貼り付けます。あとは、リンクを作成したいページでこのブックマークレットをクリックすると、はてな風ブログカードが作成されます。
あとがき
embedlyカードもはてな風ブログカードもどちらもいい感じですね。好みによって使い分けたいです。
以上、みっきぃ(@miki73_m)でした。
参考にした記事
ピンバックを送れる!はてな風ブログカードを作るブックマークレットを見つけたよ。ちょっと改造してみたよ。
はてなブログカードを使ってみてたのですけど、欠点がありました。 参照先のブログにピンバックが飛ばない SearchConsole(旧ウェブマスターツール)やGoogleAnalyticsなどで、リンク
【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました
ブログを書くとき、記事へのリンクをどのように貼っていますか? べた書きですか? ShareHTMLですか? GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。 最近よく見る
アーカイブ
タグ