ピンバックを送れる！はてな風ブログカードを作るブックマークレットを見つけたよ。ちょっと改造してみたよ。
はてなブログカードを使ってみてたのですけど、欠点がありました。
- 参照先のブログにピンバックが飛ばない
- SearchConsole（旧ウェブマスターツール）やGoogleAnalyticsなどで、リンク元がhatenaになってしまう
それを解決する素晴らしいブックマークレットを見つけました。
【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました
ブログを書くとき、記事へのリンクをどのように貼っていますか？ べた書きですか？ ShareHTMLですか？ GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。 最近よく見る
ただ、えじさんご自身が指摘されている通り、「ごちゃごちゃ」です。
よく見ると、スタイルを全てインラインで指定してます。これをstyle.cssに書いたなら、かなりすっきりするのでは？と思い、やってみました。
コピペしてお使いください
インラインで書かれていたスタイルを、クラス定義して、style.cssに書けるようにしました。
指定のしかたを変えただけで、スタイルの値は変えていないので、えじさんがデザインした見た目になっているはずです。
スタイルシート（style.css）
style.cssに下記のコードを追加します。レスポンシブになっているようなので、@media{}の外に書けばよいです。
|
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; } /*--------------------------------------*/ /* ブログカード ここまで */ /*--------------------------------------*/ |
このまま使うとえじさんがデザインしたのと同じ見た目になります。
さらさらぶろぐでは、6行目のwidthの指定をコメントアウトして使っています。記事エリアいっぱいの横幅にしたかったので。
ブックマークレット
登録のしかたは、えじさんのブログをご参照ください。
【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました
下のコードをコピペして登録してください。
|
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="http://b.hatena.ne.jp/entry/image/'+ogurl+'"></p></div></div><!--ブログカード終わり-->';prompt("blogcard",card);});})(); |
仕様変更したところ
私の好みで、ちょこっと変えてます。
- フッターのブログトップのURLをブログトップへのリンクにしました。
- リンクはすべて別ウィンドウで開くように「target=”_blank”」を追加しました。
まとめ
「ごちゃごちゃ」は半分くらいになったでしょうか？ はてなのiframeよりはまだかなり長いです。
CSSをいじれば、色とか線とか、見た目をいろいろカスタマイズできます。
みなさん、ありがとうございます
まずは、えじさんに大感謝です。ありがとうございます。
他にもお礼を言いたい方がいます。
このブログカードにたどり着くまで、あちこちのブログを巡りました。「はてなのブログカードではピンバックが送れない」っていうのは、みなさんお悩みのようで、対策を書いてくださってます。
こちらの方法は、内部URLの場合に使えます。function.phpをいじるので、ちょっとハードルが高いです。
こちらの方法は、画像がアイキャッチではなく、ブログ画面全体になります。
私は、アイキャッチ画像を表示するほうが好みだったので、えじさんのを使わせていただくことにしました。
けど、JunkBlogさんのを試したりしていたので、えじさんのを見たときに、「CSSを別にすればよいのでは？」と思いつきました。
みなさんありがとうございます。(^^)
[…] ピンバックを送れる！はてな風ブログカードを作るブックマークレットを見つけたよ。ちょっと改造してみたよ。 […]