こんにちは bibaです。

ブログデザインをカスタマイズして遊ぼうと思い、ブログテーマをSimplicityに戻しました。やっぱりSimplicityだとカスタマイズがわかりやすいし、質問サイトもあるので使っていて楽しいです。

今回はフッター上部(つまりメインとフッターの間)に、横幅いっぱいのエリアを作ろうと思い、取り組んでみました。

フッター上部に表示する方法

調べてみたら、Simplicityの質問サイトで同じことを聞いている方が見つかりました。

方法は目的によっていろいろな方法があるということもわかりました。今回、私が行ったのは、この質問サイトで最初に説明されている方法です。

簡単にいうとbefore-main.phpのフッター上部版(ここではafter-main.phpという名)を作る感じの作業です。

作業の手順

質問サイトの説明を読めばわかるのですが、今回の作業内容をここでも再掲しておきます。

手順1

まず、footer.phpの中から

</div><!-- /#body -->

<!-- footer -->

を探し出します。たぶん一瞬で見つけられます。

手順2

次に、その行間に

<?php get_template_part('after-main'); ?>

と書きます。’after-main’のところは自分の好きな名称にしてください。ここでは質問サイトにしたがって、このまま書き込みました。

手順3

さて、次の作業はちょっと手間がかかります。
エディターを開いてこんな書き込みをして、after-main.phpという名前で保存し、サーバーにアップします。

<div class="after-main"> 〜test〜</div>

もちろん、〜test〜というのが書いてあるところは、自分が表示したい内容に関する記述ということになります。

手順4

次が仕上げです。style.cssにこれを書きます。

.after-main {
  clear: both;
}

表示したい内容に関してスタイルを指定したい場合は、「both;」の下に書き足します。

以上、作業の流れはこんな感じです。

これで、フッター上部というかメインの下に何かしらを表示するための、after-main.phpを用意することができます。メイン上部だけでなくメイン下部にもこんなエリアがあると、活用範囲が広がりそうです。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
bibalogue