アラフォーがお金をなるたけ使わずキレイになるblog

アラフォーのらいふはっく的なblogです。 アラサー、アラフィフ、アラカンでも見ていってね!

アラフォーがお金をなるたけつかわずキレイになるblog

はてなブログ ヘッダー画像の設定

スポンサーリンク

a.k.です。

はてなブログにおいてのヘッダ画像を入れる際の注意点を書きました。

 

  1. 画像がUPされるサイズをはてなフォトライフで変更
  2. デザイン→ヘッダの変更
  3. ついでにスマホ版も変更

 

ねんがんのヘッダ画像をてにいれたぞ!

殺してでもうばいとる

 

ヘッダ画像の大きさ

はてな推奨は横1000×縦200pixです。

 

PCでみると画像が荒くなっちゃうかな・・・

みなさんだいたいスマホでみてらっしゃるので

1000pixで事足りている場合が多いのであんまり気にしないことにしました。

 

重くなるし……

 

といいつつ、1500をせっかく用意してもらっちゃったんで

1500×300をUP!

はてなフォトライフの設定(PC・スマホブラウザで)

ここの設定は横800pix以上の画像をアップしない場合は必要ありません。


f:id:ak40:20191013202911p:plain

管理画面から右上の四角が9面のメニューを押していただくと

利用中のサービスではてなフォトライフがあります。

ここからフォトライフに飛んでいきます。

f:id:ak40:20191013202931p:plain

右上のメニューの中に「設定」が増えているので

設定を押すと、フォトライフの設定画面にうつります。

画像サイズを0にして、オリジナルサイズの画像を保存。

 

これで なんか画像が荒いんだけどというのが防げますが

スマホで見る方には関係ないみたいです(汗

 

デザイン→ヘッダの変更(PC・スマホブラウザで)

f:id:ak40:20191013203619p:plain

はてなにそのまま載せちゃうと・・・・

こんな感じで横に空白が。むむむむ。

 

いろいろ設定しなきゃいけないみたいです。

こちらのサイトを参考になさってください。

 

管理画面→デザイン→スパナ(カスタマイズ)→ヘッダ→タイトル下

そこにコピペ。

 

ちなみに

ヘッダ画像のURLの確認は

フォトライフでもいいのですが、

blogのプレビュー画面から右クリック→画像アドレスのコピーでできます。

※ヘッダ画像UP後ですよ。UP前じゃないよ

スマホではてな公式アプリ

最後にこの設定をすればおしまい。

 

はてな公式アプリで見てる人は 多いのでこの設定を

設定→デザイン

f:id:ak40:20191013231613p:plain

 

基本はこっちでOK

f:id:ak40:20191013231603p:plain

 

ちょっと横幅がちっちゃい画像を用意して

これをやってもOK

私はiPhone11、XRと

同じ横幅の828pixを作成してUPしました。

f:id:ak40:20191013231607p:plain

 

じゃーん。やった

f:id:ak40:20191013231611p:plain

 

 

めんどくさいけどがんば……