Lognote

ネット集客に強い整体院サイトを制作

footer-3column-customize-thumbnail

ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!

公開日:2016-04-12
最終更新日:

Pocket

STINGER7のフッターをもう少し華やかにしたい!

そう思ったことはないでしょうか?

STINGER7のフッターはデフォルトでこのようになっていますが、これだとちょっと物足りないですよね。

footer-3column-customize-01

そこで今回は、フッターに3カラムウィジェットを設置し、コンテンツを増やして見栄えをよくする方法を紹介します。

参考にしたのはこちらのサイトです。STINGER6でのカスタマイズの紹介でしたが、STINGER7でも大丈夫でした。

最終完成イメージ

footer-3column-customize-02

最終的にはこのようになります。こちらのウィジェットは例ですので、中身はみなさんの好きなように入れ替えられます。

footer-3column-customize-03

スマホにも対応しています。

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • 3カラムのウィジェット設置
  • 背景を変えるためのブロック追加
  • CSSで整える

3カラムのウィジェット設置

まず、3カラム用のウィジェットを作成します。

以下のコードをfunctions.phpに追加してください。

//フッターウィジェット追加
 register_sidebar( array(
 'id' => 'footer-left',
 'name' => 'フッター左',
 'before_widget' => '<ul><li>',
 'after_widget' => '</li></ul>',
 'before_title' => '<h4 class="menu_underh2">',
 'after_title' => '</h4>',
 ));
 register_sidebar( array(
 'id' => 'footer-center',
 'name' => 'フッター中央',
 'before_widget' => '<ul><li>',
 'after_widget' => '</li></ul>',
 'before_title' => '<h4 class="menu_underh2">',
 'after_title' => '</h4>',
 ));
 register_sidebar( array(
 'id' => 'footer-right',
 'name' => 'フッター右',
 'before_widget' => '<ul><li>',
 'after_widget' => '</li></ul>',
 'before_title' => '<h4 class="menu_underh2">',
 'after_title' => '</h4>',
 ));

すると、このような3つのウィジェットが追加されます。

footer-3column-customize-04

背景を変えるためのブロック追加

次に実際にウィジェットを表示させるエリアを作ります。

footer.phpの以下の部分を探してください。

<footer id="footer">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>
<h3>
<?php if ( is_home() or is_front_page() ) { ?>
	<!-- ロゴ又はブログ名 -->
	<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
		<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
	<?php else: //ロゴ画像が無い時 ?>
		<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
	<?php endif; ?>
<?php } else { ?>
	<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" ></a>
	<?php else: //ロゴ画像が無い時 ?>
		<?php st_wp_title( '' ); ?>
	<?php endif; ?>
<?php } ?>
</h3>

	<p>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
	</p>
		<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>
	<p class="copy">Copyright&copy;
		<?php bloginfo( 'name' ); ?>
		,
		<?php echo date( 'Y' ); ?>
		All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper -->

一番下の#wrapperの閉めdivを一番上に移動し、その下に新しく#foot-wrapperのid属性を追加します。「ページトップへ戻る」で閉めてください。

真ん中あたりのCopyrightの部分も少し手を加えて、2016をブログタイトルの前にくるようにしました。

</div>
<!-- /#wrapper -->
<div id="foot-wrapper">
<footer id="footer">
<!–フッターウィジェット–>
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!–/フッターウィジェット–>
<div class="clear">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>
		<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>
	<p class="copy">Copyright&copy;
	    <?php echo date( 'Y' ); ?>
		<?php bloginfo( 'name' ); ?>
		All Rights Reserved.</p>
</div>
</footer>
<!-- ページトップへ戻る -->
<div id="page-top"><a href="header" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
</div>
<!-- /#foot-wrapper -->

CSSで整える

最後に見出しや文字サイズ、背景画像のカスタマイズ用CSSを記述します。

/*--------------------------------------
フッター
--------------------------------------*/
#foot-wrapper {
  max-width: 100%;
  padding: 0 10px;
  margin: 0 auto;
  color: #fff;
  border-top: 1px solid #000;
  background-image: url("画像URL");
}
#foot-wrapper a {
  color: #fff;
}
footer {
  max-width: 1060px;
  margin: 0 auto;
}
footer textwidget p,
footer li {
  text-align: left;
}

/*--------------------------------------
フッターウィジェット
--------------------------------------*/
footer h4.menu_underh2 {
  border-left: 6px solid #0489B1;
  padding: 3px 0 3px 6px;
  margin-bottom: 10px;
  text-align: left;
}
footer>aside ul {
  float:left;
  width: 320px;
  padding: 10px 0;
  list-style-type:none;
}
.clear {
  clear:both; /*floatの解除*/
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {
/*--------------------------------------
フッターウィジェット
--------------------------------------*/
footer h4.menu_underh2 {
  border-left: 6px solid #0489B1;
  padding: 3px 0 3px 6px;
  margin-bottom: 10px;
  text-align: left;
}
footer>aside ul {
  float:left;
  width: 320px;
  padding: 10px;
  list-style-type:none;
}
.clear {
  clear:both; /*floatの解除*/
}
}

上の2つが共通CSS、下はPC用です。PC用は必ずmedia Queriesの中に入れてください。

無料素材・デザイン参考サイト

壁紙や見出しのデザインは以下のサイトからお借りしています。

背景画像素材

背景画像は#foot-wrapperで指定します。

素材はこちらのサイトがオススメです。

見出しデザイン

フッターの見出しはこちらのサイトを参考に変更しました。見出しのデザインや文字サイズ、色などは好きに変えて遊んでみてください。

以上、「ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!」という記事をお届けしました。

-STINGER
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこ …

stinger8-404-and-search-customize-thumbnail

STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた

意外とカスタマイズで見落としがちな検索結果ページと404エラーページ。 この二つのページはあまり人の目に触れる …

device-thumbnail-size-thumbnail

STINGER8の一覧サムネイルサイズをデバイス毎に変更する方法

STINGER8の記事一覧のサムネイルサイズは、デフォルトだと150pxの画像を100px四方の正方形に縮小して表...

stinger8-pager-css-customize-thumbnail

STINGER8のページネーションを少しおしゃれにするCSSデザイン例

WordPressの記事が増えてくると、ページネーションのデザインも気になってきます。STINGER8のページネー...

page-top-button-link-change-thumbnail

STINGER7の「ページトップへ戻るボタン」が一番上まで戻らなくなったときの修正方法

ヘッダーの横幅をこちらのサイトを参考に画面いっぱいに広げるカスタマイズをしました。  WebCraf …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい