アイフォンSEは「position:fixed」した要素のz-indexが効かない
兵庫県三田市でホームページ制作をしているゴリラドットです。
今回はワードプレスのメディア設定で画像サイズをどうするのがおすすめ?というのを紹介したい。「サムネイルのサイズ」「中サイズ」「大サイズ」…たくさんあっていざ画像サイズを設定しようにも迷いますよね。
さ、それではおすすめをみていこう。
サムネイルのおすすめ
ワードプレスのサムネイルのサイズはたぶん使っているワードプレステンプレート(テーマ)によっておすすめの画像サイズが決まっているはず。
サムネイル、ていうのは記事一覧なんかでちっちゃく表示される画像のサイズになるので使ってるテンプレートの説明書や作者が説明してくれている設定サイトなんかを読んで設定したい。というかたぶんそうするのがサムネイルのサイズの正解。
個人的には1.91:1くらいのサイズ感が好き。誰もそんなん聞いてないね。ゴメンナサイ。
「1.91:1」ってなんよ?
おお!興味を持ってくれるとはさすが私が見込んだお人だ。
そう1.91:1はものすごい中途半端な感じがする。結婚式のご祝儀かってくらい割り切れない変な数字。
しかしこの縦横比にはすっごくエクセレントな理由があって、なんとツイッターやインスタがこの縦横比なのだ。へっへーん、どうだ驚いたか。
ということで自分のサイトのサムネイルサイズも1.91:1で設定しておくと見やすい感じになる…と思う。ちなみに1.91:1てのは横が1.91で高さが1。つまり横長ね。
ワードプレスで設定するなら(382,200)とか。幅が382、高さが200、そして「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」ていうチェックボックスははチェックつけておく。
これ入れておかないと縦横比がぐちゃぐちゃになっちゃう。
さらにさらにいうと、横幅は末尾ゼロにしたいんで(360,188)とか(320,168)が好き。
もしお使いのテンプレートにサムネイルサイズのおすすめ設定がないなら上の値がおすすめ。
中サイズのおすすめ
はい、では次にワードプレスのメディア設定の「中サイズ」の画像サイズをみていこう。
中サイズは(400,0)がものすんごいおすすめ。幅の上限が400で高さの上限が0。
高さの上限を0にしちゃったら画像がぐちゃって潰れちゃうんじゃ?と不安になるけれど、それは安心。
ワードプレスのメディア設定では値を0にするとそっちの方向を気にしなくなるだけ。つまり高さがどんだけ高い、4コマ漫画みたいな超縦長画像だろうが幅だけきっちり400にそろえまっせー!という事。高さはそのままの縦横比を守って幅が400なら高さはこうなるよね、まで縮小されるってわけ。
ちなみに幅の上限も高さの上限も両方とも0にすると今度はまた意味が違ってきて、そのサイズを生成しなくなる。例えば中サイズを(0,0)で設定すると中サイズの画像が出力されなくなる。
レンタルサーバーがあんまり空きがない時とかはこんな風に中サイズをゼロにしちゃうのもおすすめだけど、基本は(400,0)で。これはもうおまじないみたいなもんだと思ってください。
いや、なんで(400,0)なん?
おまじない言われても納得いかないんだけど?という頑固なあなた。いやまー気持ちはわからんでもない。納得してない設定って気持ち悪いですよね。
えーっと、また別の記事で書きたい話で、すんごく長くなるんだけれども、ワードプレス、というかWEBの技術でsrcsetていうのがある。
ものすごーくざっくりsrcsetの説明をすると、パソコンとかスマホとか全然サイズの違う画面でも、画像がぼやけたりしないようになる超スグレモノ。
んで上でおすすめした中サイズに400を設定しておくと、そんなsrcsetがうまい事機能して、スマホで見たときにサイトの写真がきれいに表示されやすくなる、と思ってもらいたい。
大サイズのおすすめ
大サイズは768より大きくて1,000より小さいというのがおすすめ。個人的には幅の上限960、高さの上限0の(960,0)することが多いです。
768より大きく!ていうのは、ワードプレスはこれまたsrcsetの兼ね合いでメディア設定にはまったく出てきてないのに勝手に(768,0)の画像を作成しているんです。そう、裏でコソコソと。ホントなにやってるか信用ならんやつですワードプレス。
なので大サイズも768にしちゃうと内部的に似たようなサイズの画像が2つできることになってもったいない。なのでまー間取って960くらいがおすすめ。
1,000より小さく!ていうのは別に1,000より大きくてもいいんですが、あんまり大きくても使わないなー、というシンプルな理由。それなら挿入するときに「full-元サイズ」を選べばいいし、パソコンの横幅で一番多いのが1080だったかな?なのでそれ以上はいらないじゃん、ということです。
ワードプレスのメディア設定おすすめまとめ
ワードプレスのメディア画像サイズ設定のおすすめを紹介しました。
おすすめ設定をまとめると、
- サムネイルのサイズ:テンプレートごとにおすすめ値があるハズ
- 中サイズ:400,0
- 大サイズ:960,0
ていう感じです。
特に中サイズは400にしておくと、というより確か初期値が400なのでそのままにしておくのがおすすめ。お試しあれ!