以前書いた記事「ブログテンプレートに無ければ外部ツールを使ってでも欲しい関連記事ウィジット」で、調べて置いた幾つかの関連記事ウィジェットが、立て続きにサービス終了となり、筆者の別ブログで、サムネイル付き関連記事を表示できない状態が、長く続いていました。

    やはりサイトの回遊率が落ちて、ブログ滞在時間が大幅に少なくなっていました。なので、是が非でも、関連記事をなんとかしたい！との思いから、行動に移す事にしました。

    数年前から、海外サイトで Blogger ユーザーが直接関連記事のコードを貼り付ける方法を、いくつか見た事がありましたが、ウィジェットがあるうち、それは面倒でしたので、避けて来ましたが、いよいよ追い詰められてしまった感じです。

    今週初めに再検索したところ、日本語サイトにもありました。IB-Note の Fuma さんの記事で、【Blogger】関連記事表示のお手軽プラグインが一番わかり易く書いてありました、Fuma さんがその記事で参考した海外ブログの Blogger Widget Generator の記事「
How to Add Related Posts Widget with Thumbnails to Blogger / Blogspot」は、筆者も何度か検索した際に訪れた事がありました。

    両方の作者のおかげで、今回は簡単に「関連記事」のコードを追加できましたので、お二方に感謝の気持ちを込めて、御礼申し上げます。

    コード追加作業の前に、先ずはブログの現テーマをバックアップします。具体的な操作は、「テンプレート「Faber」の着せ替えと使ってみた感想」と言う記事に書いてありますので、バックアップ方法がはっきりわからない場合は参考にして下さい。

    続いては、この直接コードを追加する関連記事ウィジェットの特徴と、手順通りの作業を記録して行きます。

コード追加系関連記事ウィジェットの特徴

    ソース元のページには、この関連キイウィジェットに関する特徴があり、関連記事ウィジェットを探している皆さんにも、早く理解できますよう、こちらにも引用させて頂きます。

●記事の画像とタイトルのみを表示するシンプルスタイル
●記事の重複表示をしない
●記事は毎回ランダムに表示される
●ラベルを利用しているので、確実な関連性がある
●アトリビューション表示なし
●表示数など設定し易い
●外部ソースの読み込みが無い最小限コードで軽量化

CSS と JavaScript 部分のコード挿入

    操作手順
    ① Blogger の管理画面でメニューから「テーマ」を選ぶ
    ② カスタマイズボタン右端の「▼」でメニューを開き「htmlの編集」を選ぶ
    ③ コード画面に入って「ctrl」＋「F」でタグの</head>を検索
    ④ </head>のすぐ上に、下記コードをコピペする


body 部分のコード挿入

    body 部分とは、記事の本体部分のコードを言います。この2番目のコードは、関連記事ウィジェットを設置したい場所にコピペしますので、例えば記事のすぐ下に設置する場合、目印は <div class='post-footer'/> タグのすぐ上になります。

    では、操作手順（上の操作に続く状態で）
    ①「ctrl」＋「F」で設置したい場所のタグを検索
    ② 設置したい場所のタグを良く確認してから、下記コードをコピペする