読者です 読者をやめる 読者になる 読者になる

えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

【CSS】コピペするだけ!はてなのヘッダのタイトル画像を切り抜きなしで画面にうまくフィットさせます

はてなブログ カスタマイズ 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に詳しいブロガーさんがよく紹介されているオススメ解説本。