THE THOR ザ・トール 固定フッターエリア トップページだけ非表示

今回は 固定フッターエリア トップページだけ非表示 にするカスタマイズです。

これまでの 固定フッターエリア のカスタマイズは以下を参考にしてください。

THE THOR ザ・トール 固定フッターエリア 背景色を変更




固定フッターエリア トップページだけ非表示 にする理由

THE THOR 固定フッターエリア トップページだけ非表示

当サイトでの現在の固定フッターエリアの項目は「ホーム」「シェア」「メニュー」「目次」となっています。

トップページに「ホーム」に戻るボタンは必要ない。目次のないトップページに「目次」に戻るボタンは必要ない。

 

といったわけでトップページのみ固定フッターエリアを非表示にすることにしました。

シェアボタンとメニューボタンについては今後考えますw

※固定フッターエリアの項目次第で再表示する可能性があります。

固定フッターエリアをトップページだけ非表示にする方法を考察

様々な方法が考えられます。

しかし僕の能力では上手くいきませんでした。


トップページを識別するidまたはclassと固定フッターのclassを指定して非表示にする

トップページを指定することが出来ず失敗。

トップページの指定さえ出来ればこの方法が簡単で良いのですが・・・残念。


phpでトップページを判定して固定フッターエリアを非表示にする

phpでトップページを判定というのは自動広告のカスタマイズで行いました。それを利用しようとしましたが失敗。コードの書き方がわかりませんでした。あとテーマが更新されると再設定なのも不便なのでボツ。

THE THOR ザ・トール 自動広告をトップページだけ非表示にする方法


トップページのみに採用されているコンテンツにCSSを追加する

CSSを使って固定フッターエリアを非表示にすることは出来ています。

そのコードをトップページのみに使われているコンテンツに小判鮫のごとく追加することで固定フッターエリアをトップページだけ非表示にすることができました。最終的には小判鮫じゃなくウィジェットを利用しました。



固定フッターエリアをトップページだけ非表示にする手順

ウィジェットを利用します。

カスタムHTMLウィジェットをトップページ下部エリアに設定

外観 → ウィジェット → カスタムHTMLをトップページ下部エリアに追加

 

カスタムHTMLの中に以下のコードを記述。

<style type="text/css">
.controllerFooter{display: none;}
</style>

 

以上で完成です。


追記:ウィジェットの枠だけが表示される。

上記の方法で固定フッターエリアをトップページだけ非表示にすることができます。しかし THE THOR でウィジェットに枠をつける設定にしているとコードを書いたウィジェットの枠だけが表示されてしまいます。

固定フッターエリア ウィジェット 枠

※画像はわかりやすいようタイトルを付けています。


対処方法は既存のトップページだけに使用しているウィジェット(カスタムHTMLまたは[THE]スタイルテキスト)に追記というカタチで上記コードを挿入すれば無駄な枠を表示することなく適用が可能です。(またはウィジェットに枠を付ける設定をやめる)

こちらは THE THOR を利用中のやいやいさん(@8181blog)から情報提供していただきました。ありがとうございます。

あとがき

ちょっと邪道な感じもしますがナイスアイデアで切り抜けた!ってことでよしとしますw

あとはメニューとシェアをどう表現するかですね。固定フッターエリア関連はまだまだ続く。

THE THOR 固定フッターエリアをトップページだけ非表示にする方法
呟くのよ・・・私の棒ストが