伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【STINGER PLUS】フッターのカスタマイズ(キャプションを非表示&メニューカラーの変更)

投稿日:2016年6月25日 更新日:

こちらのカスタマイズは、AFFINGER4でも応用できます。

当ブログで実践した、無料WordPressテーマ「STINGER PLUS+」のカスタマイズも残りわずかとなりました。
それもちょっと寂しいなぁと感じています。

あーでもない、こーでもないってね。とっ散らかった頭の中を整理しながらまとめたカスタマイズ方法。(笑)
参考にして下さる方がいらっしゃるととても嬉しいものですね。
いつもありがとうございます。

ここでは、フッターのカスタマイズ方法をご紹介していきます。

まず、こちらがデフォルトでの表示。
コピーライトの部分は、カスタマイザーで設定した「サイトタイトルとその下のキャプションのカラー」が反映されるようです。

kanamii-1285-2

そして、こちらがカスタマイズ後の表示です。
メニューのカラーをヘッダーメニューとコンテンツに合わせて黒色に。キャプション(サイト説明文)を非表示にして余白を調整しました。

kanamii-1285-3

・・なんだか「間違い探し」みたいですね。(笑)

スポンサーリンク

フッターのサイト説明文を非表示にする方法

st-footer-content.phpの編集

全てのテーマファイルの編集は、テーマのアップデートの影響を受けない「子テーマ」で行うことをおすすめします。
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-footer-content.php」を開きます。

下から3行目のコードを下記のように編集します。
編集といっても、2カ所ある<?phpのすぐ後ろに//(半角)を入力してコメントアウトするだけ。
余裕のよっちゃんですね。←古っ。

style.cssで余白を調整

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に余白を調整するコードを追加します。

※余白の指定箇所とpx数はお好みで変更してください。

フッターのメニューカラーの変更方法

フッターのメニューカラーを変更したい場合は、同じく「style.css」に下記コードを追加します。

STINGER PLUSの場合

  • 各項目の右側に1pxの黒色のボーダーを指定
  • 最後の項目だけボーダーを非表示に
  • テキストリンクのフォントカラーを黒色に指定

AFFINGER4の場合

AFFINGER4の場合は、カスタマイザーでの設定が優先されます。コピーライトの部分はカスタマイザーでの設定カラーのままで、フッターメニューのみカラー変更したい場合はコード内に「!important」を追加します。

style.cssに追加したコードが反映されないときは?

style.cssに追加したコードが反映されないときは、始めにキャッシュのクリアをお試しください。

また、この記事を更新後、Twitterにてこのようなコメントをいただきました。

style.cssに追加したコードが反映されない問題は、追加場所を前の方に変更してみると解決することがわかりました。
はまさん、貴重な情報をありがとうございます。

以上、STINGER PLUS+ のフッターのキャプションを非表示にしてメニューカラーの変更をするカスタマイズ方法のご紹介でした。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS・STINGER8・AFFINGER4 カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved.