中途半端で何が悪い

現役音大生が大学4年で就活をやめてブログに手を出してみる

【はてなブログ】レスポンシブでスマホ用ヘッダーをうまく貼る方法~ZENO-TEAL~

 ZENO-TEALを導入し、スマホヘッダーが上手くはまらなかったので対処していきます

 

f:id:sg178:20170712062854j:plain

 

少し前にブログをProにアップデートし、

無料ブログ時代からずっと使いたかったテーマ

ZENO-TEALを導入しました。

 

zeno-teal.hatenablog.com

 

見た目がスタイリッシュで、ブログトップに

アイキャッチがバァーっと並ぶデザインを

ずっと使いたかったんですよ

 

見やすいじゃん 好きよ

 

 

しかし、

このテーマはスマホがレスポンシブデザインということで、

スマホのヘッダー画像がPC用のヘッダーでは

 

全く、噛み合わない

文字が見切れる

 

f:id:sg178:20170712072438p:plain

 

あぁぁぁぁイライラするよーー笑

 

 

実にこのヘッダー噛み合わない事件が発生してから

余裕で1週間ぐらい経った

 

CSSとかデザインできないから

親切な方のブログを探しまくっては

貼ってあるコードを試し、カスタムしてみては、

親切な方のブログを探し、コードを貼りカスタム探しカスタム、、、、

 

 

 

そしてついにきっかしハマるCSSを書いてくれている人を

発見したのである。

このお方。

www.imuza.com

 

 

imuzaさん。あなたはです。

ありがとうございます。

 

僕がCSSに貼ったコードは

コメント欄に書いていたこのコード

 

@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}

 

なんかこれ貼ったら今までの苦労とはなんだったのか、

一瞬で綺麗にバチっとハマりました。

 

ヘッダの手抜き感はさておき、

とりあえずバチっとハマったことで僕の心は晴れ晴れでございます

f:id:sg178:20170712072824p:plain

 

 

 

ちなみに僕のヘッダーのサイズは

はてなブログが推奨している1000x200でございやす

 

なんで今までハマらなかったのか知る由も無いですが、

imuzaさんには感謝です。

 

以上僕がレスポンシブでスマホ用ヘッダーがハマらなかった事件でした。