記事内にカード型のリンクを簡単に挿入できるようにした
妻が打首獄門同好会にハマって助手席で叫んでます。僕です。 記事内で他のサイトのリンクを貼るとき、ただの文字リンクだけじゃ味気ないじゃないですか。そこでカード型のリンクを簡単に設置できるようにしました。 はてなブログなどでよく見るやつですね。ブログカードって言うのですか? できあがりはこんな感じです。↓
【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました
ブログを書くとき、記事へのリンクをどのように貼っていますか? べた書きですか? ShareHTMLですか? G…
sakueji.com
できあがり確認用に貼ったこちらのリンク↑は、今回作るにあたって参考にさせていただいたページです。こんなに素敵なものを作るだけでなく、「使っていただければ幸いです。」と他の人と分かち合うことを考えている作者様は人格者に違いありません。ありがとうございます。 みなさんもぜひ活用しましょう。
仕組みはというと、JavaScriptでページタイトル・URL・og:imageのURLを取得してあらかじめ決めていたhtmlタグに入れるって感じです。これをブックマークレットというブックマークからプログラムを動かす機能を使ってワンクリックで実現しています。 あとはできあがったものを記事にコピペするだけです。
私は今回利用するにあたり以下の点を変更しました。
- インラインスタイルシートをすべて削除。外部CSSで独自に書き直し
- faviconとはてブ数いらないので削除(はてなのAPI使わない)
- 比率のわからない画像を扱いやすいのでog:imageをimgタグから背景画像に変更
- og:imageがない場合HeartRails Captureを使わずに、自作したリンクイメージを使用
4個目ですが、og:imageがないサイトの場合こんな感じになります。
いい感じですね。これで外部のサイトを参照しやすくなりました。改めて、作者様に感謝です。
結論
一人では誰も生きていけない 。
追記
普段ワードプレスのビジュアルエディタで書いているが、今回のブックマークレットで作成したタグを入れるときだけテキストエディタモードに変更していた。
すると変更する際にカード内のaタグが消えていたのでこちらのページを参考に対策した。
ビジュアルエディタの自動整形機能を無効化する方法
WordPressには、HTMLを知らなくても記事の編集ができる「ビジュアルエディター」と、HTMLタグを手打ちできる「テキストエディター」の2種類があります。ビジュアルエディターではeditor-style.cssを利用することで、実際の見た目に近い状態で記事を確認しながら編集ができるため、クライアントに納品する場合
dainashiyesterday.com
結論その2
やはり一人では誰も生きていけない 。
関連記事
スポンサーリンク
テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト