編集

【Blogger】記事本文にブログカードを挿入する

2025/07/30
【Blogger】記事本文にブログカードを挿入する

過去の記事を参照してもらう際に、参照リンクがURLだけでは味気ないので記事に「ブログカード(リンクカード)」を貼って見栄えをよくしています。ブログカード自体は本当に様々な種類があるので、結局は自分が一番使い勝手が良いものを導入した方が良いとは思います。1年程ブログを運営してみて、試行錯誤した結果を記しておこうと思います。

iframely

海外サイトなので多少使うには不安がありますけれども。

リンク先の画像と連動しているようで、サムネイルの最新状態も取ってきてはくれてるようです。ややレスポンスが遅めのため表示に時間がかかるのが難点です。

Embeds codes for today's Internet - Iframely

Embeds codes for today's Internet - Iframely

Iframely gives you simple APIs to have all the Web's best media on your site and on all your users' devices.

はてなブログパーツ

所々で紹介されていましたけど、はてなブログのパーツを拝借しているようなんですが...見栄えは良かったのですが、外部サイトで勝手に他所のブログのパーツを使っても良いのだろうか...?と考えて、使用は止めました笑 使ってないのにはてなブログを経由するというのもなんだか変な話ですし。

カード自体にリンクは貼られていないため、画像をクリックするかタイトルをクリックすることでリンク先に飛べます。

<iframe class="hatenablogcard" frameborder="0" scrolling="no" src="https://hatenablog-parts.com/embed?url=https://www.tomoyuki0.com/2024/06/chat005.html" style="display: block; height: 150px; margin: 10px 0; max-width: 700px; width: 100%;" title="%title%"></iframe>

ブックマークレット

現在、各記事に導入しているブログカードがこちらのブログ様のものです。

記事全体にリンクが貼られているので、カードをクリックするだけでリンク先に飛べます。

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

記事に連動しているわけではないので、ブログのアイキャッチや検索向け説明を変更した場合、リンクカードも修正が必要になります。そんなに頻繁に変更しないとは思いますが、できたてほやほやのブログだとメンテナンスも頻繁に行ったりすると思いますので、ご注意ください。

また、リンク先によってはページへは飛べますがカードに表示される情報が全て「undefined」になりサムネイルも表示されなくなりますので、ご注意ください。

使い方は先方のブログ様に書いてある通りです。私の場合は「ブログカード」アイコンにあるソースコードをChromeブラウザのお気に入りバーに登録して、カードを作りたいページを表示した状態でブログカードをクリックするとリンクカード用のHTMLが表示されるようになっています。

ブログカードの使用例

CSS設定は別とのことで、この辺りはご自身のブログとの相談になりますね。因みに私は使わせてもらっているテーマのこともありCSSの設置はしませんでした。

そのため、ブログカードを作成するたびにリンク部分に「下線」が表示されてしまうので、HTMLにいつも下線を消すコードを入れています(ソースコードに追加してみたりもしたのですが、反映されず上手くいかなかったので毎回手作業でやってます...)。

style="text-decoration: none;"

まとめ

記事のリライトのことを考えると記事と連動してる方が良いのでしょうけれど、動作がめちゃくちゃ重くなり、ブログ全体に影響が出てしまうのも問題だなぁと感じた次第です。

実際、見てる側からしたら、リンク先のページ情報が分かればリンクしやすいっていうだけなのでね...。ブログカード自体に効果があるのかないのか分かりませんけれども。

でも、ブログカードを導入することにより記事の見栄えはカッコいい感じはしますね。

以上!

新しい投稿はありません 前の投稿