| 

サイトに表示される画像(サムネイル)、横長が増えてきた件。サムネイルやサイズを大幅修正しました!

こんにちは!関達也@宮崎⇔東京デュアルライフ()です!

従来、ウェブサイトやブログに載せる写真は、
スマホやデジカメなどで撮影した写真の
縦横比のままでした。

主な縦横比は、
「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にも評価されていくと信じてます!
 
 
〜終わりなき探求の旅は続く~
 
自分史上最高の人生を創ろう!
 
 
…マジでカスタマイズも終わりなき探求の旅、笑

↓関からのお知らせ〜

★あなたの問題や悩みを瞬時に解決!
「関達也の個別コンサルティング」
特別価格で募集中!日程と詳細はこちらから

★関から「人生を変える最新情報やノウハウ」をもらおう!
↓から無料メルマガに登録!
12年以上読まれ続けている関達也の無料メルマガ

★個人の稼ぐ力がついた人が続出!
『年収1000万円 ひとりビジネスの教科書』




  


コメントを書く

この記事の著者 : 関達也
S・マーケティングジャパン株式会社 代表取締役 マイクロプレナー®(ひとり起業家) 「ひとり起業プロデューサー/ライフチェンジクリエイター™/セルフメディア戦略コンサルタント」 宮崎×東京デュアルライフの3子のパパ。起業歴23年。自由になるため起業後、3度のどん底を経験。人間不信からひきこもりになるが、一畳半から1億稼ぎ這い上がり、個人の新しい働き方を提供中。 →さらに詳しいプロフィールはこちら

最新記事

気分良く、仕事ができるコツ

やる気を継続するには、「やらざるを得ない状況」を作るに限る!

関達也の週間つぶやきまとめ【2018/09/10 – 2018/09/16】

【参加無料】宮崎で、追加セミナー&説明会します!

無料の電話コンサルを、10名様にプレゼント!

【無料コンサルプレゼント】どうしてもウェブを活用して成功したい方へ(2018年9月末まで)


人気の記事ランキング