【WordPress】STINGER8でフッターを全幅・記事エリアに合わせる・サイト名を画像にする方法!

Stinger8

今回はフッターのカスタマイズ方法です。

STINGER8では、今までとは少々やり方が変わったので、
カスタマイズするにも注意が必要です。

 

スポンサーリンク

フッターの色を全幅で変える

STINGER7やPLUSの場合は、いろいろと面倒でしたが。
STINGER8の場合は、footer.phpをいじる必要はなく、
style.cssをいじるだけで足ります。

style.cssに以下のコードを入力するだけです。

#footer{
   background:#38b48b;
}

このような感じになります。
%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e5%a4%a7

以前と比べて断然に簡単になっていますね。

フッターの幅を記事エリアに合わせる

STINGER8の場合、footerをいじると全幅になってしますので、
記事エリアに抑えたい場合は、#footer-inに以下のコードを入力します。

#footer-in{
   background:#38b48b;
}

すると色が変わるのは記事エリアの範囲に抑えられます。
%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e5%b0%8f

フッターのサイト名を画像にする

画像にする場合は、footer.phpをいじる必要があります。
そのため、まずは、子テーマのフォルダーにfooter.phpのファイルをコピーしましょう。

初めに、footer.phpの中から以下のコードを見つけてください。

<p class="footerlogo">
			<!-- ロゴ又はブログ名 -->
				<?php if ( !is_home() || !is_front_page() ) { ?>
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php } ?>
					<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
				<?php if ( !is_home() || !is_front_page() ) { ?>
					</a>
				<?php } ?>
			</p>

このなかにある、このコードを書き換えます。

<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>

こちらを以下のコードに書き換えます。

<img src="画像のURLを入力してください">

「画像のURLを入力してください」のところにヘッダーでやったように、
画像のURLを入力してください。

以下、完成したコード

<p class="footerlogo">
			<!-- ロゴ又はブログ名 -->
				<?php if ( !is_home() || !is_front_page() ) { ?>
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php } ?>
					<img src="画像のURLを入力してください">
				<?php if ( !is_home() || !is_front_page() ) { ?>
					</a>
				<?php } ?>
			</p>

フッターは以下のようになります。
%e5%ae%8c

フッターメニューとコピーライトの色を変える

これらの色を変える場合は、以下のコードをstyle.cssに加えます。

#footer .footermenust a{
	color: #fff  !important;
}

p.copy{
       color:#fff !important;
}

こんな感じ
menuwhi

これで簡単にフッターのカスタマイズはできたと思います。
これらが、求めるフッターデザインの参考になれば幸いです!

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

Stinger8のカスタマイズ記事まとめはこちら!↓
https://plu-plu.net/%e3%80%90wordpress%e3%80%91stinger8%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%be%e3%81%a8%e3%82%81/

コメント