【はてなブログ】ヘッダにジャストフィットで画像を入れる方法

前回は、ヘッダの高さを調節してスリム化しました。今回は、ヘッダにお気に入りの画像を、好きな大きさで入れてみます。というのは、前回参考にしたえむしてっくさんの記事に、こちらも載っていたから、あ、やってみよう❤となりました。

全部一度にやれば?と思うかもしれませんが、のろまなカメは、一歩一歩です。えむしてっくさんの記事に載ってないところはこちらで補足します。

まず、画像をいれます

デザイン設定から、ヘッダをクリック。

f:id:naru443:20200626080116p:plain

ファイルを選択して、画像をアップロード

f:id:naru443:20200626080604p:plain

画像がアップされた。でもあれ?「タイトル」が消えてしまいました。汗;

そしてよく見ると、上部も切れてます。ティンカーベルの顔が。。

f:id:naru443:20200626080826p:plain

余白の高さを変えてみました。

f:id:naru443:20200626081549p:plain

純粋に白い余白がついただけで、ティンカーベルちゃんの顔は切れたままです。

f:id:naru443:20200626081701p:plain

今度は、画像のサイズを変えてみました。

f:id:naru443:20200626082042p:plain

おっ、顔が出た、ばんざーい!と思ったら、、、

f:id:naru443:20200626081952p:plain

ただ、画像が大きくなっただけ~!逆にスペース取ってる。

f:id:naru443:20200626082307p:plain

というわけでこれも失敗。

こんどは、タイトルを入れた横長の画像を作って入れてみた。(画像自体を横長にしたということです) お、はまった❤ でも少し大きいなぁ。

f:id:naru443:20200626082955p:plain

それじゃぁ、さっきの画像サイズの設定を今度は小さくしてみる。

f:id:naru443:20200626083152p:plain

よっしゃ!小さくなったー! 

f:id:naru443:20200626083244p:plain

あと、気になるのは、画像が右よりなきがします。画面の中央に配置されるため、「あたし流」がピーターを右におしやっているんです。いそこで、画像の右側に見えない画像を埋め込んだ、もっと横長の画像を作りました。

f:id:naru443:20200626083633p:plain

あれ?何もかわらない。。透明色を白色に変えてみたけど変化なし。色がないと認識しないのかもしれないです。

f:id:naru443:20200626083244p:plain

右側に文字を入れてみました。少しいい感じに近づいてきました。

今日は疲れたのでここまで。ふぅー。

f:id:naru443:20200626091340p:plain