【Contempo 他】ホームリンクを付けてみた

2019/06/24 ｜2023/09/28

Contempo や Emporio 等の Blogger 新テーマで削られてしまって不便になった機能で、前後記事リンクを表示させる手順は以前書きましたけど、今回は「ホームに戻る」リンクを前後記事リンクの付近に付ける方法を2つ紹介します。

何故ホームリンク？

新テーマでは、上に固定されているメニューバーの中にホームリンクが入っているので、本来ならわざわざ付ける必要はないんですけど、前々から邪魔に感じていたメニューバーを取っ払っちゃったもんで、代わりのホームリンクをどこかしらに付けとこうかと思った次第です(^^;
ちなみに同じくメニューバーに入ってた検索ウィジェットは上サイドバーに設置してます。

ホームリンクの設置

さて、今回導入するホームリンクですが、これは単なる a タグですので、今回はテーマ編集でHTMLを弄るとかそんな面倒なことはせず、HTML/JavaScript ウィジェットとして設置しました。レイアウト画面で管理出来るので設置箇所の移動や、表示・非表示の切り替えも楽ですからね。

中身はこんな感じです。FontAwesome のアイコン付けてます(CSS もテーマ編集で別途追記しています)

<center><a href="/" title="ホーム"><span id="homelink"><i class="fas fa-home fa-fw" style="padding-right:3px"></i>ホーム</span></a></center>

ウィジェット名は空欄のままで「ブログの投稿」の下に設置。
フッターエリアに置いてもOKです。

CSSで前後記事リンクと同じデザインに。

尚、HTMLは弄らないと書きましたが、条件分岐タグは付けました。
常時ホームリンクを表示させる必要はないので、記事/固定ページ、ラベルページ、検索結果でのみ表示するようにしてあります。
当ブログのような番号付きページネーションを導入していない環境であれば、単純にホーム以外を指定する
<b:if cond='!data:view.isHomepage'>
でもOKだと思います。

                  <b:widget id='HTML12' locked='false' title='' type='HTML' version='2' visible='true'>
                    <b:widget-settings>
                      <b:widget-setting name='content'>&lt;center&gt;&lt;a href=&quot;/&quot; title=&quot;ホーム&quot;&gt;&lt;span id=&quot;homelink&quot;&gt;&lt;i class=&quot;fas fa-home fa-fw&quot; style=&quot;padding-right:3px&quot;&gt;&lt;/i&gt;ホーム&lt;/span&gt;&lt;/a&gt;&lt;/center&gt;</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main'>
<b:if cond='data:view.isSingleItem or data:view.isLabelSearch or data:view.search.query'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
                  </b:widget>

もう一つの方法

参考までに別の方法をご紹介します…ていうかむしろこちらの方が正統派といってもいいかもしれません(^^;

手順はこちらの nono*Note さんの記事に詳しく書かれていますので、こちらをご参照下さい。

nono*Note
Blogger ページナビのないテーマ「Emporio」にページナビを追加する
Bloggerのテンプレートで個別記事下に前後の記事へのリンクがない「Emporio」にページナビを追加する方法
https://nono-note.blogspot.com/2019/03/blogger-emporio.html