今回はグローバルヘッダーとフッターの調整方法です。
文字を消したり、背景色を変えたり出来るコードを紹介します。
小技な感じなので需要があるかどうかを疑いつつも記事をアップ！
グローバルヘッダーとフッターとは
これです。
proの人でも、グローバルヘッダーは残しつつもフッターは消したい、など思うこときっとあります・・・よね？僕がそうでした。
後は色味の自由な調整もできますしね、デフォルトの状態に不満を感じている、もしくは少し変えたい、とお思いの方、是非試してみてください。
CSSを貼り付ける場所
CSSのその貼り付け場所はこちら。
デザイン→カスタマイズ→デザインCSSです。
以下コードです。
グローバルヘッダーのカスタマイズ
グローバルヘッダーを消したい
/* グローバルヘッダー */
#globalheader-container {
display: none;
}
これを貼るだけです。
グローバルヘッダーをカスタマイズしたい
/* グローバルヘッダー */
#globalheader-container {
color: #5d5d5d; /* 文字の色 */
background: #fff; /* 背景色 */
border-bottom: 1px solid #5d5d5d; /* 下部ボーダーの太さ・種類・色 */
}
こんな感じです。
これは2016年11月8日現在の当サイトの設定ですので文字の色や背景色は自由に変更されれば良いと思います。
border-bottom: 1px solid #5d5d5d; /* 下部ボーダーの太さ・種類・色 */
下部のラインがいらないのであれば、この行は丸ごと削除してください。
フッターエリアをカスタマイズする
フッターを単純に消したい
/* footerを消す */
#footer {
display: none;
}
貼れば終わります。 フッターの部分がまるまる消えるはずです。
今あるフッターの幅はそのままに、文字を消す
/* footerの文字だけを消す */
#footer address,
#footer p {
visibility: hidden;
}
これで、フッターの幅はそのままに文字は消えます。
フッターを調整がしたい
/* footer調整 */
#footer {
height:50px; /* フッターの高さ */
background-color: #5d5d5d; /* 背景色 */
padding: initial;
}
#footer address,
#footer p {
display: none;
}
高さと背景色は当サイトと同じにしてありますが、好みで変更してください。
テーマによって微調整が必要だと思うので、幅を調節して使用して下さい。
色見本
色の見本はこちらを参考にするのがオススメです。
www.colordic.org photoshopvip.net webdesignrecipes.com
簡単な解説
今回出てきた
visibility: hidden;
と
display: none;
の違いは、前者はそれが存在したスペースは残るけど表示が消える。
後者は、あった部分そのものが消えてしまうのでスペースごと消える。
といった違いがあります。
使い分けて、いろいろ試してみると面白いと思いますよ。
ではでは、また次の記事で・・・