【WordPress】モバイル用のフロントページを整備

最近、ふとスマホで自分のページを見ていたら、驚愕の事実が判明しました。
なんと、サムネイル2列表示のつもりで、表示していたのに、スマホで見ると1列になっているではないか。

見づらい。。。それ以上に、デザイン性がゼロ。
デザインは、ただの綺麗さではなく、信頼性も備えているため、UI・UXが自分が思い描いているものになっていないと気づいた際のショックは大きかったです。

おそらく。テーマでもともとあるレスポンシブ設定と、その後CSSに書き込んだコードが絡まり、変な表示になってしまった模様。これを機に細かいコードや表示を見直そうと、今回変更した点を備忘録がてらまとめます。

スポンサーリンク
スポンサーリンク

モバイルのサムネイルが2列入っていない

以下が問題のサイトの見た目。PCサイトではしっかり2つのサムネイルが並んでいるのに対し、中途半端に左寄りになり、1つの記事のみ表示されている。

モバイル版の見た目(1列表示になってしまっている)

mobile.cssにコードを記入

今回のポイントはPC版は問題なく表示されているということ。
そしてPC版の表示を壊さずにモバイル版のみ調整したい。

そんなときはモバイルのスタイルにだけ影響を及ぼす。mobile.cssに変更点を記入する。

原因はエントリーカードがでかくて2列入らなかった

今回の原因はずばり、「エントリーカードの箱(タイトル+アイキャッチ画像+内容の抜粋が表示されているボックス全体」が大きくて、2つのカードが1列に収まらず改行されていたのが原因でした。

以下のコードの幅、もしくはMargin(余白)を小さくすることで、2列表示に戻りました。
具体的にはMarginの左右をPC版の10pxから5pxに変更しました。

なお、後ろにImportantとつけているのは、このコードの優先度を上げたいからです。


変更後の見た目。見事2列に復活。

スマホは画面が小さいから本文抜粋を消したい

これはあったほうが良いのか、ないほうが良いのかわかりませんが、個人的にスマホは画面が小さいので、細かい文字が並んでいると疲れてしまう。

というわけで、無事サムネイルが2つに戻ったあとに、本文の抜粋もスマホだけ非表示にしてみたかったのです。以下を同じくmobile.cssに追加。

サムネイルタイトルの行間を揃える

その後、サムネイルのタイトルが改行されると変に行間があったので、以下のコードで行間を調整。line-heightの X pxの数字をいじるとそれに合わせて行間が整いました。

最後にもう一度エントリーカード全体の大きさ調整


完成形がこちら

  • タイトルをモバイル用に縮小し行間を調整
  • エントリーカードを小さくし2列表示
  • 本抜粋を非表示

抜粋記事を残すけどモバイル用にフォントを調整

今回は試しに抜粋無しにしましたが、場合によってはあったほうが見やすいかもしれません。
しかし、タイトルとは区別したい、PCバントも区別したい場合は以下のコードを使用。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする