今回は 固定フッターエリア を トップページだけ非表示 にするカスタマイズです。
THE THOR には固定フッターの機能が標準で装備されています。フッターだけでなくヘッダーの固定も標準装備されていてとても便利です。THE THOR の個人的な評価は以下をご覧ください。
固定フッターエリア トップページだけ非表示 にする理由
当サイトの固定フッターエリアの項目は「ホーム」「シェア」「メニュー」「目次」となっています。
トップページに「ホーム」に戻るボタンは必要ない
目次のないトップページに「目次」に戻るボタンは必要ない
といったわけでトップページのみ固定フッターエリアを非表示にすることにしました。
※現在ではトップページのみ固定フッターエリアのHOMEボタンを非表示に変更しています。
THE THOR の固定フッターエリアはとても便利な機能です。 スマホを利用中は画面下部にボタンがあることで片手操作が可能。設定を活用して使い勝手を良くしたいですね。 THE THOR 固定フッターエリア 設定 […]
固定フッターエリアをトップページだけ非表示にする方法を考察
固定フッターエリアをトップページだけ非表示にする方法を考えました。
①トップページを識別するidまたはclassと固定フッターのclassを指定して非表示にする
トップページを指定することが出来ず失敗。
トップページの指定さえ出来ればこの方法が簡単で良いのですが・・・残念。
②phpでトップページを判定して固定フッターエリアを非表示にする
phpでトップページを判定というのは自動広告のカスタマイズで行いました。それを利用しようとしましたが失敗。コードの書き方がわかりませんでした。あとテーマが更新されると再設定なのも不便なのでボツ。phpの勉強が必要ですね。
・THE THOR ザ・トール 自動広告をトップページだけ非表示にする方法
③トップページのみに採用されているコンテンツにCSSを追加する
CSSを使って固定フッターエリアを非表示にすることは出来ています。
そのコードをトップページのみに使われているコンテンツに小判鮫のごとく追加することで固定フッターエリアをトップページだけ非表示にすることができました。最終的には小判鮫じゃなくウィジェットを利用しました。最終的にこの方法を利用しています。
固定フッターエリアをトップページだけ非表示にする手順
ウィジェットを利用します。
カスタムHTMLウィジェットをトップページ下部エリアに設定
カスタムHTMLの中に以下のコードを記述。
<style type="text/css">
.controllerFooter{display: none;}
</style>
以上で完成です。
追記：ウィジェットの枠だけが表示される。
上記の方法で固定フッターエリアをトップページだけ非表示にすることができます。しかし THE THOR でウィジェットに枠をつける設定にしているとコードを書いたウィジェットの枠だけが表示されてしまいます。
※画像はわかりやすいようタイトルを付けています。
対処方法は新規のウィジェット利用をやめて、もともとあるウィジェットでトップページだけに使用しているものに前述のコードを追記というカタチで対処します。（またはウィジェットに枠を付ける設定をやめる）
こちらは THE THOR を利用中のやいやいさん(@8181blog)から情報提供していただきました。ありがとうございます。
あとがき
ちょっと邪道な感じもしますがナイスアイデアで切り抜けた！ってことでよしとします。
ほかにも固定フッターエリアで気になる部分があります。スマホでの操作を考えると画面下部に操作系を集めたほうが便利です。便利であれば回遊率も上がるはず。更に改良をしていきたいと思います。
