見た目が良いブログカードを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とタイトルを、任意のフォーマットでクリップボードに保存する機能を備えています。
Create Link の設定方法
Chromeを使用してChrome Web Store にアクセスして、検索欄に"Create Link"を入力して実行するとCreate Linkが表示されます。ボタンを押してChromeに追加します。
Chromeのウィンドウ右上に表示される拡張機能のアイコンの中から、Create Linkをクリックし表示されるドロップダウンリストから"Configure"を選択します。
Create Linkの設定ページが表示されます。項目の中の"Formats"の下に表示される表の下の"+"を押します。
新しいフォーマットの入力欄が追加表示されます。
名前（例：はてなブログカード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>]
設定項目入力後の例
以上で設定完了です。設定ページを閉じます。ブログページのブログカードを1クリックで作成する
ブログカードを作成するページをChromeで表示します。ページ上の任意の場所から、右クリックし表示されるドロップダウンリストからCreate Linkをマウスオーバーし、続いて表示されるフォーマットのリストから上で設定したブログカードの作成フォーマット名を選択します。
Create Linkのリストのブログカードの作成フォーマットを選ぶと、設定したブログカードのコードにページのURLとタイトルを追加してクリップボードに保存されます。
クリップボードに保存されたブログカードのコードをブログ記事に貼り付ける
Bloggerの投稿編集画面の記事内のブログカードを挿入する箇所にカーソルを持っていき、クリップボードに保存されたコードを貼り付けます。（右クリックでペーストするか、ショートカットでペーストします。）HTMLの入力モードで編集している場合は、以下の様になります。
編集モードを「作成 (Compose)」にした場合は、以下の様にブログカードが表示されます。
以上です。文字通り、1クリックで簡単にサイト内外のページのブログカードを作成することができます。
YouTube ビデオ
本記事で紹介した設定作業を実際に行って、Bloggerブログにブログカードを設置する手順を紹介しています。
コメント