以前、Bloggerで作成したブログサイトのトップページにだけ特定の内容を表示させるための方法について記事を書きました。

・Bloggerカスタマイズ　トップページにだけ表示させる


このときの記事は、僕のテスト用サイトを素材にして、操作方法を説明しただけでした。


今回、実際のサイト「汎兮堂HOME」（僕のポータルサイト＆メインブログ）で、この作業を実践したので、手順を記録しておきます。基本的な流れは前回記事と同じですが、表示する内容が少し複雑になる分、テスト用サイトの時にはなかった工夫が必要になります。


メインブロックにガジェットを追加

この操作は前回記事と全く同じです。管理画面を開いて、「レイアウト」機能のページを開き、「メイン」ブロックの「ブログの投稿」の上の部分に「HTML/Javascript」ガジェットを追加します。




ガジェットが追加できたら、そのガジェットの編集画面を開いて、表示させたい内容を記述するのですが、「HTML/Javascript」ガジェット編集画面にはWYSIWYGエディター機能がなく、HTMLを直接記述するしかありません。今回はテスト用サイトの時より表示させる内容が複雑なので、HTMLを手書きするのは面倒です。

そこで、WYSIWYG編集ができるブログ投稿画面（もしくは固定ページ作成画面でもかまいません）の作成モードを利用して表示させたい内容を作成した上で、それをHTMLモードで表示させてHTMLをコピーし、それをガジェット編集画面に戻ってペーストする、という手を使います。


まず、いったん投稿画面に移動し、以下のような記事を作成します。



通常のブログ作成時と同じように、画像を貼り付けたり、文字サイズを変えたり、太字にしたり、リンクを張ったり簡単にできます。ただ、今回使用している「タイトル付き囲み枠」については、ブログ投稿画面にも作成機能がないので、HTMLを直接編集するしかありません。囲み枠を加えるためのHTMLについては、また別の記事で説明しようと思います。

（追記：囲み枠を加えるHTMLについて記事を書きました→　【HTML】囲み枠・タイトル付き囲み枠をつける）


出来上がったら、編集モードを「作成モード」から「HTMLモード」に切り替えます。



表示されたHTML全体をコピーします。


コピーできたら、投稿画面は閉じ、再び管理画面からレイアウト機能のページを開き、最初に「メイン」ブロックに追加した「HTML/Javascript」ガジェットの編集画面を開いて、コピーしたHTMLを貼り付けます。




今回の例では、コンテンツ自体にタイトル付き囲み枠を使用しているので、ガジェット編集画面の「タイトル」欄には何も記載しませんが、必要があればここにタイトルを入力します。必要なければ空白でも問題ありません。

貼り付けができたら、保存してからガジェット編集画面を閉じます。

以上の作業を完了すると、実際の表示は下のようになります。


意図したとおり、トップページの新着ブログリストの上に、今回作成した内容が表示されていますが、新着ブログリストとの間に隙間がなく、密着してしまっています。

これでは困るので、新着ブログリストとの間に隙間を入れるために、もう一つガジェットを追加することにしました。ついでに、新着ブログリストの上に「ブログ一覧（新着順）」というタイトルを表示させるようにします。

調整用ガジェットの追加・編集

操作は先程と同じです。レイアウト機能のページで、「メイン」ブロックにもう一つガジェットを追加し、それを先程作成編集したガジェットと「ブログの投稿」との間に移動させます。


そして、このガジェットの編集画面を開き、空白行と「▼ブログ一覧（新着順）」というタイトルを表示させるためのHTMLを記載します。今度は短いので手書きしてもいいですし、先程と同じようにブログ投稿画面でWYSIWYG編集してからHTMLをコピー＆ペーストしてもかまいません。


これで保存完了すれば、実際の表示は下のようになり、ちゃんと隙間ができて、新着ブログリストのタイトルも付いて、わかりやすくなりました。


トップページでだけ表示させるためのテンプレート編集

次に、今回作成した内容が、トップページ以外では表示されないようにテンプレートを編集しないといけません。方法は前回記事で説明したのと同じなので、そちらをご覧ください。

ただし、今回はトップページでだけ表示させるガジェットが2つ（「このサイトについて」の部分と、「空白行＋ブログ一覧（新着順）」の部分）なので、それぞれの該当部分についてHTMLの変更が必要になるのが注意点です。


以上で作業は完了です。トップページにだけ今回作成した内容が表示され、それ以外のページは今までどおりとなります。

感想

「HTML/Javascript」ガジェットがブログ投稿画面と同じようにWYSIWYG編集可能なら、ずっと簡単で手軽になると思うのですが、どうしてできないんですかね。ひょっとしたら「HTMLもわからんやつは、こんなところいじるなよ」という意図なのかもしれません。確かに「HTMLって何」という方は、今回のカスタマイズはやめておいたほうがいいかもしれません。

追記（2022.05.01）

この記事で取り上げた、汎兮堂HOMEのトップページにだけ表示される内容を、無限ループスライダーを用いて改善しました。→【プラグイン不要】リンク付き画像の無限ループスライダーを作る【CSS・HTMLのみ】