【HUGO】Mainroadのリストページのカスタマイズ

HUGO
【HUGO】Mainroadのリストページのカスタマイズ

スマホ版での記事一覧ページでサムネイル画像が極端に小さいという問題がありました。
その問題を解決すべくテーマに追加CSSを加えてカスタマイズしてみました。

カスタマイズの経緯

当サイトは、モバイル端末・PCでプレイ可能な「第五人格」というゲームの攻略情報がメインコンテンツです。

第五人格はスマートフォンでプレイしている人のほうが多いため、
必然的に攻略情報を調べる人もスマートフォンユーザーが多くなります。

そのため、当サイトへのアクセスも全体の約8割がスマートフォンによるものです。

そんな状況の中で、スマートフォン表示での記事一覧のサムネイルの画像がとても小さいという問題がありました。

修正前

このしじみ大のサムネイル表示をなんとなしたいと思います。

カスタムCSSで修正

現在使っているテーマ「Mainroad」にカスタムCSSを追加していきます。

私の環境ではカスタムCSSは、
static > css > custom.css
という配置にしています。

/*
リストページ
(画像が小さすぎる点の修正)
*/

/*画像を横幅いっぱいにする*/
figure.list__thumbnail{
  max-width: 100%;
}

/*以下スマホにのみ適用されるCSS*/
@media only screen and (max-width: 750px) {
/*リード文の回り込みを解除*/
  figure.list__thumbnail{
    float: none;
    margin-top: 10px;
  }
  /*デフォルトのCSSを上書きするための記述
  （これがないと画像サイズが70%位までにしかならず不格好）*/
  figure.list__thumbnail img{
    max-width: 100%;
  }
}

今回はPCの表示はデフォルトのままキープしておきつつ、スマホ版の表示のみを変更したいので、
スマホ版の時のみサムネイルの左側にリード文が回り込まないようCSSに記述しています。

修正後

修正に伴う微調整も加えた結果、以下のようになりました。

修正後

PC表示はほぼ変化せず、スマホ版だけ画像が大きくなりました。

変更後、一度に表示できる記事数は3から2に減りましたが、サムネイル画像の視認性がよくなったためユーザーの興味を引くデザインになったと思います。

最後に

サイトの回遊数を上げようと、デザインにも手を付け始めました。

効果があるといいな。

関連記事