テイコクザッシ

フリー動画編集者のゆるゆる人生攻略

zeno-tealでヘッダー部分の背景画像がボケる原因を補足解説

zeno-tealのヘッダに関する補足

 

こんにちは、生ハム帝国です。

zeno-teal公式サイトで紹介されているカスタマイズの中に、ヘッダー部分の背景画像を横幅いっぱいに広げる方法というものがあります。

zeno-teal.hatenablog.com

当ブログでもこの記事を参考にヘッダーに画像を設定していました。

 

上の記事の大まかな流れは

カスタマイズ→ヘッダ→画像をアップロードという手順で画像を設定したあと

#blog-title-inner{
background-size:cover; 
}

 を打ち込むとボヤけてしまうので、その代わりに「デザインCSSに直接フォトライフからアップした画像のURLを貼り付けてしまおう」というものです。

しかし「ボケないようにするためにフォトライフから設定している」にも関わらずボケてしまいました。おかしいですね。

なぜでしょうか?

フォトライフの設定

フォトライフでは画像をアップロードする際にデフォルトの長辺のピクセル数を決めることができます。

初期設定ではこのピクセル数がなんかしらの数字で固定されているため変更する必要があります。どれだけ大きいサイズの画像をアップロードしてもその数値まで縮小されてしまいますからね。

フォトライフの右上のメニューバーにある設定から画像サイズを0にして「オリジナルサイズの画像を保存」にチェックを入れてください。

 

ここで注意したいのはフォトライフにアップされた画像はフォトライフ内で編集でき、サイズを変更する項目があるのですがそこで変更しても反映されません。

例えば、長辺が1000pxだった画像を2000pxに変更することができますが、その変更画面を閉じたあとまた編集を開くと元の1000pxに戻ってしまっています。

なので上記の手順の通り右上の設定から変更するようにしてください。

 

検証はしていませんが恐らくアップした時点で画像が縮小されているので、後で編集から大きくすることは出来ないということなのでしょうね。

私はこれを何度も繰り返し、バグだろ!と怒っていました。笑

 画像アドレスをコピー

フォトライフに無事指定のサイズの画像をアップできましたらあとはデザインCSSに貼るだけ…あれ!?

f:id:nhamuteikoku:20180912001043p:plain

めっちゃぼやけてるんですけど。なんならカスタマイズのヘッダから入れた後無理矢理引きのばした時よりも荒いんですけど!

(ボケているというより分身みたいになってますけどボケているていでお願いします。再現しようとしたらなぜかこうなった。笑)

なんなのこれ…

ちゃんと2000px×400pxの画像にしたはずなんですけど!

zeno-tealの制作者さん曰く、「画像の大きさが小さいからボケているので大きくすればよい」とのことです。

たしかにその通りなんだけど2000pxでぼやけるってどういうこと?…

意味わかんないんですけど…うざ。。

 

ヘッダー画像がボケていた原因

画像を間違えているわけでもなくコードを間違えているわけでもなく、本当に単純なミスでした!

 

画像をアドレスのコピーをファイルを開かずにやっていた!!

フォトライフのトップページ

フォトライフのトップページ


ここに表示されている画像というのは言わばファイルのアイコンのようなもので、中身を小さく表示しているに過ぎません。

中にこれが入ってますよ~みたいなノリ。

つまりこの段階では本物のファイルは開かれていないのです。

アドレスのコピーをすると、それはここで表示されているサイズの画像をコピーすることになる。オリジナルのサイズにしてくれるなんて親切はないです。

どうりで馬鹿みたいにボヤけるわけですね~笑

f:id:nhamuteikoku:20180911234808p:plain

きちんと画像のアドレスをコピーしたい場合はこのように「画像を編集」画面に表示される画像から直接コピーしなければならない。

あとはコピペするだけ!

zeno-tealでのボケを解消できた

綺麗な画像を貼ることに成功しました~。

めでたしめでたし。

 

これ、もしかして常識なの?

私がやらかしたということは同じように困っている人もいるのではないかと思いこの記事を書いたのですがこんなミスしてるの私だけかもしれないですね。笑

あなたのヘッダー画像に原因不明のぼやけがあるなら、それはこんな些細なことが原因になっているかもしれません。

以上、生ハム帝国でした。