記事内にカード型のリンクを簡単に挿入できるようにした

妻が打首獄門同好会にハマって助手席で叫んでます。僕です。 記事内で他のサイトのリンクを貼るとき、ただの文字リンクだけじゃ味気ないじゃないですか。そこでカード型のリンクを簡単に設置できるようにしました。 はてなブログなどでよく見るやつですね。ブログカードって言うのですか? できあがりはこんな感じです。↓

できあがり確認用に貼ったこちらのリンク↑は、今回作るにあたって参考にさせていただいたページです。こんなに素敵なものを作るだけでなく、「使っていただければ幸いです。」と他の人と分かち合うことを考えている作者様は人格者に違いありません。ありがとうございます。 みなさんもぜひ活用しましょう。

仕組みはというと、JavaScriptでページタイトル・URL・og:imageのURLを取得してあらかじめ決めていたhtmlタグに入れるって感じです。これをブックマークレットというブックマークからプログラムを動かす機能を使ってワンクリックで実現しています。 あとはできあがったものを記事にコピペするだけです。

私は今回利用するにあたり以下の点を変更しました。

  • インラインスタイルシートをすべて削除。外部CSSで独自に書き直し
  • faviconとはてブ数いらないので削除(はてなのAPI使わない)
  • 比率のわからない画像を扱いやすいのでog:imageをimgタグから背景画像に変更
  • og:imageがない場合HeartRails Captureを使わずに、自作したリンクイメージを使用

4個目ですが、og:imageがないサイトの場合こんな感じになります。

いい感じですね。これで外部のサイトを参照しやすくなりました。改めて、作者様に感謝です。

結論

一人では誰も生きていけない 。

追記

普段ワードプレスのビジュアルエディタで書いているが、今回のブックマークレットで作成したタグを入れるときだけテキストエディタモードに変更していた。
すると変更する際にカード内のaタグが消えていたのでこちらのページを参考に対策した。

結論その2

やはり一人では誰も生きていけない 。

ひとりで生きるということ 角川SSC新書10獄〜TENGOKU〜打首獄門同好会世界一やさしい ブログの教科書 1年生

スポンサーリンク

スポンサーリンク

テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト

テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト