はてなブログでヘッダ画像を自在にトリミングする方法

見栄えがちがう。

　先日からブログのヘッダ部分に画像を入れてみた。本の写真を載せることで書評ブログだと一目でわかるようにするためだ。素材も見つかりすぐに変更できるかなと思ったら意外とてこずった。今日やっとまともに見れるデザインにすることができたのでこれから紹介する。

　ヘッダの素材はこちらからダウンロードした。無料で加工も自由にできるとのこと。
PAKUTASO/ぱくたそ-すべて高品質の無料(フリー)写真素材

利用された洋書 | すべて無料の写真素材(フリー)-PAKUTASO/ぱくたそ

　ダウンロードしたらプレビューというソフトを使って色合いを調節。
「Shift+command+4」でスクリーンショットを起動させて適当な大きさにトリミングした。macは偉大だなあ。

　あとはデザイン>カスタマイズ>ヘッダ>タイトル画像へ移り、画像をアップロードするのみ。

　が、

　いまいち気に入らない。画像をちょっとだけ細長くしたい。そう思ってデザインCSSに以下の記述を加えた。

#blog-title {
    height:140px;
}
.header-image-enable #blog-title-inner {
        padding: 30px;
}

　はてなブログのidとかclassの構造はこのサイトに分かりやすく書かれている。#blog-titleの中に#blog-title-innnerがありその中に#titleと#blog-descriptionが入っている。

はてなブログのidとかclassとか - kyabana's blog

　.header-image-enableとか言うのは公式サイトに詳しい説明があった。
はてなブログテーマ制作の手引き - ヘルプ - はてなブログ

• タイトル画像のclass

タイトル画像を指定するとbodyタグに下記のclassが付与されます。
基本的にはあらかじめ調整されています。各テーマでは細かな調整を行います。

タイトル画像の表示方法	body に付与されるclass
タイトル画像なし	-
画像とテキストを表示	header-image-enable
画像だけ表示	header-image-only

　よしこれで変更。

　が、

　画像が切り取られず下のメニューが埋まってしまった。これを解決するのに一日掛かった。そして見つけたのがここ。
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design

一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。

　あ、みんな知ってるんだ、そうなんだ。

　というわけで以下のように変更。

#blog-title {
    height:140px;
    overflow: hidden;
}
.header-image-enable #blog-title-inner {
        padding: 30px;
}

　めでたしめでたし。

おわり

　タイトル盛りすぎちゃったけどまぁいいか。