(cache) 【CSS】コピペするだけ！はてなのヘッダー画像をフィットするようにカスタマイズ

はてなのブログのヘッダのタイトル画像を、うまく調整するのって難しいですよね。

はじめに

やっと作った画像もアップロードするとこんな感じに・・・

f:id:mshitech:20161031183857p:plain

切り抜きたく無いのに切り抜きを強いられたり、画像の解像度を落としたく無いのに画像の解像度を落としたり。

f:id:mshitech:20161031195858p:plain

しかしそんなことをせずとも、このまま未調整の画像をヘッダー画像に使うことが出来ます。こんな感じで綺麗に治りますよ。

f:id:mshitech:20161031185943p:plain

貼り付ける場所の確認

コードを貼り付ける場所はこちら。
デザイン→カスタマイズ→デザインCSSです。

当サイトではテーマにInnocentを使わせていただいていますが、他のテーマでも大体以下に紹介するコードで収まると思います。

CSS

/* タイトルイメージ調整 */
#blog-title {
    padding-top: 5px; /* 画像上部の余白*/
    padding-bottom: 5px; /* 画像下部の余白*/
    height: initial;
}
.header-image-only #blog-title #blog-title-inner {
    height: 250px; /* 画像の高さ */
    background-size: contain;
}
@media (max-width: 480px) {
.header-image-only #blog-title #blog-title-inner {
    height: 150px; /* 画像の高さ */
}
}

これを先ほどの場所の一番下なんかにペーストして下さい。

軽く解説

@media (max-width: 480px) と書いてあるのは解像度が480以下になったら〜って設定で、携帯用の指定です。
選ばれているデザインテーマとの関係もありますので、画像と余白の高さはお好みでしてい下さい。使用する画像によっては"contain"のところを"cover"に変えても良いかもしれません。

keicode.com

ではでは、また次の記事で・・・

CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。