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

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【STINGER PLUS】3カラムのフッターを追加する方法(背景色指定or背景画像使用)

投稿日:2016年7月5日 更新日:

AFFINGER4でのカスタマイズ方法を追加しました。
AFFINGER4のver20170227へのアップデートでのウィジェットエリア追加に対応してfunctions.phpとfooter.phpに追加するコードの修正を行いました。(STINGER PLUSのコード変更はありません)

新たにリリースされた「AFFINGER4」。サンプルサイトをご覧になりましたか?

▶AFFINGER4 sample1 女性向けの柔らかいデザイン

kanamii-2219-2-2

可愛い・・♪

夢が膨らむ素敵なテーマですよね。
AFFINGER4では、サンプルサイトのように見出しの背景に画像が管理画面で簡単に設定できるようになっています。

「そういえばSTINGER3のときに見出しのカスタマイズやったなぁ♪」

ふと、そんなことを思い出し、古い記憶を呼び戻しながらSTINGER PLUSの見出しのカスタマイズをしてみることに。

そしたらね。

・・楽しくなっちゃった!(笑)

さらに、当時挑戦したフッター追加のカスタマイズもSTINGER PLUSに応用してみました。
なんとか形になったので、まずはそちらのカスタマイズ方法からご紹介したいと思います。

テーマの機能そのものを自分で変えることは難しくても、「見た目」を変えることは自由自在。
それもまた、WordPressの楽しさのひとつですね。

今回追加したのは、STINGER PLUS標準の2カラムのフッターとは別の、PC表示だけに適用される下記のような3カラムのフッター。
スマホとタブレットではサイドバーと同じスタイルで最下部に表示されます。

kanamii-2219-3-2

STINGER3当時、そして今回のカスタマイズのコード作成にあたり、下記ページを参考にさせていただきました。
▶おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!- Naifix

フッターのパターン背景画像は、下記サイトより素材をお借りしています。
▶フリー素材*ヒバナ *  *

ありがとうございます。

スポンサーリンク

事前準備

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

フッターの背景に背景色を指定する方法と背景画像を使用する方法をそれぞれ説明していきます。

まず、フッターに背景色を指定する場合は、事前準備としてお好きなカラーコードをメモ帳に準備しておきます。
背景に画像を使用する場合は、背景画像をFTPで子テーマ内の「images」フォルダへアップロード→画像のパスをメモ帳に準備しておいてください。
(当ブログでは、パターン背景画像+ハート画像の2種類の画像を使用)

もしも、FTPでのアップロードの方法がわからない場合は、WordPressダッシュボード→メディア→「新規追加」でアップロードしてもOKです。
その場合は、http://で始まる画像URLをコピーしておいてくださいね。

「よぉし!これを機会にFTP使ってみるよ~♪」というチャレンジャーの方は(笑)下記ページをご参照ください。

WordPressのバックアップ① ~FFFTP(FTPS対応版)のインストールと接続設定・基本操作方法~ - ゼロからのWordPress入門【16】

AFFINGER4の場合

WordPressダッシュボード→外観→カスタマイズ→基本エリア設定→「フッターエリア」にて、背景色またはフッター画像を設定されている場合は必ず削除(クリア)してください。
カスタマイザーでの設定を利用することもできますが、説明がややこしくなってしまいますので、style.cssに直接コードを追加するカスタマイズ方法をお伝えしていきます。

設定していた背景色を使う場合は、削除(クリア)する前にカラーコードをメモ帳にコピーしておいてください。
また、メディアに追加されているフッター画像もそのまま使うことができます。
その場合は、WordPressダッシュボード→メディア→「ライブラリ」を開き、http://で始まる画像URLをメモ帳にコピーしておいてくださいね。

kanamii-2219-129

3つのウィジェットを追加

今回のカスタマイズは、functions.phpに限り、親テーマの編集が必要となります。重ねてのお願いとなりますが、小さな記述ミスでもエラーになりますので、作業の前には必ずバックアップをとり、コードの取り扱いには十分ご注意ください。
また、追加したコードはテーマのアップデートを行った際にリセットされてしまいますので、その場合はfunctions.phpのみ再度編集作業が必要となります。

STINGER PLUSの場合

WordPressダッシュボード→外観→テーマ→テーマの編集→親テーマ(STINGERPLUS)の「functions.php」を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「トップページ下部ウイジェット」と入力してマークされる部分の下記コードを探してください。

