Bloggerでブログカード(リンク)を記事内に表示する方法

カード
どうも、kazuです。
あなたはどんな風に自分のブログ内の記事や参考ブログのリンクを貼っていますか?
私自身、以前は記事内に下のようなリンクを貼っていました。
これでも悪くはないですが、まぁシンプル過ぎる。リンクを貼るならやっぱり、はてなブログでよく見かけるアレにしたい!
そう、「ブログカード」!
そこで今回は、ブログカードの作成方法(コードのコピーから記事内に表示)をご紹介します。

Embedlyカードのコードコピー方法

「ブログカード、ブログカード」言っていますが、正しくは「Embedlyカード」。Embedlyは、表示したいページのURLを入力すると、自動的にコードを作ってくれる優れものです。

記事内に表示する前段階であるページのURL入力からコードのコピーまでの方法(2種類)をご紹介します。
URLのコピペが不要な「ブックマークレット」がオススメ!

コードジェネレーター

1. 次のサイトへアクセス
http://embed.ly/code

2. 赤枠にURLを入力
3. プレビュー画面下のコードをクリックしてコピー

ブックマークレット

1. 次のサイトへアクセス
http://embed.ly/bookmarklet

2. ブックマークツールバーに「+Embed」ボタンをドラッグ&ドロップして登録
※どのブラウザでも操作は同じです。あらかじめブックマークツールバーを表示しておく必要があります。
3. ブログカードを作りたいページを表示し、ブックマークツールバーにある「+Embed」ボタンをクリック
4. プレビュー画面下のコードをクリックしてコピー

Embedlyカードのコード貼り付け場所

1. 記事作成画面で「HTML」をクリック
2. コピーしたコードを貼り付け
たったこれだけです。

では、プレビュー画面を見てみましょう!

Embedlyカードのサイズ変更方法

画像の有無やサイズ、説明文の表示・非表示を切り替えることができます。いずれも、プレビュー画面を表示した状態で操作します。

画像の有無やサイズの切り替え

画像右上の×ボタンをクリックすると画像を非表示に、左下の矢印ボタンをクリックするとサイズが変更できます。

説明文表示の切り替え

説明文右上の×ボタンをクリックすると非表示にできます。

表示サンプル

組み合わせは全部で6種類。好みのものを選んでみましょう!

1. 大きな画像・説明文あり(デフォルト)
大きな画像・説明文あり(デフォルト)
2. 大きな画像・説明文なし
大きな画像・説明文なし
3. 小さな画像・説明文あり
小さな画像・説明文あり
4. 小さな画像・説明文なし
小さな画像・説明文なし
5. 画像なし・説明文あり
画像なし・説明文あり
6. 画像なし・説明文なし
画像なし・説明文なし

さいごに

いかがでしたでしょうか?
文字のみのものと比べると一見、リンク先であることが分かりづらいかも知れません。
しかし、「サムネイル画像+文字」を表示することにより、見栄えがグッと良くなり、視覚的に訴えること間違いなしです(もちろん、タイトルのみのブログカードも同様)。

あなたのブログにも是非「ブログカード」をお試しください!
少しでもお役に立てましたら嬉しいです。


最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

カスタマイズ記事をまとめました☆
>>>Blogger/Vaster2のカスタマイズ記事をまとめて一挙大公開!

Blogger/Vaster2のカスタマイズ記事をまとめて一挙大公開!

スポンサーリンク
スポンサーリンク

2 件のコメント :

  1. 返信
    1. 浜島裕作 様

      コメントありがとうございます☆
      この記事がお役に立てたようで良かったです(´∀`*)

      削除