絶景@日本

素人写真で紹介する日本の絶景スポット

ヘッダー画像設置とヘッダーのカスタマイズ


スポンサーリンク

ブログ開設から1年が経ち、ブログの雰囲気を変えようかと思い
これまで使っていた「ZENO-TEAL」から「マテリアルぽっぷ」に変更しました

ヘッダー画像の設置

ブログのテーマを変更したばかりだとヘッダー周りはこんな(↓)感じになっています

f:id:zekkei-japan:20180929000953j:plain

テーマにあるデモサイトでもヘッダーに画像を設置する方法が書かれていますが、
ヘッダー全体を画像にしたかったので以下のコードを
デザイン > カスタマイズ > デザインCSS
に追加しました

/*****ヘッダー画像始まり****/
#blog-title {
background-image: url("画像のURL");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;/* 中央寄せ */
height: 250px;/* 表示したい画像の高さ */
margin: 0;
padding: 0;
top: 0;
width: 100%;/* 幅100%に */
}
/*****ヘッダー画像終わり****/


するとこのよう(↓)になりました

f:id:zekkei-japan:20180929004930j:plain


ちなみにヘッダー用として用意した画像は1200px × 250pxとし、
タイトルの文字はMS明朝でフォントサイズを40と16で作りました

「タイトル」と「ブログの説明」を隠す

ヘッダー画像は上手く設置できましたが、このままだとブログの設定で書き込んだ
ブログのタイトルと説明がそのまま残ってしまっています

f:id:zekkei-japan:20180929010328j:plain


そこで、次のコードを先程貼り付けたヘッダー画像のコード下に追加しました

/*****「タイトル」と「ブログの説明」を隠す始まり******/
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}
/*****「タイトル」と「ブログの説明」を隠す終わり*****/


すると無事にデフォルトのタイトルと説明が消えてすっきりしました♪

f:id:zekkei-japan:20180929011838j:plain

ヘッダー部分のカスタマイズ

デモページの中にヘッダー部分のカスタマイズ方法が紹介されています

demo-mamegoro.hatenablog.com

ヘッダー下へのメニューのコードを
デザイン > カスタマイズ > ヘッダ > タイトル下
貼り付けました

一部コード内の

<i class="blogicon-home"></i>

赤字の部分を変更していますが、アイコンフォントはこちら(↓)を参考にしました

www.foxism.jp

なお、スマホ(iPhone)ではこのように表示されています

f:id:zekkei-japan:20180930184245p:plain

タイトルが少し切れ気味だけど・・・まぁ、問題ない範囲ですかね(笑)