この記事ではBloggerでリンクカードを簡単に設置する方法について解説します．リンクカードとはこのような感じでurlを貼るとそのurl先のサムネイルや記事タイトルなどをカード形式にして一緒に表示してくれるようなデザインのことをいいます．
ちなみに上記のサイトを参考にして記事を書かせていただきました．
それではこのようにリンクカードを簡単に記事内に設置する方法について解説していきます．
目次[非表示]
リンクカードを設置する方法
これは結構簡単でして，以下のコードを記事内に挿入すればよいです．
<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="[サイトタイトル]" src="https://hatenablog-parts.com/embed?url=[サイトURL]" frameborder="0" scrolling="no"></iframe>
ちなみにここの[サイトタイトル]と[サイトURL]は各々のサイトのものを書いてください．
というわけでこれだけでリンクカードを設置することができました．意外とBloggerとかでも簡単にリンクカードって表示できるんですね．方法を教えてくださった先人のみなさんに感謝です．
ワンクリックでコードを作成する方法
というわけでこのコードをベースにすればどんなリンクカードも簡単に作成できるわけですがいちいちコードをコピペするのってめんどくさいですよね．
どうせならサイトのURLをコピーするようにワンクリックでこのコードを作成したいです．
というわけでワンクリックでリンクカードのコードを作成する方法について解説していきます．ただし，この昨日を使用するためにはGoogle Chromeが必要となります．
Bloggerを使用している方はChrome信者の方が多いかと思いますがまだインストールしていないという方は是非インストールしてみてください．
Create Linkをインストール
ChromeのWebストアにアクセスしてCreate Linkという拡張機能をインストールしてください．
このCreate Linkを使用してワンクリックでリンクカードを作成するための設定を行っていきます．
Create Linkの設定
というわけでまずはインストールしたCreate LinkのアイコンをクリックしてConfigureを選択してください．
その後画面の+マークからFormatを追加しましょう．名前は私はlinkcardとしましたがわかりやすい名前なら何でも良いかと思います．
そして肝心のフォーマット欄は以下のコードを記入してください．
<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>
これでCreate Linkの設定は完了です．
Create Linkからコードを生成する方法
というわけで設定ができましたらリンクカードを作成したいサイトに訪問してください．
そして右クリックを押して以下の画像のようにCreate Link>linkcardを選択してください．
これだけでリンクカードのコードがコピーされています．
実際にコピーしたリンクカードが以下のとおりです．
まとめ
というわけでこの記事ではリンクカードを簡単に設置する方法について解説しました．
実際このCreate Linkを導入してからブログの見栄えも良くなった気がしてとても助かっています．
また，自身のブログの内部リンクもカード形式で表示できるので他の記事を読んでほしいときにわざわざリンクを挿入する手間も減ったというのが個人的にとてもありがたい点になります．
というわけでみなさんも是非リンクカードを試してみてください．
0 件のコメント :
コメントを投稿