【画像あり】はてなブログ用にヘッダー画像を作成し設定する方法

スポンサーリンク

はじめに

f:id:aniota-alvarado:20190624141646p:plain

少し前に独自ドメインに移行したことをきっかけに、今更ながら我がブログを見直してみたところブログのヘッダーがデフォルトのままだったことに気付きました。

ヘッダー画像をオリジナルにしたからといって成功するわけではありませんが、成功しているブロガーさんでヘッダー画像をいじっていないというかたは珍しいです。

ブログは形式も大事。特にヘッダー画像はブログの看板ともいえるため力を入れるのは当然かもしれません。ということで、ブログのヘッダー画像を無料でそれっぽく作成してみました。

本日は、その作成過程とはてなブログ側の設定について書いていこうと思います。

それでは、最後までお付き合いいただければ幸いです。

色々と調べた結果「Canva」が良いだろうという結論に

ヘッダー画像の作成については色々なかたが記事にしてくださっていますが、最終的には「ココナラがおすすめ!」という流れに行くことが多かったです。

確かにその道のプロに頼んだほうがハイクオリティなものができてブログもいい感じになるでしょうけど、それは軌道に乗ってからでもいい気はします。というのは建前で単にケチなだけなんですけどね笑

ただ、いくらお金をかけたくないからといっても、Windowsに標準装備されているペイントでは限界があります。やはりそれなりにオシャレなというか、ブログのコンセプトに合ったヘッダー画像にはしたいところです。

そこであれこれ調べて最終的に落ち着いたのが、サムネイル画像を作成する時に既にお世話になっていた「Canva」でした。

Canvaでヘッダー画像を作成する方法

では、実際に私がどのようにして現在のヘッダー画像を作成したのか、簡単に画像を交えて説明していきたいと思います。

1.カスタムサイズでサイズを指定

はてなブログのヘッダーで推奨されているサイズが「1000×200px」ということだったので、[カスタムサイズ]からサイズを指定しました。

f:id:aniota-alvarado:20190716183149p:plain

もっとも、後述しますが私の場合はそれだと左右に余白ができてしまったので、倍の「2000×200px」にして設定してみたのですが何故か上手くいきませんでした。

この「左右に余白ができる問題」について上手い解決策がないかかなり調べたのですが、ヒットした方法をすべて試しても解決できなかったのでかなり強引な方法を採っています。詳しくは後ほど。

2.背景から好みの背景を選択

続いて、[背景]から自分が使用したい画像を選択します。かなり色々な種類があるので、ブログのコンセプトに合うものが1つは見つかるのではないでしょうか。

f:id:aniota-alvarado:20190716184021p:plain

私は全種類を見た結果、無地のほうがいいかなという結論に達したので無地で少し柄が入っているものを選択しました。左上にある[背景色]から色も変更できるので、オリジナルの配色がピンとこない場合は変更してみるのもありだと思います。

f:id:aniota-alvarado:20190716184350p:plain

ちなみに、画像では茶系の色になっていますが、実際に設定してみたら微妙だったのでグレーに変更しています。

3.テキストからブログタイトルのフォントを選択

最後に、[テキスト]からブログタイトルを表記するにあたって、自分のイメージに合うものを選択します。

f:id:aniota-alvarado:20190716184848p:plain

選択したものは例文のまま反映されるので、それを自分のブログタイトルに変更する必要があります。また、はてなブログはタイトルの下に簡単なブログ説明もあるので、それも私は追加しました。

f:id:aniota-alvarado:20190716185025p:plain

なお、ピンとくるデザインがここにない場合は[テキストボックスの追加]で直接タイトルだけ記載することもできるので、必ずしもここから選ぶ必要はありません。

これで終了となるので、あとは右上にある[ダウンロード(↓のマーク)]で保存すれば、Canvaでできることはもうありません。残されているのははてなブログ側の設定だけですね。

はてなブログ側の設定

続いて、はてなブログ側の設定について説明していきます。どちらかというとヘッダー画像の作成よりもこちらの設定のほうが手間取ったので、詰まるとしたらこっちかもしれません。

※設定前に必ずバックアップを取っておきましょう!

1.ヘッダに画像をアップロードする

[デザイン]→[カスタマイズ(スパナのマーク)]→[ヘッダ]にあるタイトル画像から、[ファイルを選択]で先ほど作成した画像を選択します。

f:id:aniota-alvarado:20190716190204p:plain

この時、表示設定を[画像だけ表示]にしないと、設定したヘッダー画像に今まで使用していたブログタイトルの表記が重なってしまうのでご注意ください。

続いて、[デザイン]→[スマートフォン]でタイトル画像を[PCと同じ画像を表示する]に設定します。これでスマホでもヘッダー画像が同じように表示されるはずです。

最後に一番上の[変更を保存する]で設定は完了です。

左右に余白ができてしまう場合

先ほど少し触れましたが、ヘッダに画像をアップしてそれで終わりと思いきや、ブログを確認してみたところ左右に不自然な余白が発生していました。

f:id:aniota-alvarado:20190716220340p:plain

そこでまずは画像のサイズを「2000×200px」に変更してみましたが、どうにも上手くいきません。同じような症状が結構起きるみたいで、そのことに関してかなりわかりやすく書いてくださっている記事もあります。

しかしながら、この方法だと私のようにちょっと柄があるヘッダ画像の場合、色指定の部分でどうしても不自然になってしまうのです。あとは私がデザインCSSをDropboxで管理しているのも上手くいかない原因の一つかもしれません。

そこで私が試したのは「背景画像にサイズだけ違う同じ画像をアップする」という方法です。多分これだけだと意味が分からないと思うのでやり方を説明します。

[デザイン]→[カスタマイズ]→[背景画像]→[ファイルを選択]で先ほど上手くいかなかった「2000×200px」を選択します。

位置は「中央」、繰り返しは「繰り返さない」、スクロールは「固定する」でOKです。

f:id:aniota-alvarado:20190716224018p:plain

こうすることで、ヘッダー画像のうしろに長いサイズの画像が表示されて上手いこと左右の余白がなくなります。目を凝らすとビミョーに境目がわかるかもしれませんが私は気になりませんでした。

2.スマホの表示がおかしい場合

PCでブログを表示する分には以上の設定で問題ないのですが、スマホで確認してみたところヘッダー画像がドアップで表示されるという変な状態になっていました(URLが違うのはバックアップ用に作ったブログで試したからです)。

f:id:aniota-alvarado:20190716224744p:plain

この問題については以下の記事がわかりやすくて大変参考になりました。

こちらでも簡単に説明しますが、以下のコードを[デザイン]→[カスタマイズ]→[デザインCSS]にコピペして[変更を保存]するだけです。かなり簡単でした。

/* ヘッダー対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}

出典:いまいちど.ログ

ヘッダー画像をクリックしてトップページに飛ぶように設定するには

これに関しては前述しましたがDropboxでデザインCSSを管理している影響からか、いくら調べても解決することができませんでした

一応この設定をしなくてもスマホのほうではヘッダー画像をタップすればトップページに飛べましたし、PCのほうも「TOP」という項目を作ってあるのでここは素直に諦めます。というか諦めざるを得ません・・・。

私のように特殊な方法でデザインCSSを管理していなかったり、ヘッダー画像の余白を色指定で解決できたりするのであれば、以下の記事が参考になると思います。

おわりに

ヘッダー画像を作成すること自体はそこまで難しくありませんでしたが、はてなブログ側の設定は少し大変でした。

余白問題やトップページに飛べない問題は完全に解決できていないものの、及第点を出せるレベルくらいにはなったので個人的には満足しています。

もし同じような問題に直面しているかたがいるようでしたら、ぜひ参考にしてみてください。

長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

コメント

タイトルとURLをコピーしました