ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

【Stinger5カスタマイズ】レスポンシブデザインに合せた変更にチャレンジ!フッターカスタマイズのついでにね。

      2014/12/20

過去記事を見て頂ければお解り頂ける通り、このブログにも、先日から少しづつStinger3で適用していたデザインカスタマイズをStinger5に適用し直しています。

ashiato

で、今回対応したのは、フッターデザイン。
しかもマジメに子テーマで対応していますw

なお、Stinger3のフッターカスタマイズについては下記を参照下さい。

参考:フッターのカスタマイズついでにソーシャルアイコンを追加してみた。(Stinger3版)

 

SPONSERD LINK

対応したポイント

今日のポイントは、

  1. フッターを3分割し、ウィジェットを3つ追加したい
  2. フッターの背景はPCだけに付けたい(レスポンシブ対応に踏み込む!)

の2点です。

といっても、1番については、先日の記事「Stinger5カスタマイズ;functions.phpのカスタマイズを子テーマ側で実施する方法」の応用で実現できてしまいますが。^^

 

まずは、ウィジェットの追加

※ここからのサンプルコードは、他にウィジェット追加などをしていない前提で記載していますので、既にカスタマイズしている場合は、それに合せて調整して下さい。

まずはウィジェットの追加から行ってみましょう。

今回は「フッターを3分割し、ウィジェットを3つ追加したい」ので、

子テーマ側のfunction.phpに、

の部分をコピーして”!dynamic_sidebar( ) ”の数字を+3します。

次に、ウィジェットを必要な分だけ追加するようにします。

具体的には

を足せばOKですね。

もう少しシンプルに

でもOKです。

この場合、ウィジェットには、画像の様にフッター1、フッター2、フッター3が追加されます。
footer1-3

後は、ウィジェットの読込順序がおかしくならないように、おまじないを追記してあげればOKです。

 

最終的なfunction.phpのコードは

となります。

次はフッターへのウィジェットの追加

※footer.phpを修正する場合は、子テーマにfooter.phpをコピーしておく事をおススメします。

ポイントは「ブロックを追加して、その中を3分割する」です。

なお、追加コードについては、Stinger3の時とほぼ同じなので、参考リンクを掲載しておきます。
おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP
STINGER3のフッターを3カラムにカスタマイズしてみた

最終的に「<footer id=”footer”>」の直下に、下記のコードを追加しました。

 

最後にCSSの調整を

最後にデザインを良い感じにするためにCSSを調整しますが、デザインについてはお好みで~というところですね。^^

今回のポイントは「フッターの背景はPCだけに付けたい」の実現でしたね。

Stinger5は、レスポンシブデザインに対応されましたので、どのコードがどのサイズに該当しているかを見極めてコードを記述する必要があります。

といっても、style.cssの中から下記のコードを見つけてあげれば良いだけです。

どのコードの範囲が、どのディスプレーサイズに該当しているかについては、下記の記事が解りやすいので参考にして下さい。

参照:Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

PCにのみに反映させる場合には、下記のコードの間に記述すれば良さそうです。

最もシンプルに対応するなら、こんな感じですね。

※最後のカッコを忘れないようにして下さい。w

結果、こうなります。
(画像では、解りやすいようにウィジェットの追加は端折ってますw)

PC:

PC版フッター

スマホ:

スマホ版この様にPC版にのみ背景色が付加されました。

 

後は、このサイトの場合、グラデーションを入れたりしていますが、基本はこんな感じでレスポンシブデザインに合せたカスタマイズが可能です。

 

ポイントは、ディスプレイサイズごとにデザインを分岐させるコードの見極めだけですね。

 

 

レスポンシブデザイン対応も、仕組さえ解ってしまえば簡単ですね。

以上、参考になれば幸いです。^^

footstamp

SPONSERD LINK

 - stinger5 , ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 470 follow us in feedly
SPONSERD LINK

  関連記事