2019/05/20139 Shares

おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!

足元

おしゃれは足元から! ということで、Stinger3フッター部分のカスタマイズ をしてみましょう。すでに当ブログでもカスタマイズ適用済みとなっておりますので、よろしければぐわっとスクロールしてご覧ください。

追記現在はオリジナルテーマに変更しています。

最下部のフッターですが、意外と読まれる部分。でも、Stingerを利用している方はあまり力を入れていない部分かなと思います。

今回は左右2段組みとし、ただfooter.phpをいじるだけではなくウィジェットにも対応しました。変更箇所はコピペできるようにしていますが、解説を交えて進めていきます。

フッター部分を改造して見映えをかっこよくしよう!

まず、こちらはお馴染みのStinger3デフォルト画面。

stinger3デフォルト画面

フッター部分はこのようになっています。

stinger3デフォルトのフッター部分

最上部から最下部まで同じ背景色だとちょっと締まらない感じ。これをこのように改造してみます。

stinger3フッターカスタマイズ後

フッター部分だけ濃いめの色を使うとぐっと引き締まりますね。現状のまま色だけ変えたい場合はCSSで設定するだけでOK。もともとのCSSに一行追記してください。

#footer {color: #444;}

あまりに濃い背景色を使う場合は、フッターに表示されているテキストを白系に変更したほうが良いです。CSSであらかじめ設定されている部分を抜粋しておきます(記述場所は分散しています)。

/*h3タグ色*/
h3 a {
	color: #333;
	text-decoration: none;
}
h3 a:hover {
	color: #C03;
}
/*h4タグ色*/
#footer #footer-in h4 a {
	color: #666;
	text-decoration: none;
}
/*フッター文字色等*/
#footer-in {
	text-align: center;
	color: #CCC;
	padding: 20px;
}
/*Stingerへのリンク文字*/
#footer #footer-in .stinger a {
	color: #CCC;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
}
/*h4タグ*/
#footer #footer-in h4 {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 13px;
	font-weight: normal;
	color: #666;
	padding: 5px;
}

それでは、ウィジェットの設定から始めていきましょう。

フッターカスタマイズ全手順

追記一部修正しました(2014.05.05)

フッターでウィジェットを使えるようにする

まず、「フッター左」と「フッター右」のウィジェットエリアを作ります。

手を入れるのは『functions.php』。もとの内容は必ずバックアップしておいてください。カスタマイズに失敗するとブログが真っ白になる可能性もあります。。。

既に公開しているブログをいじるのではなく、カスタマイズ専用WordPressをPCにインストールするのがおすすめです。

参考bitnami:パソコンにWordPressをインストールする手順と使い方

Stingerでウィジェットを制御しているのは、この部分。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

サイドバーやアドセンス・追尾広告用に4つのウィジェットが組み込まれています。ここに新たにフッター専用のウィジェットを作成してみましょう。

最初に二行目の()内の数字を4から6に変更。

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )

つづいて、35行目の下に以下を追記します。

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

全体でこのようになればOKです。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

これで管理画面からウィジェットを設定できるようになりました。でも、まだブログに表示されません。

ウィジェットをどこに表示するか、という設定を行います。今度は『footer.php』をいじります。

ウィジェット表示位置を指定する

『footer.php』内に、以下のような記述があります。

<div id="footer">
  <div id="footer-in">
    <div id="gadf"> </div>
    <h3><a href="<?php echo home_url(); ?>/">
      <?php wp_title(''); ?>
      </a></h3>
    <h4><a href="<?php echo home_url(); ?>/">
      <?php bloginfo('description'); ?>
      </a></h4>
<!--著作権リンク-->
     <p class="stinger"><a href="http://stinger3.com">WordPress-Theme STINGER3</a></p>
    <p class="copy">Copyright&copy;
      <?php bloginfo('name');?>
      ,
      <?php the_date('Y');?>
      All Rights Reserved.</p>
  </div>
  <!-- /#footer-in --> 
</div>
<?php wp_footer(); ?>

フッター部分のコードですが、上記のどこにウィジェットを挿入するか決めます。

今回は、見出しタグブロック(h3とh4)と著作権リンクの間にしました。挿入するのはこちらのコード。

<div id="footer_w" class="clearfix">
  <div class="footer_l">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
    <p>ここはフッター左側</p>
      <?php endif; ?>
  </div>
  <div class="footer_r">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
    <p>ここはフッター右側</p>
      <?php endif; ?>
  </div>
</div>
<div class="clear"></div>

イメージはこんな感じです。

stingerフッターイメージ

ウィジェットのタイトルには<h5>タグを設定したので、フッターの見出しタグは<h3>→<h4>→<h5>と順序良く並ぶ形になります。

フッター部分は全体としてこのようになります。

<div id="footer">
  <div id="footer-in">
    <div id="gadf"> </div>
    <h3><a href="<?php echo home_url(); ?>/">
      <?php wp_title(''); ?>
      </a></h3>
    <h4><a href="<?php echo home_url(); ?>/">
      <?php bloginfo('description'); ?>
      </a></h4>
<div id="footer_w" class="clearfix">
  <div class="footer_l">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
    <p>ここはフッター左側</p>
      <?php endif; ?>
  </div>
  <div class="footer_r">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
    <p>ここはフッター右側</p>
      <?php endif; ?>
  </div>
</div>
<div class="clear"></div>
<!--著作権リンク-->
     <p class="stinger"><a href="http://stinger3.com">WordPress-Theme STINGER3</a></p>
    <p class="copy">Copyright&copy;
      <?php bloginfo('name');?>
      ,
      <?php the_date('Y');?>
      All Rights Reserved.</p>
  </div>
  <!-- /#footer-in -->
</div>
<?php wp_footer(); ?>

ここまできたら、あとはCSSで見映えを設定するだけです。

フッターデザインCSS設定(PC用)

PC用の表示は2段組のため、フロートで左右に配置します。最低限のコードがこちら。『style.css』の最下部にコピペしていただければ反映されます。

/*---------------------------------
フッター追記
--------------------------------*/
#footer {
	background-color: #444;
}

#footer_w {
	width: 986px;
	margin: 20px auto;
	text-align: left;
}
.footer_l {
	float: left;
	width: 336px;
	margin: 0 10px 20px 0;
	padding: 0;
}

.footer_r {
	float: left;
	width: 620px;
	margin: 0 0 20px 20px;
}

#footer_w h5 {
	font-size: 120%;
	color: #fff;
	border-bottom: 3px dotted #f00;
	margin: 0 0 20px 0;
	padding: 0 0 3px 3px;
}

#footer_w p {
	color: #fcfcfc;
}

本当に必要最低限の指定しかしていません。

「フッター左」はバナーを貼ることを想定し、336pxとしました。Stinger3の場合、すでにアドセンスが3個配置されています。この部分にGoogleアドセンスのレクタングル(大)を入れる場合は、既存のアドセンスをどこか消してください。規約違反になります。

リスト(<ul>や<ol>)を使う場合は別途設定してください。

フッターデザインCSS設定(スマホ用)

『smart.css』の設定はこのようにしました。

/*-----------------------------------
フッター追記smart
------------------------------------*/
#footer {
	background-color: #444;
}

#footer_w {
	width: 100%;
	margin: 20px auto;
	text-align: left;
}
.footer_l {
	color: #fcfcfc;
	width: 100%;
	margin: 0 auto 20px auto;
	padding: 0;
	text-align: center;
}

.footer_r {
	color: #fcfcfc;
	width: 90%;
	margin: 0 auto 20px auto;
	text-align: left;
}

#footer_w h5 {
	font-size: 100%;
	color: #fff;
	border-bottom: 3px dotted #f00;
	margin: 0 0 10px 0;
	padding: 0 0 3px 0;
}

#footer_w p {
	color: #fcfcfc;
}

スマホ版は、左右に分けていたdiv要素を上下に配置しています。

まとめ:フッターに何を書けばいいのか

Stinger3にオリジナルのフッターを設置する手順をまとめると、こうなります。

  • ウィジェットの設定をする
  • footer.php に追記する
  • CSSを調整する

あとは、フッターに書く内容を決めるだけですね。Stinger3は2カラムですから、サイドバーにたくさんパーツを置いてしまうと、メインコンテンツである本文より長くなってしまうことがあります。

広告、新着記事、カテゴリ、月別アーカイブ、カレンダー、タグ、管理人紹介、RSSボタン…となると、ごちゃごちゃして見づらいですよね。このうちいくつかを今日作ったフッターに持っていけば、ずいぶんスッキリするんじゃないでしょうか。

どのようなデザインにすれば良いか、何を書けば良いか迷った時はこちらを参考にすると良いでしょう。

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

知識のある方は、ぜひ3段組や4段組にチャレンジしてみてください。
ウィジェット作成に関する基礎知識はこちらが役立ちます。

WordPressのウィジェットを自作するためのTips

個性を活かした素敵なStingerブログになりますように!

それでは、また。