神倉道楽堂

オタクな趣味と日常生活を実用的に充実させるためのブログ

神倉道楽堂


【スポンサーリンク】

【つくってみた】素材作り(ヘッダー画像)

【スポンサーリンク】

新たにヘッダー画像を作りました!

f:id:kamikura102:20180830231141p:plain

これも先日のアイキャッチ画像と同じ手順で作成しました。
サイズはヘッダーの余白いっぱいに表示できるように2000×400で作ってます。
ヘッダー画像を余白が無いように表示する方法は
月無ことのは様(@tukinasikotonoh)の記事を参考にさせて頂きました。

tukinasikotonoha.hatenablog.com

ヘッダーのHTMLをコピペでどうにかなるように編集されていたので、素人の自分でもできて大変助かりました!
(てか絵の可愛さがうらやましい…(ーー;))
ヘッダー画像を余白なく無事表示できるようにはなったのですが、 ここでちょっと問題が発生しました。ヘッダー画像が、妙に、粗いのです。
言うなれば、ぼやけてる。
アップロードした画像は2000×400で、HTMLでも2000で表示するように設定しています。
にも関わらず粗い。
HTMLの入力ミスか、自分のブログとの噛み合わせが悪かったのかと調べたのですが、いずれも問題はありませんでした。
となると残る心当たりは、画像のアップロードです。
画像のアップロードには普通にはてなフォトライフを使っていますが、どうやらアップロード時の操作に問題があったみたいです。

f:id:kamikura102:20180901154730j:plain

 アップロード画面の画像の右側を小さく赤丸で囲ってますが、画像サイズの欄が800になっていたのです。
要するに、いくらデカい画像でもアップロードしたら800のサイズに縮小されるということです。
これは最初に気付き、他のブログの方々も同様にサイズを0や未記入などにして、下にある『オリジナルサイズの画像を保存』に チェック入れました。
しかし、にも関わらず画像は粗いままでした。
アップロードした画像を編集画面で確認したみたところ、サイズが800(下記画像の赤丸部分)になっていました。

f:id:kamikura102:20180901155220j:plain

なんのためのチェックを入れる機能なのかよくわかりませんが、サイズを編集できるみたいだったので、800から2000に入力し直して左下の『この内容に変更する』を押しました。
ところが!
それでもサイズは2000にならず、800のままでした…。
この画像をこのままヘッダーのHTMLで使用すると、以下の画像ようにぼやけた表示になりました。
 (ちょっとわかりにくいかもしれません…)

f:id:kamikura102:20180901155547j:plain

一度縮小した画像を再度拡大するような流れになるのが原因ですね。
なのでアップロードした画像を一度削除して、再度アップロードし直すことにしました。
今度はアップロード画面で元のサイズである2000を画像サイズに入力しました。

f:id:kamikura102:20180901155903j:plain

アップロードした画像を編集画面で確認すると、今度は無事本来の解像度で表示されました!

f:id:kamikura102:20180901160012j:plain

これは『オリジナルサイズの画像を保存』にチェックの有無関係なくイケました。
やっぱ入力する画像サイズが最優先されるってことなのですね。
なので、はてなフォトライフで画像をオリジナルサイズでアップロードする際はオリジナルの画像サイズ(横)を入力することをおすすめします。
自分はこれを解読するのに2時間以上掛かりました…(ーー;)
この画像でヘッダーのHTMLを入力して、現在のヘッダー画像になっております。
こんな単純なものほど落とし穴が多いですよね…
何はともあれ基礎的な素材はこれで整いました。
あとは合間見てちょいちょい手直しをしていきます。
 
引き続きよろしくお願い致しますm(_ _)m