日本の最新ニュースや話題を届ける情報ステーション

ワードプレス(stinger・gush)や日本で話題になっているニュースを国内、国際、経済、エンタメ、スポーツおよびご当地情報を含めて配信しています

stinger5フッターをカスタマイズ、3分割して足元をおしゃれに!

   

stinger5

友だち追加


スポンサーリンク

stinger5フッターをカスタマイズ、3分割して足元をおしゃれに!

 

フッター部分を3カラム(分割)にする方法と、管理画面の「ウィジェット」から設定や表示内容を便利で管理ができるカスタマイズです。

3分割にする事によってカテゴリー別に分けたり、訳ありでサイドバーに表示していないアイテム等をフッターに置くのもいいと思う。

フッターをおしゃれにすると、ブログ全体が引き締まるように感じられ、読者のリピーターが増える要因に貢献できるので必要アイテムです。

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

フッターのカスタマイズ概要

 

1.フッターの背景をパソコンだけ表示させる

2.フッターの領域を3分割に分けて、ウィジェットを3つ追加

 

1.フッターの背景をパソコンだけ表示させる

 

ポイントは「フッターの背景をPCだけ表示させる」事なので

Stinger5は、レスポンシブデザインに対応されましたので、どのコードがどのサイズに該当しているかを探して、コードを記述する必要があります。

ディスプレイサイズごとにデザインを分岐させるコードの見極めてそこに各コード記述するのです。

style.cssの中から下記のコードを見つけます。

上記コード内の「/*– ここまで –*/」の下に下記コードを追記します。
そうする事で後から追記したコードがわかると思う。

 

私の場合子テーマを作成しているので、子テーマのスタイルシート(style.css)内に以下を記述した。

ついでに背景色をグラデーションにしてみた。

フッターの背景色が変わりました。

stinger5027

なお、グラデーションはすべてのブラウザには対応していません。もしかしたらあなたが観られているブラウザでは、グラデーションになっていないかもしれません。

 

2.フッターの領域を3分割に分けて、ウィジェットを3つ追加

 

ウィジェットの追加

グレーボックス

    ここからのサンプルコードは、他にウィジェット追加などをしていない前提で紹介しています。既にカスタマイズしている場合は、それに合せて調整する必要があります。

という事でウィジェットの追加から行ってみます。

function.phpに、「if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(4) )」の記述コードがあるので探します。

もし見つけるのが難しい場合は、「ウイジェット」もしくは「dynamic_sidebar」でソース内を検索してみてください。

このコードの2行目にある「!dynamic_sidebar(4) )」の「(4)」をプラス3をして「(7)」に変更する。

次に以下のコードを追記する。

 

私の場合子テーマに「function.php」を作成しているので、

 

注意 !!

すべての「functions.php」が記述出来るわけではありません。

親テーマにfunction_exists()があれば出来るようです。

問題となるのは、読込順序なので、最後に動作するように、ちょっとした、おまじないを書いてあげればOKのようです。

参考サイト

ブログのちから

 

 

フッターへのウィジェットの追加

 

ブロックを追加して、その中を3分割するコードをフッターに追記する。

footer.phpを開きます。

 
1行目の「<footer id=”footer”>」の下の行に以下のコードを追記する。

 

「ファイルを更新」ボタンをクリックする。

 

スタイルシート(style.css)で3分割した横幅調整と装飾

 

以下のコードを「1.フッターの背景をパソコンだけ表示させる」で紹介した

の下に「フッターカスタマイズ」のコードを記述する。

私の場合子テーマを作成しているので、子テーマのスタイルシート(style.css)内の

上記コード内の下の方にある「 } 」と「 } 」の間に、下記コード「フッターカスタマイズ」を追記した。

 

「footer_l」の領域が「フッター左」・「footer_c」の領域が「フッター中央」・「footer_r」の領域が「フッター右」の各部分を指定している。