上記コードのすぐ下に、次のコードを追加します。

AFFINGER4の場合

WordPressダッシュボード→外観→テーマ→テーマの編集→親テーマ(AFFINGER4)の「functions.php」を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「sidebar-25」と入力してマークされる部分の下記コードを探してください。

上記コードのすぐ下に、次のコードを追加します。

更新後、WordPressダッシュボード→外観→「ウィジェット」に、フッター用の3つのウィジェットが追加されていればOKです。
※表示確認ができるようにウィジェット内に表示したい項目を追加しておいてくださいね。

kanamii-2219-4

アップデート時に再びコードの追加を行った場合、あらかじめウィジェット内に入れていた項目が、他のウィジェット内や画面左下の「使用停止中のサイドバー」に移動してしまいますのでご確認ください。

ウィジェットの追加位置をフッターに指定

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

フッター用リンクを非表示に

当ブログの場合、管理画面で「ヘッダー上部にフッター用リンクを追加する」にチェックを入れているので、フッターに表示されるメニューのみを非表示にしています。(どちらも非表示にしたい場合は管理画面で設定可能)

最上部にある下記コード内の <?php の後ろに //(半角)を入力してコメントアウトします。

さらに、フッターのキャプション(サイト説明文)を非表示にする方法は、下記ページで説明しています。
もちろんどちらも表示したままでも問題ありません。こちらのカスタマイズは必要に応じて任意で行ってくださいね。

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

コードを追加

続いて、上記コードのすぐ上に次のコードを追加してください。

STINGER PLUSの場合

AFFINGER4の場合

ここまでで、追加した3つのウィジェットがフッターに縦並びで表示されるようになります。

フッターウィジェットのスタイルを指定

最後に、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に、フッターに追加したウィジェットの見た目を指定するコードを順に追加していきます。

コードの内容を知りたい方へ向けて、少しずつ解説を入れながらカスタマイズ方法をご紹介しています。
この先の手順だけ見ていただくと、難しそうで「うわぁーーー」と感じてしまうかもしれませんが(笑)、上から順にコードをコピーペーストするだけで編集箇所は数か所だけです。
安心して挑戦してみてくださいね。頑張りましょう♪

子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。

スマホ・タブレット・パソコン共通のCSSコード

STINGER PLUSの場合

  • リストマークを非表示に指定
  • 見出しの文字にGoogleフォントと上下の余白を指定

