当ブログで実践した、無料WordPressテーマ「STINGER PLUS+」のカスタマイズも残りわずかとなりました。
それもちょっと寂しいなぁと感じています。
あーでもない、こーでもないってね。とっ散らかった頭の中を整理しながらまとめたカスタマイズ方法。(笑)
参考にして下さる方がいらっしゃるととても嬉しいものですね。
いつもありがとうございます。
ここでは、フッターのカスタマイズ方法をご紹介していきます。
まず、こちらがデフォルトでの表示。
コピーライトの部分は、カスタマイザーで設定した「サイトタイトルとその下のキャプションのカラー」が反映されるようです。
そして、こちらがカスタマイズ後の表示です。
メニューのカラーをヘッダーメニューとコンテンツに合わせて黒色に。キャプション(サイト説明文)を非表示にして余白を調整しました。
・・なんだか「間違い探し」みたいですね。(笑)
スポンサーリンク
Contents
フッターのサイト説明文を非表示にする方法
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて
WordPressダッシュボード→外観→テーマ→テーマの編集→「st-footer-content.php」(子テーマ推奨)を開きます。
下から3行目のコードを下記のように編集します。
編集といっても、2カ所ある<?phpのすぐ後ろに//(半角)を入力してコメントアウトするだけ。
余裕のよっちゃんですね。←古っ。
1 |
<a href="<?php //echo esc_url( home_url( '/' ) ); ?>"><?php //bloginfo( 'description' ); ?></a> |
style.cssで余白を調整
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)に余白を調整するコードを追加します。
こちらのコード追加は必要に応じて行ってください。
1 2 3 4 5 6 7 8 9 |
/*コピーライト上の余白*/ #footer .copy { margin-top:-10px; } /*フッターメニュー上の余白*/ #footer .footermenust { margin-top:-20px; } |
※余白の指定箇所とpx数はお好みで変更可能です。
フッターのメニューカラーの変更方法
フッターのメニューカラーを変更したい場合は、同じく「style.css」に下記コードを追加します。
STINGER PLUSの場合
1 2 3 4 5 6 7 8 9 10 11 12 |
/*フッターメニューのフォント&ボーダーカラー*/ #footer .footermenust li { border-right:1px solid #000; } #footer .footermenust li:last-child { border-right:none; } #footer .footermenust a { color:#000; } |
- 各項目の右側に1pxの黒色のボーダーを指定
- 最後の項目だけボーダーを非表示に
- テキストリンクのフォントカラーを黒色に指定
フッターメニューを非表示に、ヘッダー右上だけに表示したい場合はこちらをご参照ください。
AFFINGER4の場合
AFFINGER4の場合は、カスタマイザーでの設定が優先されます。コピーライトの部分はカスタマイザーでの設定カラーのままで、フッターメニューのみカラー変更したい場合はコード内に「!important」を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 |
/*フッターメニューのフォント&ボーダーカラー*/ #footer .footermenust li { border-right:1px solid #000 !important; } #footer .footermenust li:last-child { border-right:none; } #footer .footermenust a { color:#000 !important; } |
style.cssに追加したコードが反映されないときは?
style.cssに追加したコードが反映されないときは、始めにキャッシュのクリアをお試しください。
また、この記事を更新後、Twitterにてこのようなコメントをいただきました。
CSSが反映されずちょっと悩んだけど、自分で追加したCSSの前に追加したら、うまく反映できました(^^♪ STINGER PLUS+の情報はまだ少ないから助かります。 (^人^)感謝♪ https://t.co/0tQd8FYVBw
— はま (@hakata_no_onago) 2016年6月26日
style.cssに追加したコードが反映されない問題は、追加場所を前の方に変更してみると解決することがわかりました。
はまさん、貴重な情報をありがとうございます。
以上、STINGER PLUS+ のフッターのキャプションを非表示にしてメニューカラーの変更をするカスタマイズ方法のご紹介でした。
最後までお付き合い下さりありがとうございます。