Kanamii

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

kanamii-2219-1

スポンサーリンク

STINGERカスタマイズ

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

2016/09/30

新たにリリースされた「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

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

ありがとうございます。

スポンサーリンク

事前準備

全てのテーマファイル(functions.phpを除く)の編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

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

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

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

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

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

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

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

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

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

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

更新後、WordPressダッシュボード→外観→「ウィジェット」に、フッター用の3つのウィジェットが追加されていればOKです。

kanamii-2219-4

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

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

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

当ブログの場合、STINGER管理で「ヘッダー上部にフッター用リンクを追加する」にチェックを入れているので、フッターに表示されるメニューのみを非表示にしています。

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

さらに、フッターのキャプション(サイト説明文)を非表示にする方法と余白の調整方法は、下記ページで説明しています。

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

コードを追加

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

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

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

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

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

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

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

※Googleフォント"Josefin Sans"の部分は、STINGER管理→「英数字のGoogleフォント」でお好みで選択したフォント名、または、お好きなフォント名に変更可能です。

kanamii-590-4

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

スマホ表示用のCSSコード

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

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

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

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

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

パソコンでは、3カラム(横並び)で表示されます。
コードを追加する前に、合計で1060pxになるように、各ウィジェットの横幅と余白を決めておきます。

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

フッター全体のCSSコード

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

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

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

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

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

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

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

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

続いて、下記のコードを追加していきます。
「フッター左」「フッター中央」「フッター右」の横幅と余白は、当ブログでの設定となっています。
先に決めておいた数値に変更してくださいね。

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

ここまでで、STINGER PLUSへのフッター追加は完了です。
お疲れさまでした。

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

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

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

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

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

関連記事

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

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

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

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

▶STINGER PLUS+ カスタマイズ全記事一覧へ

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

Twitter で

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

-STINGERカスタマイズ