AFFINGER4の場合

  • リストマークを非表示に指定・左端の余白を調整
  • リスト内のリンク文字にGoogleフォントとカラーを指定(カラーコード#000は変更可能)
  • 見出しの文字にGoogleフォントと上下の余白、カラーを指定(カラーコード#ff6893は、お好きなカラーコードに書き換えてください)
  • 見出しの文字サイズと行の高さを指定(数値はお好みで変更可能)

※Googleフォント"Josefin Sans"の部分は、STINGER管理→「英数字のGoogleフォント」でお好みで選択したフォント名、または、お好きなフォント名に変更可能です。
Googleフォントを利用しない場合は、下記コードを削除してくださいね。

kanamii-590-4

フッターウィジェットに追加した項目には、あらかじめ設定されているフッターのスタイルが適用されます。
当ブログでは上記コードの追加だけしか行っていませんが、項目によってはそれぞれスタイルの指定が必要となる場合があります。

スマホ表示用のCSSコード

スマホでは縦1列で表示されます。

  • フッターウィジェットの要素全体を左揃えにして下の余白を指定
  • 「フッター左」の下の余白を指定
  • 「フッター中央」の下の余白を指定

タブレット表示用のCSSコード

STINGER標準の条件分岐によって、左右の余白がパソコン仕様になってしまうので、スマホとは別に左右の余白を20px追加したタブレット表示用のコードも追加します。
見た目はスマホ同様、縦1列に表示されます。

パソコン表示用のCSSコード

パソコンでは、3カラム(横並び)で表示されるようにカスタマイズしていきます。

フッター全体のCSSコード

3種類のコードを用意しました。
お好みで1つ選んで編集後、style.cssに追加してください。
全体の横幅が1060pxですので、デバイスの幅の最小値は1100pxで指定しています。

1.背景色を指定する場合

STINGER PLUSへの追加コード

  • 全体の横幅を指定
  • 上下の余白を指定
  • 背景色を指定:#**** の部分はお好きなカラーコードに変更してください。
AFFINGER4への追加コード

※カスタマイザーで設定可能なデフォルト機能が反映されるので、指定先の変更と余白の調整をしています。
#**** の部分はお好きなカラーコードに変更してください。

2.パターン背景画像を使用する場合

STINGER PLUSへの追加コード

  • 全体の横幅を指定
  • 上下の余白を指定
  • 背景画像(URL、繰り返しパターン)を指定:【パターン背景画像のパスまたはURL】の部分は、あらかじめメモ帳にコピーしておいた画像のパスまたはURLに変更してください。
AFFINGER4への追加コード

※カスタマイザーで設定可能なデフォルト機能が反映されるので、指定先の変更と余白の調整をしています。
【パターン背景画像のパスまたはURL】の部分は、あらかじめメモ帳にコピーしておいた画像のパスまたはURLに変更してください。

3.パターン背景画像にプラスして2つの画像を使用する場合

STINGER PLUSへの追加コード

  • 全体の横幅を指定
  • 上下の余白を指定
  • 背景画像(URL、繰り返しパターン)を指定:【画像のパスまたはURL】【パターン背景画像のパスまたはURL】の部分は、あらかじめメモ帳にコピーしておいた画像のパスまたはURLにそれぞれ変更してください。
  • 背景画像の位置(background-position)は、右中央(right center)で指定しています。
    右下に表示したい場合は、right bottomで。
    お好み応じてpxまたは%にて表示位置の指定も可能です。
    例:左から700px、上から200pxの場合
AFFINGER4への追加コード

※カスタマイザーで設定可能なデフォルト機能が反映されるので、指定先の変更と余白の調整をしています。
【画像のパスまたはURL】【パターン背景画像のパスまたはURL】の部分は、あらかじめメモ帳にコピーしておいた画像のパスまたはURLにそれぞれ変更してください。

要素全体と各ウィジェットのCSSコード

続いて、下記のコードを追加していきます。
ここで最後です!
あと少し、頑張ってくださいね。

  • フッターウィジェットの要素全体を左揃えにして左右と下の余白を指定
  • 「フッター左」を左寄せにして横幅と右の余白を指定
  • 「フッター中央」を左寄せにして横幅と右の余白を指定
  • 「フッター右」を左寄せにして余白をゼロに指定

「フッター左」「フッター中央」「フッター右」の横幅と余白は、当ブログでの設定となっています。
横幅と余白は、お好みで変更可能ですので例をあげておきます。
合計で1060pxになるように計算するのがポイントです。
※AFFINGER管理で横幅を変更している場合は、その幅に合わせて計算してくださいね。

  • 当ブログの場合
    要素全体の左右の余白(35+35)+
    フッター左【footer_l】(350)+右側余白(40)+
    フッター中央【footer_c】(300)+右側余白(40)+
    フッター右【footer_r】(260)=1060px
  • 3つのウィジェットを均等に配置する場合の例:1
    要素全体の左右の余白(35+35)+
    フッター左【footer_l】(310)+右側余白(30)+
    フッター中央【footer_c】(310)+右側余白(30)+
    フッター右【footer_r】(310)=1060px
  • 3つのウィジェットを均等に配置する場合の例:2
    要素全体の左右の余白(35+35)+
    フッター左【footer_l】(300)+右側余白(45)+
    フッター中央【footer_c】(300)+右側余白(45)+
    フッター右【footer_r】(300)=1060px

ここまでで、3カラムのフッター追加の作業は全て完了です。
お疲れさまでした。

各端末での表示確認をパソコン(Google Chrome)で行う方法は下記ページ内で説明しています。

▶パソコンでレスポンシブサイトのスマホ表示を確認する方法

フッターウィジェットへの項目追加の際の注意事項

注意事項として、Facebookのページプラグインを300px以上の大きさでフッターウィジェットに表示する場合は、スマホ表示での対策として、作成ページでの「plugin containerの幅に合わせる」という項目にチェックを入れるようにしてくださいね。

Twitterの埋め込みタイムラインは、自動的にコンテンツ幅に合わせて表示されますので特別な設定は必要ありません。

関連記事

サイト名でのFacebookページ作成とページプラグイン導入方法 - ゼロからのWordPress入門【19】

サイドバーへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法(変更後)- ゼロからのWordPress入門【20】

以上、STINGER PLUS・AFFINGER4 に3カラムのフッターを追加する方法をご紹介しました。

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

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

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

Twitter で

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

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved.