Web
Analytics

雨のち晴れ

思った事をノンジャンルで綴ります

雨のち晴れ

MENU

ヘッダ画像を横いっぱいに広げる方法

はてなブログ以外の方も

ヘッダ画像を大きくする方法をご紹介します

こんにちは。私ははてなブログの「Under Shirt」というテーマを使っていますが、今回はヘッダ画像を変更してみました。

他の「Minimalism」や「Brooklyn」等でも同じように設定ができます。

フォントも変えてみましたが、一番の変更点は横幅いっぱいに大きく広げたこと!

縦幅も少しだけ大きくしてみました。

before

変更前のヘッダ画像

after

変更後のヘッダ画像

このような感じです♪

簡単にできますので、ご紹介したいと思います。

ヘッダ画像の作成

ヘッダ画像を作成するといっても、今使っているヘッダを画像をそのまま使って大丈夫です。

使うのはCanvaというサイトです。無料で使うことができます。

https://www.canva.com/

サイトで右上にある「デザインを作成」をクリックした後、「カスタムサイズ」を選択します。

デザインを作成をクリックしてからカスタムサイズをクリックします


ここで、横幅は1400px縦幅は400pxに設定してみてください。ただし、横幅は必ず1400pxですが、縦幅についてはお好みで変更してみてください。

横幅は1400pxで固定します

横幅をかなり広くしている理由は、このカスタマイズで画像が結構横に伸びてしまいますので、小さすぎると文字が拡大されてぼやけた感じになり見にくくなってしまうからです。

なので、最初から少し大きめの画像を作っておきます。

設定が終われば、その後は自由に作成してみてください。

私の場合は、画像をアップして

画像をアップロードします

後は、文字を入れただけです。

文字は最初からこのようにたくさんのフォントが用意されていますので、お好きなものを選んでみてください。

たくさんのフォントから選ぶことができます

私は、パンプキンカフェと書かれてある「ニコモジ」というフォントを使いました。

終われば右上のダウンロードをクリックして保存します。

最後にダウンロードをクリックします

これで作成は完了です。ここからはブログの設定になります。

はてなフォトライフでアップロード

まずは、作った画像を「はてなフォトライフ」でアップロードします。

はてなフォトライフはダッシュボードの右上にあるボタンをクリックしてから、はてなフォトライフを選択します。

はてなフォトライフを選択します

画像をアップする前に設定が必要になります。

設定を開いて、画像サイズを調整します。

設定をクリックします

サイズは触らなくても大丈夫ですが、私は0を入力しています。横にある「オリジナルサイズの画像を保存」には必ずチェックを入れておきましょう

チェックを忘れないようにしましょう

次に先ほどcanvaで作った画像をアップロードします。

画像をアップロードします

画像を選択してアップロードをします。終わった後は、左下に表示されるアップロード画像をクリックします。

画像を選択します

右クリックで、「画像アドレスをコピー」を選択します。

右クリックをしてから画像アドレスをコピーします

コピーした画像アドレスはどこかにメモとして貼り付けておいてください。

はてなブログでの設定

続いて、はてなブログでヘッダー画像の設定を行います。

既存のヘッダー画像の消去

ダッシュボード→デザイン→レンチのマーク→ヘッダをクリックします。

ここで、タイトル画像を貼っている方がほとんどだと思いますが、「画像を外す」をクリックして画像を消します。

画像を外すをクリックします

タイトル下の設定

その下にある「タイトル下」の部分に次のコードを貼り付けます。

最初から設定されているタイトルを消してこちらを表示させるコードになります。

2行目の「ブログのアドレス」と3行目の「はてなフォトライフの画像リンクURLを貼り付けます(先ほどメモしたもの)」、「ブログタイトル」の部分はそれぞれご自身のものに変更してください。。

私の場合は「ブログアドレスがhttps://meipapa.info/」、「ブログタイトルが雨のち晴れ」になります。

これをタイトル下に貼ってください。

ここに貼り付けます

これで完成です。お疲れ様でした。

さいごに

いかがでしたでしょうか?

やはり大きいヘッダの方が見やすくていいですよね。

私は「Under Shirt」を使っていますが、他のテーマでもヘッダ画像の変更は可能です。

少しタイトル下とグローバルメニューの間に余白ができてしまっていますが、グローバルメニューも変更する予定なので、またブログでお伝えしたいと思います。

他のカスタマイズも是非ご覧ください♪

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