HOMEボタンをトップページだけ非表示

THE THOR の固定フッターエリアはとても便利な機能です。

スマホを利用中は画面下部にボタンがあることで片手操作が可能。設定を活用して使い勝手を良くしたいですね。

THE THOR 固定フッターエリア 設定

HOMEなのにHOMEに戻るボタン

固定フッターエリアはスマホ専用の設定です。

基本的な設定は以下より行います。

外観 → カスタマイズ → 共通エリア設定[THE] → 固定フッターエリア設定[スマホ専用]

固定フッターエリアにはユーザーが選んだ項目が最大4つとTOPへ戻るボタンが表示されます。

固定フッターエリア このカスタマイズで出来ること

固定フッターエリア HOME表示あり記事ページなどでは4項目
固定フッターエリア HOME表示なしHOMEでは非表示

私が固定フッターエリアに設定している項目は【Home】【シェア】【メニュー】とデフォルトで設定されている【TOPへ】のボタンです。

この中の【Home】ボタンを「HOMEを閲覧しているときに非表示」になるよう設定します。

※カスタマイズは自己責任でお願いします。

THE THOR 固定フッターエリア HOMEボタンをトップページだけ非表示 にする設定

トップページだけ非表示にする方法は前回行った「THE THOR ザ・トール 固定フッターエリア トップページだけ非表示」と同じで、トップページだけに使われているウィジェットを利用します。ここでは【トップページ下部エリア】を利用します。

外観 → カスタマイズ → ウィジェット → トップページ下部エリア

トップページ下部エリアにカスタムHTMLのウィジェットを追加。以下のコードを挿入。

<style type="text/css">.controllerFooter__item:first-child{display:none;}</style>

完成です。

POINT上記コードは固定フッターエリアの最初の項目を非表示にするコードになります。最初の項目がHomeになるよう固定フッターエリアを設定しておいてください。

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

狩野 祐東
発売日: 2017/02/22
Amazonの情報を掲載しています

あとがき

当サイトの【Home】ボタンは自由設定リンクボタンで打ち直しています。「HOME」から「Home」に変更してアイコンも家のデザインから変更しています。

打ち直しも含めて自己満足なカスタマイズです。

この他にも固定フッターエリアのカスタマイズがあるので良かったらそちらもご覧ください。

呟くのよ・・・私の棒ストが