サイトに表示される画像（サムネイル）、横長が増えてきた件。サムネイルやサイズを大幅修正しました！
こんにちは！デュアラー™関達也@宮崎⇔東京デュアルライフ（@SekiTatsuya）です！
従来、ウェブサイトやブログに載せる写真は、
スマホやデジカメなどで撮影した写真の
縦横比のままでした。
主な縦横比は、
「4:3」「3:2」「16:9」
だと思います。
以前はInstagramが
正方形のみだった頃もあったので、
「1:1」を好んで使う人もいますね。
横長の画像や写真が増えた
しかし最近では、
これらの縦横比を無視した
横長の画像や写真が掲載されているのを
よく見ませんか？
サイトやブログを運営されている方なら
気になるところではないでしょうか。
例えば、Googleアドセンスの
関連コンテンツの広告は
横長ですね。
昨日たまたま見た
Yahoo!ニュースの特集ページも
横長です。
上の写真は、調べてみると
「3:2」でした。
しかし、その下に表示されていた
おすすめ記事はかなりの横長でした。
こうした横長の画像が増えてきたのは、
スマホで観る人が
急増したからでしょうね。
縦スクロールするのって、
割と面倒ですし。
縦に短いと、
その分スクロールしなくて済みます。
忙しい現代人は、
早く下を見たいと思っている人も
多いと思います。
魅せる写真なら別です。
ただ、例えば上記のYahoo!ニュースのような
サムネイルのカテゴリ画像は、
そこまで大きくする必要はないですよね。
記事のタイトルが早く見えた方が、
ユーザーは嬉しいわけです。
当ブログのサムネイルも大幅にサイズや表示を修正しました！
デザインは、
時代とともに進化しています。
「このブログも変えなきゃ！」という
焦りに似た感情とともに、
早速大幅に修正しました！
最新記事
以前は、下のように
サムネイルを正方形にしてました。
昔は正方形の写真は
「インスタチックでいいな」
と思ってたんですが…
ただ最近、
この5列の正方形のデザインを
変えたい願望がありました。
横幅が狭いので
タイトルのフォントサイズも
小さくせざるを得なかったし。
どのようにカスタマイズしたかというと、
「最新記事」はこうなりました。
PCは、3列✕2段（6記事表示）です。
タイトルの読みやすさを考えて、
3列にしました。
割合を33.333%にして、
レスポンシブデザインに対応してます。
また、分かりやすく「New」という
ラベルを付けました。
スマホは前と同じ2列です。
同じく横長にして、
新しくラベルをつけました。
関連記事
5列で正方形だった「関連記事」も、
PCは3列✕2段（最大6記事）表示にしました。
ラベルは最初「おすすめ」としてましたが、
おすすめが6つも表示されているウザイので
カテゴリ名を表示させました。
カテゴリ名は下のコードで
表示させることができます。
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
スマホは「最新記事」と同じ2列なので、
画像は割愛します。
人気記事ランキング
以前の「人気記事ランキング」は
5列✕2段（10位表示）でした。
これを、4列✕3段（12記事表示）にしました。
ブログトップページ
ブログのトップページに表示されていた
サムネイルも横長にしました。
以上が、画像を横長にした際の
大きな修正点です。
あと、最新記事・関連記事・人気ランキング
PCでは3列にしたことで、
タイトル文が横に広がりました。
そこで、フォントサイズを
大きくして太字に変えました。
あと、PCのサイドバーですが、
ひとまずPCのみの表示なので
正方形のままにしています。
ユーザー視点で
ウェブサイトやブログを見ると
いろいろ気付きがありますね！
サイトの精度が上がる
今年2018年の1月中旬から
当サイトのカスタマイズを結構やってます。
簡単に変更できないものもあり、
ここ数日は以前作ったCSSを
一からやり直したりをしてました汗
また、サムネイル画像を
変更（以前より大きく）するために
プラグインRegenerate Thumbnails」で
サムネイルを新たに作成してみました。
しかし、何度やっても
うまくアップできないものがあり、
結局知恵を働かせ、
別の場所から持ってきて対応しました。
もろもろここで書ききれないほど
結構裏で時間を費やしました。
しかしその結果、
表からは見えない多くの部分が
かなり整理されて精度が上がりました。
こうした積み重ねが、
ブログを読んで下さってる方や
Googleにも評価されていくと信じてます！
〜終わりなき探求の旅は続く～
自分史上最高の人生を創ろう！
…マジでカスタマイズも終わりなき探求の旅、笑
コメントを書く