Ar-Rihla

旅と写真とあといろいろ

はてなブログのタイトル画像を縦横中央に揃える方法

f:id:kamasho:20160803150243j:plain

はてなブログはヘッダーに表示する画像(タイトル画像)を変更できるけど、何も考えずに適当な画像を設定すると、下に余白が生じてしまうっぽい。

加えて、要素がblockになってるみたいで、クリック可能な領域が横いっぱいに広がってしまう。

これを直したので、方法を残しとく。

他の人がとっくに書いてそうだし、ちゃんとググってないからもっと別の回避策があるかもしれないけどね。

デザインCSSの記述

タイトル画像を中央に揃えるためのスタイルシートを作る。

基本下のコードのままで大丈夫なはず。

#blog-title {
    // 横方向の中央揃え
    text-align: center;   
}

#blog-title-inner {
    // 要素のインライン化
    display: inline-block;
    // タイトル画像のサイズ
    width: 400px;
    height: 110px;
    // タイトル画像の余白
    margin: 2em;
    // タイトル画像の表示を中央にする
    background-position: center center !important;
}

※ タイトル画像のサイズ(widthとheight)と余白(margin)はお好みで。サイズは使用する画像のサイズに変更するといい。

デザインCSSの適用

作成したCSSを適用する。

ブログメニューのデザイン→カスタマイズ→デザインCSSで一番下に貼り付けるだけ。

f:id:kamasho:20160803152913j:plain

以上

これで中央に揃う。

f:id:kamasho:20160803153427j:plain

ついでにいくつか他のテーマで試してみる。

Block Memo

変更前

f:id:kamasho:20160803153039j:plain

変更後

f:id:kamasho:20160803153102j:plain

寿司ゆき

変更前

f:id:kamasho:20160803153222j:plain

変更後

f:id:kamasho:20160803153254j:plain

Terminal

変更前

f:id:kamasho:20160803153313j:plain

変更後

f:id:kamasho:20160803153348j:plain

うん、大丈夫そう。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

広告を非表示にする