スマホ・PC

【図解】リンク先を綺麗に表示する「ブログカード」作成方法

更新日:

今回は、プロブロガーのみなさんが使っているブログカードの作成方法を紹介します。

リンク先が綺麗に表示されますので、見ていただいた方に分かりやすく伝わると思います。

ブログカードを作るのはとても簡単ですので、参考にしてみてください。

ブログカードって何?

ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。

はてなブログでリンク機能を利用する際に、さまざまなWebページを、タイトルや概要がコンパクトにまとまった ブログカード の形式で埋め込むことができます。

引用 はてなブログヘルプ

 

ブログカードの作り方

調べたら色々やり方はあるみたいですが、プラグインする方法とGoogle Chrome拡張機能があります。

他にもあると思いますが、前回の記事でGoogle Chromeをインストールしたので、こちらを使用してブログカードを作っていきます。

 

Google Chromeで Create Linkをインストール

  • Create Linkをインストールします。
  • Google Chromeウェブストアにいきます。
  • そして下記のように左上の空白Create Linkと入力し検索し、右に出てきCreate LinkのChromeに追加をクリックする!

これでインストールは完了です!

 

Create Linkを設定する

  • インストールすると右上にこういうのが出ます。

 

  • それで一番下のConfigureをクリックします。

<iframe class="hatenablogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="%title%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>

上記のように入力します。

Nameの部分は自分がわかりやすいように設定します。

私は、ブログカードに設定しました。

 

ブログカードの貼り方

  1. まず貼りたいサイトにいく!
  2. 右クリックでCreate Linkから設定したName(ブログカード)をクリック
  3. 自分の記事に貼り付ける!

 

・このように、ブログカードをクリックします。

 

・それであとは記事に貼るだけです。

上記のように綺麗に貼れました。

最後に

今回は、リンク先をブログカードにしてみるという記事を書きました。

これで自分の記事から、合わせて読んでいただきたい記事を読んでもらう際に綺麗なブログカードで設定できます。

見やすくなるように工夫しましょう!

-スマホ・PC
-

Copyright© トリヤリ , 2019 All Rights Reserved.