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

2023/09/28
アイキャッチ

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

CONTENTS

何故ホームリンク?

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

ホームリンクの設置

さて、今回導入するホームリンクですが、これは単なる 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

こちらは Blogger デフォルトのホームリンク機能で、非表示になっているものを再表示させるやり方です。

ホームリンクボタン2

前後記事リンクの間にきれいに並んで配置されるので、見栄えはこっちの方がいいかも。
但し、(詳しく検証してませんがおそらく新バージョンの公式テーマでは)条件分岐タグを付けても固定ページでは表示されないようなので当ブログでの導入は一先ず見送りました。

オススメは…

ということで、ホームリンクの設置を検討されている方は、それぞれの環境やお好みによって導入しやすい方を選択して下さい。

もし固定ページで表示されなくても構わないのであれば、個人的には nono*Note さんの導入方法をオススメします(^^)