Blogger Labo：【Tokyo】フッターのカスタマイズ

このページでは「Tokyo」のフッターのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

※初心者の方は「カスタマイズ基礎知識」などの「初心者向け記事」を参考にしてみてください


レイアウトの設定について


CSSの内容


/****************************************
          footer [フッター]
*****************************************/

 フッター全体の設定 

#footer{
background-color :$(backgroundcolor); [フッターの背景色]
border-top: 1px solid $(linecolor); [フッター上部の区切り線]
border-bottom: 1px solid $(linecolor); [フッター下部の区切り線]
box-shadow: 0 -1px 0 $(backgroundcolor); [フッターの影]
padding-top: 2em; [フッター上部の内側の余白]
color: $(lightcolor); [フッターの文字色]
letter-spacing: 0; [文字の間隔]
padding-bottom: 2em; [フッター下部の内側の余白]
}

 フッターのコンテナ設定 

#footer .container{
width: 80%; [ページ全体に対するコンテナ横幅割合]
}
#footer a{
color:$(linkcolor); [フッターのリンク文字色]
}
#footer .row33{
border-left: 1px solid $(linecolor); [コンテンツ左部の区切り線]
padding-left: 1em; [コンテンツ左部の内側の余白]
}
#footer .row33:first-child{
border: none;
}
#footer .widget{
margin-bottom: 3em; [コンテンツ下部の外側の余白]
}
#footer .widget:last-child{
margin-bottom: 0;
}
#footer .widget>div{
line-height: 1.5; [コンテンツの行の高さ]
}

 フッターのレスポンシブ設定 

@media ( max-width : 768px ) {
#footer .row33{
border-left: none; [コンテンツ左部の区切り線を無しに]
padding-left: 0; [コンテンツ左部の内側の余白を0に]
}
#footer .widget{
margin-bottom: 1em; [コンテンツ下部の外側の余白]
padding-bottom: 1em; [コンテンツ下部の内側の余白]
border-bottom: 1px solid $(linecolor); [コンテンツ下部の区切り線]
}
#footer .widget:last-child{
margin-bottom: 1em; [一番下のコンテンツ下部の外側の余白]
}
}

/****************************************
          footer-credit [フッター下のクレジット]
*****************************************/

 フッター下のクレジット設定 

#footer-credit{
color: $(lightcolor); [クレジット表示の文字色]
}
#copyright{
text-align: center; [クレジットを中央揃えに]
}
#copyright:before{
content:"design : "; [クレジット表示の前に「design : 」をつける]
}
@media ( max-width : 768px ) {
}

上記が Tokyoのフッターを設定するCSSに説明を加えたもの（必要な部分のみ）。

基本的には説明の部分の値を変えていけば自分好みに変更することができる。

フッター下のクレジットを非表示にする


#footer-credit{
color: $(lightcolor);
display:none;
}

上記のようにフッター下のクレジット設定に「display:none;」を追記する

が、テンプレートを使わせてもらっているということなので消すのはマズイかも？