【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

はてなブログでデフォルトの機能を使ってヘッダー画像を設置する方法

はてなブログでは、ヘッダー画像を設置する機能がデフォルトで準備されています。これを使うことで簡単に設置することができるため非常に便利です。

始めに注意点です。

この記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご注意ください。

PLAIN – テーマ ストア

ヘッダー画像の設置方法

デフォルト機能でのヘッダー画像設置は、デザイン設定の部分から行います。

下の画像を参考にとりあえず設置してみて下さい。

f:id:oyomiyo:20180907175503p:plain

縦の長さが決まっているので、画像の中から範囲を切り取って使う形になります。

設置するとこんな感じです。

f:id:oyomiyo:20180907175529p:plain

はい、カッコ悪い(笑)

おそらくほとんどの人は変な余白が挿入されてしまうはずです。これはカッコ悪いですね~。

それで少し手を加えて綺麗に表示されるようにカスタマイズしてみましょう。

タイトル下の部分でコードを記述できるようになっているので、そこを活用します。

f:id:oyomiyo:20180907175841p:plain

以下のコードをコピペしてください。

CSS

<style type="text/css">
#blog-title-inner {
background-size: cover !important; /*画像を全面に表示*/
background-position: center 0px !important;
}
.header-image-enable #blog-title {
padding: 0; /*余白調節*/
margin: 0; /*余白調節*/
}
</style>

background-sizeで画像が前面を覆うように設定しています。また、不要な余白が入らないようにタイトル周りの余白を削除しました。

私の場合このような標示になります。

f:id:oyomiyo:20180907180520p:plain

恐らくこの時点でほとんどの人はうまくいくと思います。

私の場合は文字が左側に寄ってしまっているので修正が必要ですね汗

先程のコードの中にこれを追加しました。

CSS

.header-image-enable #blog-title-content {
margin-right: auto;
margin-left: auto;
}

f:id:oyomiyo:20180907181104p:plain

完成!!!

後から気づいたのですが、せっかく設置する際に画像を切り取ったにもかかわらず、画像の基準点が一番上に来てしまっていますね。汗

f:id:oyomiyo:20180907193134j:plain

恐らくbackground-sizeの設定上仕方のないことかもしれません。ここら辺は最初から画像を切り取るなりなんなりで対応する必要があるかもしれません。

*cssで設定するより切り取った方がたぶん楽(笑)

ヘッダー画像は目を引く部分なのでこだわって作りたいものです。せっかくデフォルトの機能としてはてな側が準備してくださっていたので活用してみて下さいね。

 

ではまた。