stinger5フッターをカスタマイズ、3分割して足元をおしゃれに!
フッター部分を3カラム(分割)にする方法と、管理画面の「ウィジェット」から設定や表示内容を便利で管理ができるカスタマイズです。
3分割にする事によってカテゴリー別に分けたり、訳ありでサイドバーに表示していないアイテム等をフッターに置くのもいいと思う。
フッターをおしゃれにすると、ブログ全体が引き締まるように感じられ、読者のリピーターが増える要因に貢献できるので必要アイテムです。
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに!!!
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いいたします。
ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。
フッターのカスタマイズ概要
1.フッターの背景をパソコンだけ表示させる
2.フッターの領域を3分割に分けて、ウィジェットを3つ追加
1.フッターの背景をパソコンだけ表示させる
ポイントは「フッターの背景をPCだけ表示させる」事なので
Stinger5は、レスポンシブデザインに対応されましたので、どのコードがどのサイズに該当しているかを探して、コードを記述する必要があります。
ディスプレイサイズごとにデザインを分岐させるコードの見極めてそこに各コード記述するのです。
style.cssの中から下記のコードを見つけます。
[css]
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {
・
・
・
.pagination .current {
padding: 6px 9px 5px 9px;
color: #fff;
background-color: #CCCCCC;
}
/*– ここまで –*/
}
[/css]
上記コード内の「/*– ここまで –*/」の下に下記コードを追記します。
そうする事で後から追記したコードがわかると思う。
[css]
#footer {
background-color: #4169e1;
}
[/css]
私の場合子テーマを作成しているので、子テーマのスタイルシート(style.css)内に以下を記述した。
ついでに背景色をグラデーションにしてみた。
[css]
@media only screen and (min-width: 780px) {
/*—————————–
フッターの背景をPCのみ変更
——————————*/
#footer {
background-color: #4169e1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#000080’);
/* IE 5.5~7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#000080’)”;
/* IE 8,9 */
background-image: -moz-linear-gradient(top, #4169e1, #000080);/* mozila(Firefox)用 */
background-image: -ms-linear-gradient(top, #4169e1, #000080);/* IE 10 */
background-image: -o-linear-gradient(top, #4169e1, #000080);/* 旧opera用 */
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#000080));/* webkit用 */
background-image: -webkit-linear-gradient(top, #4169e1, #000080);/* webkit用 */
background-image: linear-gradient(top, #4169e1, #000080);/* FX 3,4 GC 2~5 S 4,5*/
}
}
[/css]
フッターの背景色が変わりました。
なお、グラデーションはすべてのブラウザには対応していません。もしかしたらあなたが観られているブラウザでは、グラデーションになっていないかもしれません。
2.フッターの領域を3分割に分けて、ウィジェットを3つ追加
ウィジェットの追加
グレーボックス
- ここからのサンプルコードは、他にウィジェット追加などをしていない前提で紹介しています。既にカスタマイズしている場合は、それに合せて調整する必要があります。
という事でウィジェットの追加から行ってみます。
function.phpに、「if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(4) )」の記述コードがあるので探します。
もし見つけるのが難しい場合は、「ウイジェット」もしくは「dynamic_sidebar」でソース内を検索してみてください。
[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(4) )
register_sidebars(1,
array(
‘name’=>’サイドバーウイジェット’,
‘before_widget’ => ‘
- ‘,
‘after_widget’ => ‘
‘,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’スクロール広告用’,
‘description’ => ‘「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分’,
‘before_widget’ => ‘
- ‘,
‘after_widget’ => ‘
‘,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’Googleアドセンス用336px’,
‘description’ => ‘「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’Googleアドセンスのスマホ用300px’,
‘description’ => ‘「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
[/php]
このコードの2行目にある「!dynamic_sidebar(4) )」の「(4)」をプラス3をして「(7)」に変更する。
次に以下のコードを追記する。
[php]
register_sidebars(1,
array(
‘name’=>’フッター左’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’フッター中’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
register_sidebars(1,
array(
‘name’=>’フッター右’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
[/php]
私の場合子テーマに「function.php」を作成しているので、
[php]
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(7) )
if ( !function_exists(‘after_all’) ):
function after_all() {
register_sidebars(3,
array(
‘name’=>’フッター %d’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘
‘, ‘after_title’ => ‘
‘,
));
}
endif;
// 親テーマの後に実行
add_action( ‘after_setup_theme’, ‘after_all’ );
[/php]
注意 !!
すべての「functions.php」が記述出来るわけではありません。
親テーマにfunction_exists()があれば出来るようです。
問題となるのは、読込順序なので、最後に動作するように、ちょっとした、おまじないを書いてあげればOKのようです。
参考サイト
フッターへのウィジェットの追加
ブロックを追加して、その中を3分割するコードをフッターに追記する。
footer.phpを開きます。
[php]
[/php]
1行目の「<footer id=”footer”>」の下の行に以下のコードを追記する。
[php]
ここはフッター左側
ここはフッター中側
ここはフッター右側
[/php]
「ファイルを更新」ボタンをクリックする。
スタイルシート(style.css)で3分割した横幅調整と装飾
以下のコードを「1.フッターの背景をパソコンだけ表示させる」で紹介した
[css]
#footer {
background-color: #4169e1;
}
[/css]
の下に「フッターカスタマイズ」のコードを記述する。
私の場合子テーマを作成しているので、子テーマのスタイルシート(style.css)内の
[css]
@media only screen and (min-width: 780px) {
/*—————————–
フッターの背景をPCのみ変更
——————————*/
#footer {
background-color: #4169e1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#000080’);
/* IE 5.5~7 */
・
・
・
background-image: linear-gradient(top, #4169e1, #000080);/* FX 3,4 GC 2~5 S 4,5*/
}
}
[/css]
上記コード内の下の方にある「 } 」と「 } 」の間に、下記コード「フッターカスタマイズ」を追記した。
[css]
/*———————————
フッターカスタマイズ
——————————–*/
#footer_w {
width: 980px;
margin: 20px auto;
text-align: left;
}
.footer_l {
float: left;
width: 300px;
margin: 0 0 20px 20px;
padding: 0;
}
.footer_c {
float: left;
width: 300px;
margin: 0 0 20px 20px;
}
.footer_r {
float: left;
width: 300px;
margin: 0 0 20px 20px;
}
#footer_w h4 {
font-size: 120%;
text-align: center;
color: #fff;
border-bottom: 3px dotted #f00;/*– 各見出しの下線を点線と色を指定 –*/
margin: 10px 0 30px 0;
padding: 0 0 3px 3px;
}
#footer_w a {
color: #fff;
}
#footer_w a:hover {
color: #629FBA;
}
[/css]
「footer_l」の領域が「フッター左」・「footer_c」の領域が「フッター中央」・「footer_r」の領域が「フッター右」の各部分を指定している。
フッターの各領域の横幅をは300pxにした。今後、記事の下にグーグルアドセンスを横に2つ並べる等のブログ全体の横幅を変更するときは、ここも変更しないと崩れる場合がある。
marginとpadding(余白)数値は各領域の左側に20px余白をとった。
ここもブラウザによっては位置がずれたり、崩れたりするので変更の必要がある。(以前stenger3の時そうであった)
まとめ
最終的に子テーマに記述したコードは以下のようになる。
[css]
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {
/*—————————–
フッターの背景をPCのみ変更
——————————*/
#footer {
background-color: #4169e1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#000080’);
/* IE 5.5~7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#000080’)”;
/* IE 8,9 */
background-image: -moz-linear-gradient(top, #4169e1, #000080);/* mozila(Firefox)用 */
background-image: -ms-linear-gradient(top, #4169e1, #000080);/* IE 10 */
background-image: -o-linear-gradient(top, #4169e1, #000080);/* 旧opera用 */
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#000080));/* webkit用 */
background-image: -webkit-linear-gradient(top, #4169e1, #000080);/* webkit用 */
background-image: linear-gradient(top, #4169e1, #000080);/* FX 3,4 GC 2~5 S 4,5*/
}
/*———————————
フッターカスタマイズ
——————————–*/
#footer_w {
width: 980px;
margin: 20px auto;
text-align: left;
}
.footer_l {
float: left;
width: 300px;
margin: 0 0 20px 20px;
padding: 0;
}
.footer_c {
float: left;
width: 300px;
margin: 0 0 20px 20px;
}
.footer_r {
float: left;
width: 300px;
margin: 0 0 20px 20px;
}
#footer_w h4 {
font-size: 120%;
text-align: center;
color: #fff;
border-bottom: 3px dotted #f00;/*– 各見出しの下線を点線と色を指定 –*/
margin: 10px 0 30px 0;
padding: 0 0 3px 3px;
}
#footer_w a {
color: #fff;
}
#footer_w a:hover {
color: #629FBA;
}
}
[/css]
カスタマイズ後
背景色をグラデーションにするところでハマッタ。
現在私のブラウザは、グーグルクロームでカスタマイズしてIE11での表示を確認してましたが、会社のPC(IE8)で確認したらグラデーションになっていなかった。
いちようIE8用のコードも追記してグラデーションになったのを確認はしてるが、すべてのブラウザがグラデーションに対応したコードを記述していません。
今後すべてのブラウザで対応出来るようしてもらいたいですね!!!
コメント
[…] ■stinger5フッターをカスタマイズ、3分割して足元をおしゃれに! […]
[…] […]
[…] stinger5フッターをカスタマイズ、3分割して足元をおしゃれに! […]