ratio_3_2 のカスタマイズ方法

ブログ記事一覧ページに表示されるアイキャッチ画像を大きく表示する方法【baserCMS ratio_3_2】

ブログ記事一覧ページに表示されるアイキャッチ画像を大きく表示する方法【baserCMS ratio_3_2】
に引き続き、今回も画像の調整方法をご紹介いたします。酷似する部分がありますので、前回の内容を読まれてからご覧ください。

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

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

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

変更前(デフォルト)

http://ratio32-baser.cms-skill.net/news/​ (デモサイト)
eyecatchdefault.png

変更後

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

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

eyecatchafteripad.jpg

変更前と変更後 スマホ(320×568 縦)から

eyecatchafteriphonese.jpg

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

スポンサードリンク

実践編

前回と同じ様にページのソースから 該当箇所を見ていきます。
eyecatchsource.png
media-left と media-object が、関係しているのが判ります。

早速、レイアウトテンプレート → CSS一覧 → style.min.css を見に行きます。
今回も、custom.css に追記する方法ではなく、style.min.css を直接書き換える方法を取りますので、ソースのバックアップを必ず取ってから作業して下さい。

まずは、media-left をソース内で検索してみると・・・
eyecatchcss1.png
早速ありました。(赤線の部分) これらの数値を変えてみます。

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

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

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

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

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

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

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

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

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

 

デメリット

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

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

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

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

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

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

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

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

対策後

taisaku2.jpg

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

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)


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

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework