ブログにサムネイル付き画像リンクを挿入す方法をご紹介します。はてなブログのブログカード機能を使うことで、簡単にブログカードをつくることができます。
サムネイル付きのリンクをつくる方法
今回の記事では、下の画像のようなサムネイル付き画像リンクのつくり方についてご紹介します。
つくるもの
最近さまざまなブログで使われているので目にしたことも多いのではないでしょうか。
一般的なテキストリンクと異なり、サイト名やアイキャッチ画像、説明文が添えられているカード型リンクは見た目も良いですし訴求力が上がります。ぜひ活用したいですね。
今回紹介する方法では、はてなブログの「ブログカード機能」を利用しています。
事前にちょっとした設定は必要ですが、一回行えばあとは右クリックだけで自在にカード型リンクをつくれます。以下よりかみ砕いてご説明していくのでご安心ください。
つくり方
それでは、ブログカードのつくり方について見ていきましょう。
Chromeに拡張機能を追加する
ここでご紹介する方法では、ブラウザソフトのChromeを使います。まずは、Chromeに「Create Link」という拡張機能(エクステンション)を追加してください。Chromeのウェブストアをひらいて、Create Linkを検索してインストールします。
ChromeブラウザにCreate LInkのボタンがあらわれたでしょうか?これでインストール完了です。
拡張機能の設定をする
次に、Chromeに追加した拡張機能の設定をします。一度設定したら終わりなので頑張りましょう。
Create Linkのボタンを押すと表示されるメニューから、「Configure」(設定のことです)をクリックします。メニューは全て英語なのでビックリするかもしれませんが、一度使ったらもう使いません。気にせず進めましょう。
下の画面がひらいたでしょうか。
上の方に「+」ボタンがありますね。ボタンが小さいので押しにくいのですが、押すと入力欄があらわれます。
表示されたところに、下のように入力していってください。
ちょっと長いですがFormat欄のコードはそのままコピペしてOKです。
Name | Format | ||
---|---|---|---|
ブログカード |
|
下のようになりましたでしょうか?
設定が終わったら、Create Linkの設定ページは閉じてしまってかまいません。
ブログカードを追加する
それでは実際にブログカードをつくってみましょう!
ブログカードをつくりたい記事をひらいてください。ここでは、当ブログの下の記事でブログカードをつくってみます。
記事をひらいたら、適当なところで右クリックしてください。Create Linkで先ほど登録した「ブログカード」のメニューが表示されます。
こちらをクリックしてみてください。クリックしても何も起こりませんよね?それで大丈夫です。
記事の編集画面でペーストしてみてください。先ほど設定で追加したものと似た文章が出てきましたね。
プレビュー画面で記事を見てみてください。ブログカードが表示されましたね!おめでとうございます。
あとがき
ブログカードはこのように簡単につくることができます。見栄えも良いのでぜひ活用してみてくださいね。ちなみに先ほどの記事のリンクを参考までに貼っておきます。