ピンバックを送れる!はてな風ブログカードを作るブックマークレットを見つけたよ。ちょっと改造してみたよ。

 

はてなブログカードを使ってみてたのですけど、欠点がありました。

  • 参照先のブログにピンバックが飛ばない
  • SearchConsole(旧ウェブマスターツール)やGoogleAnalyticsなどで、リンク元がhatenaになってしまう

それを解決する素晴らしいブックマークレットを見つけました。

【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました

ブログを書くとき、記事へのリンクをどのように貼っていますか? べた書きですか? ShareHTMLですか? GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。 最近よく見る

ただ、えじさんご自身が指摘されている通り、「ごちゃごちゃ」です。
よく見ると、スタイルを全てインラインで指定してます。これをstyle.cssに書いたなら、かなりすっきりするのでは?と思い、やってみました。
 

コピペしてお使いください

インラインで書かれていたスタイルを、クラス定義して、style.cssに書けるようにしました。
指定のしかたを変えただけで、スタイルの値は変えていないので、えじさんがデザインした見た目になっているはずです。

スタイルシート(style.css)

style.cssに下記のコードを追加します。レスポンシブになっているようなので、@media{}の外に書けばよいです。

このまま使うとえじさんがデザインしたのと同じ見た目になります。
さらさらぶろぐでは、6行目のwidthの指定をコメントアウトして使っています。記事エリアいっぱいの横幅にしたかったので。

ブックマークレット

登録のしかたは、えじさんのブログをご参照ください。
【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました

下のコードをコピペして登録してください。

仕様変更したところ

私の好みで、ちょこっと変えてます。

  • フッターのブログトップのURLをブログトップへのリンクにしました。
  • リンクはすべて別ウィンドウで開くように「target=”_blank”」を追加しました。

まとめ

「ごちゃごちゃ」は半分くらいになったでしょうか? はてなのiframeよりはまだかなり長いです。
CSSをいじれば、色とか線とか、見た目をいろいろカスタマイズできます。

みなさん、ありがとうございます

まずは、えじさんに大感謝です。ありがとうございます。

他にもお礼を言いたい方がいます。
このブログカードにたどり着くまで、あちこちのブログを巡りました。「はてなのブログカードではピンバックが送れない」っていうのは、みなさんお悩みのようで、対策を書いてくださってます。

こちらの方法は、内部URLの場合に使えます。function.phpをいじるので、ちょっとハードルが高いです。

内部URLを記入するだけ!はてなブログカード風にWordPress記事も表示させるカスタマイズ方法

9月にはてなブログがリリースしたブログカード、かっこいいですよね。

こちらの方法は、画像がアイキャッチではなく、ブログ画面全体になります。

私は、アイキャッチ画像を表示するほうが好みだったので、えじさんのを使わせていただくことにしました。
けど、JunkBlogさんのを試したりしていたので、えじさんのを見たときに、「CSSを別にすればよいのでは?」と思いつきました。
みなさんありがとうございます。(^^)

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

コメント一覧

  1. […] ピンバックを送れる!はてな風ブログカードを作るブックマークレットを見つけたよ。ちょっと改造してみたよ。 […]

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。