Simplicityのモバイル表示時の記事一覧をはてブロとSTINGERを足して2で割った感じにカスタマイズしてみた

前回に続きWordPressテーマ：Simplicityの話ですが、モバイル表示時の記事一覧をちょっとカスタマイズしてみました。

サムネイルを小さくして記事タイトルをサムネイルの右側に回りこむようにしたのと、その他もろもろイジってあります。

▼左が変更後で右が変更前。

※記事タイトルに「はてブロとSTINGERを足して2で割った感じ」なんて入れてますが、全然ちげぇよ！ってツッコミはなしでお願いしますm(_ _)m

今まではトップページのファーストビューに1記事しか入らなかったんですが、なんかそれもちょっと寂しいので、せめて2記事くらいは入るように前からしたかったんです。

Simplicityのフォーラムでも「トピック：スマホ・トップ画面一覧の表示について」というのがありましたし、もしかしたら需要があるかも知れないのでcssコード貼っときますね。

前提としては、テーマカスタマイザーで

• 「完全レスポンシブデザイン」にしていない
• 一覧リストのスタイルは「サムネイルカード（デフォルト」

というのがあります。

完全レスポンシブにしていると今回修正するmobile.cssは適用されません。

一覧リストについては、他のを試してないのではっきりとは言えませんが、たぶん適用されないor表示が崩れると思います。

モバイル表示時の記事一覧カスタマイズ方法

子テーマのmobile.cssに以下コードを貼り付けます。
これだけです。

記事一覧に区切り線も入れるなら

あと、元々このブログでは記事一覧に区切り線を入れてますが、同じように区切り線も入れる場合は以下コードも貼り付けます。

モバイル表示時だけで良ければmobile.cssに貼ってください。

パソコン表示・モバイル表示の両方に区切り線を入れるならstyle.cssの方にだけ貼り付ければ大丈夫です。

ちなみにこれは「トップページやカテゴリの記事リストに境界線を入れたい」をそのまま使わせていただきました。

補足や解説

子テーマcssだけでの対応

今回のカスタマイズは子テーマのcssだけで行なっていますので、Simplicityのアップデートをしても影響を受けません。

PHPや親テーマのcssを直接いじればもう少しコード量は減らせると思いますが、アップデートのたびに修正し直すのは面倒ですからね。

解像度440px以下にのみ適用

記事一覧のカスタマイズは、メディアクエリ(@media～)指定で440px以下の場合にだけ適用させるようにしました。

mobile.cssに入れるんだからってことで初めはメディアクエリを指定しなかったんですが、それだとスマートフォンを横画面表示したとき（たぶんタブレット表示時も）に残念な感じの表示になってしまったので。

それなので横画面（またはタブレット）での表示は従来通りです。

そもそも、もともと横画面ではサムネイル右にタイトルや本文抜粋が回りこみますしね。

ちなみになんで440px以下にしたかっていうのは、親テーマ側にあるnarrow.cssのメディアクエリで指定されてる最小のものに合わせたためです。

本文抜粋や「続きを読む」を非表示にする場合

一記事の縦幅をなるべく低くしたいとの思いで今回のカスタマイズをしましたが、本文抜粋や「続きを読む」はフォントを小さくする等しただけで表示自体は残しました。

それぞれ表示を消したい場合は、本文抜粋なら.entry-snippet、「続きを読む」なら.entry-read a に display:none を指定すれば消せます。

StingerやGashのようなシンプルな記事一覧を目指すなら2つとも非表示でもいいかもしれません。

感想

そんなに時間掛からないだろうと作業を始めたはいいものの、実際に完成するまでトータル3時間くらいかかりました(笑)

でも時間をかけただけあって仕上がりにはそれなりに満足。

それにしても、cssの基本的な知識もないまま手探りでやったもんだから無駄に時間が掛かり過ぎな気がします｡｡｡

ちゃんと勉強したらもっと複雑なカスタマイズも短時間でできるようになるんですかね～。

本でも買ってみようかな｡｡｡