【WordPress/stingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
| 更新: 2024/02/16 | 2318文字
今回は、管理人のこのサイトを使って、『記事一覧のタイトル表示場所をPC/SPで切り替えて、スマホで見やすくする』というのを実践してみたいと思います。 一覧のページが見にくいと、ページ内の回遊性が下がったりして、ユーザーにじっくりサイトを見てもらうのが難しくなります。さっそくサイトを調整してみます。
目次
もとの状態確認と、管理人のサイトで『スマホでちょっと見にくい』と感じたところ
使ったテーマはstingerで、アメブロなどにもある『サムネ画とタイトルがスマホでも横に並ぶタイプ』
管理人がこのサイトに使っていたのは、『WordPressテーマstingerの昔のバージョンを改造したテーマ』です。 最新のバージョンですけど、このテーマでは基本的に『スマホでみたとき、サムネイルとタイトル・その他情報が並ぶ』という形になります。
これは、サムネイル左右の位置が違いますが、アメブロ スマホ版などにも近いレイアウトですね。 しかし、『クリックしやすいサムネイルが右側にあるので、右手で片手操作しやすい』という特徴があります。stingerはタイトルが少し長ければ、『右手で片手操作のとき、一覧ページのリンクが押しやすい』といえます。
管理人のstinger改造テーマ:タイトルが少し長いと、改行が増えてかなり見にくくなる
このサイトをスマホでみたときは、こんな感じです。改造で『文字の大きさ少しアップ・サムネイル画像拡大(functions.php弄ればできるよ!)』を行ったのはいいのですが、スマホでも上記の2列レイアウトというのが災いして、長いタイトルのときは非常に見にくいという状況になってしまいました。
右手片手操作&親指タップはできるとはいえ、タイトルが読みにくいので回遊性が下がっていると推測しています(実際、他のサイトよりPCユーザーが多い)。この部分を、『記事一覧部分のタイトル出力方法を切り替えて、見やすくする』というのが思いつきました。
stinger記事一覧・スマホビューを、タイトル出力位置を変えて見やすくする
もとのコード:dt/ddが横並びのボックスになっていて、片方が画像・もう片方がタイトル
昔のstingerの、記事一覧を出すPHPファイルです。タイトルが片方によって、長いと見にくくなる理由は、『定義リスト内のdt/ddが横並びのボックスになっていて、スマホ・PC共通なので、横幅が半分しか使えない』ということによります。
PCでは横幅があるので気になりませんが、スマホ時だと横幅の半分ぐらいしか使えないので、記事タイトルが長いときはかなりきついです。
対処:一覧時のタイトル出力位置を、PHP条件分岐で切り替える
そこで、PHPの条件分岐(if)を使って、狭い2列ならびボックスの上、横幅をフルに使える位置にタイトルを出します。if(is_mobile())というところが、モバイルで表示するほうです。!がついているのは否定の演算子で、『モバイルじゃない』ということです。こちらは、通常のボックス内に出します。
このほかにも『CSSで、メディアクエリ横幅が狭いデバイスのときは、display:none;』というような方法があります(サーバーがphp使えないときはCSSでやります)。
スマホビューのタイトル出力位置を変えた結果
このように、タイトル部分で横幅をフルに使えるようになり、読みやすくなりました。また、タイトルが横すべてに広がっているので、片手操作時に、右手・左手どちらでも押すことができます。空いたところには、初期状態ではスマホ時display:none;で出ていなかった抜粋文字を出しました。
条件分岐につき、横幅のあるpcレイアウトでは、そのまま横並びボックスで出ます。
さらに上のマークアップ(タグの意味)
元の状態のマークアップだと『dtにはいった画像を定義語として、それをタイトルやインフォメーションで説明する(dd)』という感じなので(dl/dt/ddには定義リストという意味があります)という形になるので、位置がかわると、厳密なマークアップからは外れるかもしれません。
気になる場合は『他のボックス要素を作って、同じCSSを適応させる』というように対応すると良いでしょう。
あとがき・まとめ
- スマホで一覧ページが見にくいと、サイト内回遊性が下がる
- stinger改造テーマは、単純に一覧タイトル文字を大きくすると、スマホで見にくくなる
- タイトルの出力位置を、PHP分岐を使って変えられる
- スマホの場合は横幅をフルに使える位置にタイトルを出力
- 厳密なマークアップにするときは、定義リストじゃないボックスを使う
今回の件をまとめると、こんな感じかと思います。googleモバイルフレンドリーテストでは問題なくても、人間が見たらちょっと見にくいポイントだったので、直せてよかったと思います(やるのはgoogleのためではなく、読み手のためです)。
みなさんも、pcは問題ないけどスマホ表示で気になるところがあったら、条件分岐もうまく使ってみていただければと思います。