LION BLOGのカスタマイズはロゴなど作成する画像のサイズに注意しよう。

LION BLOGのカスタマイズはロゴなど作成する画像のサイズに注意しよう。

LION BLOGをカスタマイズして好きなデザインにするにはロゴなど画像が必要になります。カスタマイズ画面で確認できるサイズで作成すると、大きすぎたり、変に表示されることがあります。カスタマイズする際に、注意した方がいい画像サイズについて説明します。サイズのpxはピクセルです。mmだとありえない大きさになるので、注意してください。

ロゴの画像は横220px×縦50px

RANGE LIFE

カスタマイズ画面では横440px×縦50px以内で作成と記載されていますが、CSSでリサイズされるので、最初から横220px×縦50pxで作成した方がいいです。好きなサイズでロゴを作り、横300p×縦100pxで作成して表示させてもガッカリするだけです。

ロゴのサイズを変えるにはCSSを変更

LION BLOGのロゴのサイズは小さめです。もっと大きく表示させたい時はCSSを変更する必要があります。こだわりが強くなければ、ロゴは横220px×縦50pxで作成した方がいいです。CSSを変更する際は子テーマのCSS追加で行いましょう。

AMP対応のロゴは一緒でOK

AMP(Accelerated Mobile Pages)はGoogleやTwitterなどの企業が参加しているAMPプロジェクトが推奨しているHTML規格です。

スマホやタブレットでWebを閲覧する人のために、表示速度の高速化などが図られています。通常のHTMLをAMPに対応させるための書き方があるのですが、LION BLOGではそれが標準で搭載されています。

LION BLOGのAMP対応のロゴサイズは縦60px以内となっているので、通常に使用しているロゴと一緒でOKです。

ホームの画像サイズは横1600px×縦300px

ホームの画像サイズは横1600px×縦400px以上が推奨されていますが、個人的には縦400pxだと大きすぎます。表示させるサイズも選べるのですが、大きすぎるサイズだとファイルサイズ(データ容量)も大きくなるので、ジャストサイズで作った方がいいです。

RANGE LIFEでは横1600px×縦300pxで作成しました。縦300pxならノートパソコン、大きめのディスプレイで表示させてもいい感じです。

スマホのサイズは半分の縦150px

スマホのサイズは300pxなら半分の150pxを入力すればOKです。

Advertisement

記事内の画像サイズは横880~1080px程度

WordPressは便利なことにリサイズしてくれるので、気にするほどではないですが、レンタルサーバーの容量もあるので、一応記事内の画像サイズは横880~1080px程度でアップロードした方がベストです。最近は写真もPNG形式で表示させているサイトもありますが、PNG形式は可逆性の圧縮なので、やたらファイルサイズが大きくなるなるので、JPG形式で表示させる方が無難です。

横512px×縦512pxのアイコン

LION BLOGはサイトのfavicon(ファビコン)などに使用できるアイコンもアップロードするだけで適用することができます。faviconはアドレスバーやタブ、ブックマークに表示されるアイコンなのでぜひ作成しましょう。サイズは横512px×縦512pxの正方形です。サイズは大きいのですが、表示されるサイズは小さいので、シンプルなデザインがいいです。

画像の作り直しは無駄な時間がかかる

CSSやPHPなどのカスタマイズは考えるのは大変ですが、変更に時間はあまりかかりません。しかし、画像の作り直しは時間がかかります。デザインを変えるようになれば、数時間かかることもあります。サイズを間違えるのは時間の無駄になるので、きっちり決めてから、作成することが重要です。