西の猫はキャンプ好き

西の猫はキャンプ好き

キャンプをこよなく愛する熊本猫。

PC表示でのブログのタイトル周りをCSSでちょこっといじってみた。

PC表示でのブログのタイトル周りをCSSでいじってみました。

しばらく放置していたブログのあしらいを変更。(おっそ)

とりあえず、タイトルを横幅100%にするのと、縦幅がデフォルトで200pxしかなかったので、任意のサイズで表示させてみました。

 

タイトル画像の横幅を100%にする

/* タイトル画像の横幅を100%に */
#blog-title-inner {
background-size:cover;
}

これだとブラウザいっぱいには広がらなかったので、さらにこちらを追加してみる。

 

タイトル画像の高さを指定

.header-image-only #blog-title #blog-title-inner {
width: 100%;/* 再度ここで横幅100% */
height: 433px;/* 高さはここを指定 */
}

高さを自分が作った画像サイズそのままで指定。

横幅に再度100%指定したらブラウザいっぱいに広がってくれました♪

 

タイトル画像の上下余白を取る

#blog-title {
margin: 0 auto;
padding: 0;
}

 ついでに余白も調整してみました。

 

f:id:nishinoneko:20170912040404j:plain

この元画像が、ブラウザを広げてもタイトル画像がニョキニョキと広がってくれます♪

でも、画質荒れてるな。(ΦωΦ)ムムウ

 

とりあえず、調整はここまで。

気が向いたらまらいじろうっと。(やる気あんの?)