【カスタマイズ】綺麗な画質でタイトル画像を設定する

タイトル画像って、デザイン設定からアップロードして使用すると、推奨サイズ1000px × 200pxでもなんか汚い…。

気になってしまったのではてなフォトライフに画像をアップし、直接デザインCSSに書き込んで、綺麗な画像を表示することにしました。

もし他にも「やってみたい！」という方がいましたら、続きを読むから記事の続きを見てみてください♪

タイトル画像について
- 解説と補足
以前のタイトル画像設定記事
その他カスタマイズ
参考

タイトル画像について

デザイン設定からタイトル画像をアップロードして使用すると、画質が汚くて不満だったため、デザインCSSに直接書き込むことにしました。

用意した画像は、はてなブログで推奨されているタイトル画像サイズの倍、2000px × 400pxです。

画像のurlの部分をはてなフォトライフにアップロードした画像のurlに書き換えることで綺麗なタイトル画像になるはずです…！
スマホ対応！✨

リンクも押せるようにしておきました（＊＾O＾＊）♪

※デザイン設定のタイトル画像は外しておいてくださいね。

/*タイトル画像直接指定*/
#blog-title-inner{
background-image: url(画像のurl);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height:200px;
}

/*リンク画像の大きさ分で押せるように設定*/
#title{margin:0;}
#blog-title a{
display:block;
width:100%;
height:200px;
opacity:0;
}
/*ブログの説明文消去*/
#blog-description{margin:0;opacity:0;}

/*タイトル画像スマホ対応*/
@media (max-width:480px) {
#blog-title a{height: 100px;}
#blog-title #blog-title-inner {height: 100px;}
}

貼り付け場所はいつも通りデザインCSSへ。

解説と補足

3点解説と補足させてください。

タイトルのリンク部分に関して

タイトル文字の部分を画像と同じサイズに設定して、opacityで透明にして見えなくしているだけです。

リンク部分が必要なければdisplay:none;で消しちゃっても良いと思います。

ブログの説明文に関して

ブログの説明文はdisplay:none;が聞かなかったので無理やりopacityで透明にして見えなくしてありますが、気になる方はブログの説明文そのものを、はてなブログの設定で消してください。

画像のサイズについて

画像のサイズはpngだと大きすぎるので、jpgで作るか、圧縮してから変換するのをおすすめします。

私の場合は

で、容量を小さくしました。

是非試してみてください（＾_＾）

画像について追記

ちょっと重たい気がしたので、画質の劣化具合を確認しながらもう少し圧縮してみました。比較の画像を3枚置いておきます。

※記事用に縮小表示してます。クリックorタップで拡大表示。

画像1 JPG43KB

43KBに圧縮。チリチリ感は少なめ。

ただ、1000px × 200px　に小さくなるんでもう少し荒くてもわからないだろうとさらに圧縮をかけます。

画像2 JPG25KB

さらに半分に圧縮。
だいぶ荒くなりましたが、実際は半分の縦横サイズになるのでわからないでしょう！

ということでタイトル画像にはこちらを採用。

画像3 GIF50KB(オマケ)

元のPNG画像をgif変換。
減色ツール使うと汚くなっちゃったんであんまりサイズ落とせず。

綺麗さと圧縮率が見合わないと感じたので、GIFは見送りました。
やはりJPGが一番綺麗に圧縮できるみたいですね。

以上画像比較でした。

以前のタイトル画像設定記事

michhecosume.hateblo.jp

その他カスタマイズ