本ページはプロモーションが含まれています

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

foot

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

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

 

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

 

スポンサーリンク

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

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

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の魅力の一つですね。^^

タイトルとURLをコピーしました