フッターの各領域の横幅をは300pxにした。今後、記事の下にグーグルアドセンスを横に2つ並べる等のブログ全体の横幅を変更するときは、ここも変更しないと崩れる場合がある。

marginとpadding(余白)数値は各領域の左側に20px余白をとった。
ここもブラウザによっては位置がずれたり、崩れたりするので変更の必要がある。(以前stenger3の時そうであった)

 

まとめ

 

最終的に子テーマに記述したコードは以下のようになる。

 

カスタマイズ後

stinger5029

 

背景色をグラデーションにするところでハマッタ。

 

現在私のブラウザは、グーグルクロームでカスタマイズしてIE11での表示を確認してましたが、会社のPC(IE8)で確認したらグラデーションになっていなかった。

いちようIE8用のコードも追記してグラデーションになったのを確認はしてるが、すべてのブラウザがグラデーションに対応したコードを記述していません。

今後すべてのブラウザで対応出来るようしてもらいたいですね!!!

無料で自由に使えるお金と時間を手に入れて最高の人生にしませんか!

勝手にサーバーランキング
第1位 エックスサーバー

高機能ホスティングサービスプロバイダー「エックスサーバー」
マルチドメイン無制限・最新16コアCPUの大容量メモリ・232Gbpsの大容量バックボーン・FCGIなどの高速化機能

第2位 ロリポップレンタルサーバー

これまで136万人以上にご利用いただいている 『ロリポップ!レンタルサーバー』の会員募集プログラムです。
Webサイト・ブログ運営を始めるなら、ロリポップ!レンタルサーバーをご利用ください!

第3位 ドメインキング

月額100円の低価格&大容量レンタルサーバー「ドメインキング」の会員募集プログラムです。
安くて多機能、安心の電話サポート付きレンタルサーバーなので、 ホームページやブログを始める初心者やデザイナーに大人気! 価格.comで売れ筋、注目度ランキング1位を獲得した「ドメインキング」のレンタルサーバー

 - stinger 5
 -

        

  関連記事

stinger5
stinger5 SNSボタンが不揃いなのでカスタマイズしてサイドバーにも設置した

stinger5のSNSシェア用のボタンはよ~く観ると、デザインだけでなく、大き …

stinger5
stinger5トップページに独自案内用ボックスを追加して集客

スポンサーリンク stinger5トップページに独自案内用ボックスを追加して集客 …

stinger5
stinger5 トップページ記事一覧を区別化するカスタマイズ

スポンサーリンク stinger5 トップページ記事一覧を区別化するカスタマイズ …

stinger5
stinger5 記事内にもう一つアドセンス広告を追加して収益アップ

前回「stinge5トップページに広告を増やしてアドセンス収益をアップさせるカス …

stinger5
stinger5「ページトップへ戻る」のカスタマイズ 2

stinger5「ページトップへ戻る」のカスタマイズ 2 前回カスタマイズした「 …

stinger5
stinger5 記事下アドセンス広告を横並びにした

  stinger5の記事下にあるアドセンス広告をレクタングルにして、 …

stinger5
stinger5サイドバー見出しの背景をグラデーションにしてカスタマイズ

  stinger5のサイドバー見出し(タイトル)の背景をグラデーショ …

stinger5
stinger5見出しをカスタマイズしてドレスアップ

スポンサーリンク stinger5見出しをカスタマイズしてドレスアップ目 次1 …

stinger5
stinger5「ページトップへ戻る」のカスタマイズ

スポンサーリンク stinger5「ページトップへ戻る」のカスタマイズ目 次1 …

stinger5
stinger5 トップページ記事一覧をカード化して見やすくした

前回の「stinger5 トップページ記事一覧を区別化するカスタマイズ」では、カ …

Comment

  1. […] ■stinger5フッターをカスタマイズ、3分割して足元をおしゃれに! […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


PAGE
TOP


ホーム
に戻る