新着情報

前回に引き続き、今回も画像の調整方法をご紹介いたします。酷似する部分がありますので、前回の内容を読まれてからご覧ください。

→ ピックアップメニュー画像をスマホ・タブレットで大きく表示させる方法

今回は、ブログ（/news/）記事一覧ページのアイキャッチ画像の大きさを変更する方法をご紹介致します。

変更前と変更後の画像 PCから

変更前（デフォルト）

http://ratio32-baser.cms-skill.net/news/​　（デモサイト）

変更後

http://ratio32.msstyle.jp/news/　当サイト

変更前と変更後 タブレット（768×1024 画面向き縦）から

変更前と変更後 スマホ（320×568 縦）から

特にスマホからでは、アイキャッチ画像が小さく感じるので、本来の役割を果たしていない気がします。

---

実践編

前回と同じ様にページのソースから 該当箇所を見ていきます。

media-left と media-object が、関係しているのが判ります。

早速、レイアウトテンプレート → CSS一覧 → style.min.css を見に行きます。
まずは、media-left をソース内で検索してみると・・・

早速ありました。（赤線の部分） これらの数値を変えてみます。


{width:40%;min-width:100px}　にしてみました。もちろん任意の数字を入れることが出来ます。

今回はメディアクエリの指定が無い部分なので、スマホ・タブレット・PC表示全体に影響しますので、バランスを見て40% にしてあります。（CSSの知識があれば、個別に設定できます）
 

記事一覧を呼び出している全てのページで適用されます。

デフォルトの状態で説明します。（アイキャッチ画像がある場合）

TOPページ 左下の記事一覧を表示している部分

news/index の記事一覧を表示している部分

サイドメニュー（ウィジェット）で記事一覧を呼び出している部分

記事のアーカイブスやタグなどで表示される記事一覧

関連記事でアイキャッチ画像を呼び出している部分

 

デメリット

記事一覧に15～20 記事以上を設定すると環境によってはページを開くのが重く感じる

→ 画像が大きくなる分だけ読み込むのに時間が掛かる場合があります。その場合は、アイキャッチ画像を圧縮して軽くするなどの対策が必要になります。10記事程度が良いかと思います。

横幅の狭いスマホではアイキャッチ画像の高さを超えて記事の冒頭部分が長くなります。

アイキャッチ画像は大きくなったが、タイトル・冒頭記事が縦に長くなった。

デメリットの対策方法の一つをご紹介します

→ 対策方法は色々ありますが、一つご提案致します。

記事の冒頭文章は要らない？ 魅力的な記事タイトルとアイキャッチがあれば充分！

スマホでは、文字だけが続く長い文章は読まれにくい傾向があります。ですので、魅力的な記事タイトルとアイキャッチ画像でクリックを誘導しましょう。 表示バランスを考慮して横幅の狭いスマホのみ冒頭の表示を消す方法をご紹介いたします。

対策後

例によって記事のソースから 記事の冒頭に関わる部分を探ります。


style.min.css を見に行きますが、今回 制御したい内容はありませんので、custom.css に追加項目として追記します。

 追加コード

@media only screen and (max-width: 411px) {
.media-excerpt{display:none;}
}

画面幅 411px 以下の機種からのアクセスでは、記事の冒頭を表示しない記述です。仮に、一般的なスマホ（縦）で表示させたくない場合は、480px にすればOKです。（当テーマのレイウト設定に合わせて）

以上で当サイトの表示と同様になります。

表示が変わらない時は？

最初からご覧頂いている方は解りますよね^^

ページを更新する （PCからは F5 を押す）

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法

スーパーリロードする （PCから Ctrl ＋ F5 を同時押し Windows）

あなたのサイト訪問者さまのスマホ環境をしっかり認識した上で、設定を行うことが一番望ましいです。　是非ご活用ください(^^)/

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。