![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Yo1mOc6WGgH3B7MDWAUD7PxmINQxH2p_FCx_ZJCYH1nl43mBwa3CbK3uN6EoGp4TSmtmmnoWlzhurXRFmfSFKfIsH_a4UWXcz4pWrx8uCqd2eqEBt8DrKv31MXKPQ1ksLfTrdqWjX8M/s640/Create+blogcard+in+1click.png)
見た目が良いブログカードをBloggerの記事内に設置する方法を一つ前の記事で紹介しました。この記事で紹介している方法は、はてなブログの提供するツールを利用してiframeでブログカードを表示する手法です。
本記事では、Chromeの拡張機能を使用して任意のウェブページを1クリックでブログカードを作成して、ブログ記事に設置する方法を紹介します。
ここで紹介する方法は、BloggerだけでなくWordPressや他の無料ブログなどでも利用可能です。
[post_ads]ブログカードのソースコード
上で表示したブログカードのソースコードは以下になります。
<iframe class="hatenablogcard" frameborder="0" scrolling="no" src="https://hatenablog-parts.com/embed?url=https://blogger101.blogging-life.com/2018/08/embed-hatena-blogcard.html" style="height: 175px; margin: 15px 0px; max-width: 680px; width: 100%;" title="Bloggerの記事内にブログカードを埋め込み表示する方法 - Blogger101@ブロギングライフ"></iframe><br />
定形のコードにウェブページのURLとタイトルをパラメーターに入力し、作成されたブログカードをiframeを使用して埋め込み表示する仕組みです。
ブラウザーの拡張機能を使ってブログカードのコードを作成する
この様なページURLとタイトルを付加するような決まったパターンのコードの作成は、ブラウザーの拡張機能を使用すると簡単に対応できます。Chromeの拡張機能アプリ Create Link は、表示しているページのURLとタイトルを、任意のフォーマットでクリップボードに保存する機能を備えています。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGbnEJDAb_ORUDwwCuYGT6pntFwPlpfTBz2ZarMrjjtrM3jNG4-TNV5LmlNxUQhbH5217UbQblKqoFYShXHc6PtEXUD740TAgKokJ_UicrAFRGvbvhBIl7_IhPHgH_aGtsYAcVd75Sf4/s400/Chrome+extension+Create+Link.png)
Create Link の設定方法
Chromeを使用してChrome Web Store にアクセスして、検索欄に"Create Link"を入力して実行するとCreate Linkが表示されます。ボタンを押してChromeに追加します。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEistuOkhB4iZwD8jKmxbElRtCPl6ie3CSDr2xBS38JY4Amwi3aDgJPaztQ71p2kbWAKPLOym6IO7Uf2oUBUYrrH8jmiTcliK8pXeGJii3Tzw4_WMwZ9ujGo6Uwz5N8urzOTOta04zPTLgU/s640/Add+Create+Link+to+Chrome+Extension.png)
Chromeのウィンドウ右上に表示される拡張機能のアイコンの中から、Create Linkをクリックし表示されるドロップダウンリストから"Configure"を選択します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XYRQgVWcX_SBDhgT8m9o37nyeiZnLmHL1Meyi2EzIX7ALnbHfJV3sP8A8pcHKMIQv6KSMJUwRDH2srr8XTdopvV8TGKCZtcT-gsitI4eY7DEnglI27slfCL8b02SEDb7k3AewN4SqK4/s320/Choose+Configure+in+Create+Link+menu+item.png)
Create Linkの設定ページが表示されます。項目の中の"Formats"の下に表示される表の下の"+"を押します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuDVzvuFJuc_XrbvtGwTWxdNj0NzGXAXH3EhNBc1-4DLWSOcjFp9n12fGHe020iANb3SbJFxr8hmWF6x8-QyGfGTp_gWR4ExcJ4_ypQhyphenhyphennBnfQJmh9V7Z0rT411ZQASwaYz2smhOFxJE/s640/Create+Link+setting.png)
新しいフォーマットの入力欄が追加表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOY1zg0elnfKA8yJhZ9p2hnk82wgfLYi8yRqYWcmMW6Eqzc4yAnirNDtz2HbHB5Eqrxr6-dcZgib1R9AVgH0gbdnQ0jc9C12WkxH-oVd3_VAcn3WO_narkhyLmu8a2tJbeIbKE4H-HqJI/s640/Enter+Create+Link+setting+code.png)
名前(例:はてなブログカードiframe)を入力し、Formatの欄には以下のコードを貼り付けます。
[<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>]
設定項目入力後の例
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDC8fd_lOXbIf8DZ-lSqaBUGScXXKrkZXnGVB90v2O5OMxXttTrYHcuN6g_s616Sj0kgmmzLMPsANV80NAgqrE_gRTHRoUwpm_zNCLG7CTmi3rPSvrTFH3tdxBsFcDj9_CRbKr7-FDuRw/s640/Create+Link+blogcard+setting.png)
ブログページのブログカードを1クリックで作成する
ブログカードを作成するページをChromeで表示します。ページ上の任意の場所から、右クリックし表示されるドロップダウンリストからCreate Linkをマウスオーバーし、続いて表示されるフォーマットのリストから上で設定したブログカードの作成フォーマット名を選択します。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVav035l70bs3REerWsqeGZ6gRgy-uRlHw5H-TOPOKvnNhHyjfamtOXNtLFYmvWIbq_rUcn9qbEsAFdnZ81pC37rmNgWS1JoE5DCLYW4SKYA_7U9Ayn4j6zRhBBp8wI2XV0dDON4hrpB8/s640/Create+blogcard+using+Create+Link.png)
Create Linkのリストのブログカードの作成フォーマットを選ぶと、設定したブログカードのコードにページのURLとタイトルを追加してクリップボードに保存されます。
クリップボードに保存されたブログカードのコードをブログ記事に貼り付ける
Bloggerの投稿編集画面の記事内のブログカードを挿入する箇所にカーソルを持っていき、クリップボードに保存されたコードを貼り付けます。(右クリックでペーストするか、ショートカットでペーストします。)HTMLの入力モードで編集している場合は、以下の様になります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSW37_n75ROpxz1BjRNMPoFBGDw5GyROIBs7Hs0fAMaormfxVNYQBxJCKx6Uji0Fc-As2tOmJ03cM7f70i2vSswF1ITtvKpCbKcERHJP5rpCxuStrFHFSeNrEPf9eDDiComwAJMT1KjA8/s640/Blogcard+code+in+Blogger+post+HTML+mode.png)
編集モードを「作成 (Compose)」にした場合は、以下の様にブログカードが表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbWvIm8GFFOkqM9Mq8h_beHUbYEb6LVQCFBOF-fRHNX9yKsMrHDO-XVYhDcqVpU3fBJUjWdRp_n-eH1wgou3d7Bf0cfgznp5cnFfEiiy4jePI05sBB5MAwTrLcJ_2oecK_2OVDM4sJaUM/s640/Blogcard+in+Blogger+post+editing+page.png)
以上です。文字通り、1クリックで簡単にサイト内外のページのブログカードを作成することができます。
YouTube ビデオ
本記事で紹介した設定作業を実際に行って、Bloggerブログにブログカードを設置する手順を紹介しています。
コメント