【blogger設定】QooQのフッターのデザインをカスタマイズ

QooQのフッターのデザインをカスタマイズ

ラムネグさんのbloggerテンプレート「QooQ」を使用しています
テンプレートはこちら　→「QooQ」

さて今回はフッターのデザインをカスタマイズします

テンプレートのデフォルトの状態では、サイドバーのガシェットには見出しがついていますが、フッターのガシェットの見出しはありません
ちょっとタイトル文字だけでは寂しいのでカスタマイズしました

今回はサイドバーと同じ設定にし統一感を出そうと思います
では早速変更方法を紹介します
私が調べたところ２つ方法がありましたのでそれぞれ紹介したいと思います

変更方法１　CSSの追加

bloggerカスタマイズページ　＞　テーマ　＞　カスタマイズ

＞　上級者向け　＞　CSS追加をクリック

以下の画面まで来たら

私の場合は次のコードを入れました

#footer .widget h2 {
  background: #3b4d7f;/*背景色*/
  color: white;/*文字色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

#footer .widget h2　がフッターのカスタマイズを表しています

これでサイドバーと同じデザインになりました

変更方法２　HTML追加（おすすめ）

HTMLの編集をしますので念のためバックアップをしましょう

bloggerカスタマイズページ　＞　テーマ　＞　HTMLの編集

「Ctrl」＋「F」で検索ボックスを出し「フッター」と検索



すると検索結果の中に
/****************************************
        フッター
*****************************************/
という行があります

この行の下に私は以下のコードを打ちました

h2 {
  background: #3b4d7f;/*背景色*/
  color: white;/*文字色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

これで終了です
この方法でもサイドバーと同じになります

修正方法

修正方法はCSS、HTMLのどちらでカスタマイズしてもHTMLでの編集となります
なのでHTMLでフッターのカスタマイズをした方がやりやすいかなと思います

修正方法はHTMLに入りコードを書き換えるだけです
見出しのコードはネット上にたくさんあります

私は以下のサイトを参考にしました
「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」

コードをコピペするだけで簡単に使えます
注意点が１つあり
「h1」と書かれているため「h2」に変更し使用しましょう

まとめ