ブログのちから

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

Stinger3のフッター部分をカスタマイズしてみたよ。

      2014/07/25

foot

このブログで利用させて頂いている、Stinger3というテンプレート。

このテンプレートはシンプルなデザインが魅力で、下手にイジると逆に、まとまりが無くなったりします。

 

が、今回は、あえてフッター部分をカスタマイズしてみました。

 

SPONSERD LINK

なんでカスタマイズしたの?

カスタマイズした理由は、

Stinger3はシンプルなのが魅力なんですが、フッター部分だけは、逆に、あっさりし過ぎるなぁ~と思ってたからです。

 

それと、色々なStingerブログを見ていると、フッター部分がおしゃれなブログが多いですからね。^^

そういうサイトを見ると、自分でもやりたくなってしまうのが人情というものです。

 

カスタマイズ方法

カスタマイズ方法は、ザックリ書くと、

  • フッターにウィジェットエリアを追加
  • ウィジェット表示位置の指定
  • フッターデザインのCSS設定

です。

 

詳細は、参考にさせて頂いた下記ブログを参照下さい。www
(僕が説明記事を書くより、解りやすいハズなので。。。)

 

おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP
STINGER3のフッターを3カラムにカスタマイズしてみた

 

で、完成したフッターがこれ。

footer_customize

カスタマイズ前に比べて、少し引き締まった印象になりました。

 

ついでに背景にグラデーションもかけてみた。

上記を参考にすれば、フッターのカスタマイズは簡単に実現できます。

が、背景が単色だとノッペリした印象で、少し寂しい感じ。

 

という訳で、背景色にグラデーションもかけてみました。

footer_customize2

といっても下記サイトのジェネレーターで生成しただけですが。。。

CSS3 Generator – By Peter Funk & Eric Hoffman

 

上記2ブログを参考にしていれば、フッターの背景色のコードは下記の様になっていると思います。

#footer {
background-color: #4169e1;
}

ここのカッコの間に生成されたコードをコピペすれば完成です。

ちなみに、グラデーションの開始色、終了色については、下記サイトの色見本を元に決めました。

WEB色見本 原色大辞典 – HTML Color Names

 

 

このように、カスタマイズしたくなった時に、参考になる情報が多いのもStingerの魅力の一つですね。^^

SPONSERD LINK

 - stinger3 ,

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

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

  関連記事