こんにちは。私ははてなブログの「Under Shirt」というテーマを使っていますが、今回はヘッダ画像を変更してみました。
他の「Minimalism」や「Brooklyn」等でも同じように設定ができます。
フォントも変えてみましたが、一番の変更点は横幅いっぱいに大きく広げたこと！
縦幅も少しだけ大きくしてみました。
before
after
このような感じです♪
簡単にできますので、ご紹介したいと思います。
ヘッダ画像の作成
ヘッダ画像を作成するといっても、今使っているヘッダを画像をそのまま使って大丈夫です。
使うのはCanvaというサイトです。無料で使うことができます。
サイトで右上にある「デザインを作成」をクリックした後、「カスタムサイズ」を選択します。
ここで、横幅は1400px、縦幅は400pxに設定してみてください。ただし、横幅は必ず1400pxですが、縦幅についてはお好みで変更してみてください。
横幅をかなり広くしている理由は、このカスタマイズで画像が結構横に伸びてしまいますので、小さすぎると文字が拡大されてぼやけた感じになり見にくくなってしまうからです。
なので、最初から少し大きめの画像を作っておきます。
設定が終われば、その後は自由に作成してみてください。
私の場合は、画像をアップして
後は、文字を入れただけです。
文字は最初からこのようにたくさんのフォントが用意されていますので、お好きなものを選んでみてください。
私は、パンプキンカフェと書かれてある「ニコモジ」というフォントを使いました。
終われば右上のダウンロードをクリックして保存します。
これで作成は完了です。ここからはブログの設定になります。
はてなフォトライフでアップロード
まずは、作った画像を「はてなフォトライフ」でアップロードします。
はてなフォトライフはダッシュボードの右上にあるボタンをクリックしてから、はてなフォトライフを選択します。
画像をアップする前に設定が必要になります。
設定を開いて、画像サイズを調整します。
サイズは触らなくても大丈夫ですが、私は0を入力しています。横にある「オリジナルサイズの画像を保存」には必ずチェックを入れておきましょう。
次に先ほどcanvaで作った画像をアップロードします。
画像を選択してアップロードをします。終わった後は、左下に表示されるアップロード画像をクリックします。
右クリックで、「画像アドレスをコピー」を選択します。
コピーした画像アドレスはどこかにメモとして貼り付けておいてください。
はてなブログでの設定
続いて、はてなブログでヘッダー画像の設定を行います。
既存のヘッダー画像の消去
ダッシュボード→デザイン→レンチのマーク→ヘッダをクリックします。
ここで、タイトル画像を貼っている方がほとんどだと思いますが、「画像を外す」をクリックして画像を消します。
タイトル下の設定
その下にある「タイトル下」の部分に次のコードを貼り付けます。
最初から設定されているタイトルを消してこちらを表示させるコードになります。
私の場合は「ブログアドレスがhttps://meipapa.info/」、「ブログタイトルが雨のち晴れ」になります。
これをタイトル下に貼ってください。
これで完成です。お疲れ様でした。
さいごに
いかがでしたでしょうか？
やはり大きいヘッダの方が見やすくていいですよね。
私は「Under Shirt」を使っていますが、他のテーマでもヘッダ画像の変更は可能です。
少しタイトル下とグローバルメニューの間に余白ができてしまっていますが、グローバルメニューも変更する予定なので、またブログでお伝えしたいと思います。
他のカスタマイズも是非ご覧ください♪
最後まで読んでいただいて、ありがとうございました。
