粋なLABO

クルーズ講師が本音で"こっそり" CRUISE BLOG(クルーズブログ)

【ZENTO-TEAL】ヘッダー画像調整-スマ―フォンでもぴったり-

にほんブログ村 旅行ブログ 船旅へ
↑「ポチッ」してくれると頑張れる!やる気向上ボタン

スポンサーリンク

f:id:taguchi-s-t:20180109205927j:plain

zeno-tealのヘッダー画像カスタマイズ紹介です。

zeno-tealをカスタマイズしているとスマートフォン側のヘッダー画像が上手に表示されません。どのようにすれば良いのか苦心した末、その解決策を見つけました。

このテーマははてなブログでもとくにカッコイイ構成なので、今後も少しずつ更新していきます。

オリジナルテーマだと画像が“はみでる”

PCではzeno-tealをインストールすればヘッダー画像は通常どおり、はてなブログ(デザイン)設定で簡単に設定できます。上下左右もしっかり表示してくれるので、頼もしい。

ぼくがZENO-TEALのカスタマイズに成功した話

f:id:taguchi-s-t:20180109010532j:plain

それなのにスマホになると、なぜかはみ出てしまいます。デザイン設定でスマホ側のヘッダーを調整するのかな?と思ったのですが、レスポンシブ設定にチェックされているので、PC側のCSSを調整する必要があるようです。

▼はみ出るとこんな感じ

f:id:taguchi-s-t:20180109214620j:plain

文字だけなら問題ない

f:id:taguchi-s-t:20180109211036j:plain

画像は利用せず、文字だけなら気にすることはありません。綺麗に表示されます。これだけでも充分にかっこいいんですけどね。

 

zeno-tealのカスタム記事は少ない

この機会に、かなりNET検索したのですが、zeno-teal(スマホ)のヘッダー画像調整について説明した記事はあまり出てきませんでした。調べているうちにわかったのですがzeno-tealは比較的あたらしいようで、まだまだ解説している記事が少ないようです。

ちなみにzeno-teal公式ページでは手順にそってとても丁寧にBLOG設定を説明してくれているのですが、画像設定についてのコードはありませんでした。

zeno-teal.hatenablog.com

 

失敗談

zeno-teal専門のコードでは探すことができなかったので、仕方なく一般的なCSSコードを調べました。その時のNET検索ワードは「はてなブログ ヘッダー画像 スマホ」です。そこで、見つけたのは次のコード。

引用:http://blog.z0i.net/2016/05/hatena-header.html

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

これをはめてみるとこんな感じ。

一瞬、喜びが走りましたが冷静にみると間伸びしていて変なかんじです。

f:id:taguchi-s-t:20180109220818j:plain

よこ幅ばっちりなのに、なぜかたて幅が狭くなって、画像下に不思議なスペースが生まれています。

そこで、同じページにもうひとつコードが書かれていたのですが、これもダメでした。一応、載せておきます。

引用:http://blog.z0i.net/2016/05/hatena-header.html

@media (max-width: 480px){

 #blog-title-inner,#title a{

   height:100px!important;  

 }

 

 #blog-title-inner {

      background-size: contain;

 }

}

background-size: contain;が追加されています。本来であればこれで解決するようですがzeno-tealではダメでした。

【zeno-teal】スマホ画像の調整に成功!

途方にくれていまいヨタヨタしながら、たどり着いたのがこのかたの記事。

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

コチラで紹介していたコードをデザイン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:taguchi-s-t:20180109215135j:plain

はてなブログ推奨サイズ

これはあちこちに書かれていますがはてなブログのヘッダー画像サイズは「1000 x 200」推奨です。

ぼくのヘッダー画像も自作(無料)で「1000 x 200」つくっています。

f:id:taguchi-s-t:20180109213554p:plain

おすすめバナーサイト

1ヵ月以内に解約すれば無料でした(2018年1月)

まとめ

zeno-tealはとってもおしゃれでかっこいいです。いくつか投稿ルールもありますが、その制約がまたかわいいです。おかげで今のブログはとってもお気に入り。これからもっともっと愛でていきたいと思います。

zeno-tealをお使いのブロガーさんにお役立てになれば嬉しいです。