【WordPress/stingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする

投稿：2018/04/12｜ 更新： 2024/02/16 ｜ 2318文字

今回は、管理人のこのサイトを使って、『記事一覧のタイトル表示場所をPC/SPで切り替えて、スマホで見やすくする』というのを実践してみたいと思います。 一覧のページが見にくいと、ページ内の回遊性が下がったりして、ユーザーにじっくりサイトを見てもらうのが難しくなります。さっそくサイトを調整してみます。

1 もとの状態確認と、管理人のサイトで『スマホでちょっと見にくい』と感じたところ
- 1.1 使ったテーマはstingerで、アメブロなどにもある『サムネ画とタイトルがスマホでも横に並ぶタイプ』
- 1.2 管理人のstinger改造テーマ：タイトルが少し長いと、改行が増えてかなり見にくくなる
2 stinger記事一覧・スマホビューを、タイトル出力位置を変えて見やすくする
- 2.1 もとのコード：dt/ddが横並びのボックスになっていて、片方が画像・もう片方がタイトル
- 2.2 対処：一覧時のタイトル出力位置を、PHP条件分岐で切り替える
3 スマホビューのタイトル出力位置を変えた結果
4 さらに上のマークアップ（タグの意味）
5 あとがき・まとめ

もとの状態確認と、管理人のサイトで『スマホでちょっと見にくい』と感じたところ

使ったテーマはstingerで、アメブロなどにもある『サムネ画とタイトルがスマホでも横に並ぶタイプ』

管理人がこのサイトに使っていたのは、『WordPressテーマstingerの昔のバージョンを改造したテーマ』です。最新のバージョンですけど、このテーマでは基本的に『スマホでみたとき、サムネイルとタイトル・その他情報が並ぶ』という形になります。

これは、サムネイル左右の位置が違いますが、アメブロスマホ版などにも近いレイアウトですね。しかし、『クリックしやすいサムネイルが右側にあるので、右手で片手操作しやすい』という特徴があります。stingerはタイトルが少し長ければ、『右手で片手操作のとき、一覧ページのリンクが押しやすい』といえます。

管理人のstinger改造テーマ：タイトルが少し長いと、改行が増えてかなり見にくくなる

このサイトをスマホでみたときは、こんな感じです。改造で『文字の大きさ少しアップ・サムネイル画像拡大（functions.php弄ればできるよ！）』を行ったのはいいのですが、スマホでも上記の2列レイアウトというのが災いして、長いタイトルのときは非常に見にくいという状況になってしまいました。

右手片手操作＆親指タップはできるとはいえ、タイトルが読みにくいので回遊性が下がっていると推測しています（実際、他のサイトよりPCユーザーが多い）。この部分を、『記事一覧部分のタイトル出力方法を切り替えて、見やすくする』というのが思いつきました。

stinger記事一覧・スマホビューを、タイトル出力位置を変えて見やすくする

もとのコード：dt/ddが横並びのボックスになっていて、片方が画像・もう片方がタイトル

昔のstingerの、記事一覧を出すPHPファイルです。タイトルが片方によって、長いと見にくくなる理由は、『定義リスト内のdt/ddが横並びのボックスになっていて、スマホ・PC共通なので、横幅が半分しか使えない』ということによります。

PCでは横幅があるので気になりませんが、スマホ時だと横幅の半分ぐらいしか使えないので、記事タイトルが長いときはかなりきついです。

対処：一覧時のタイトル出力位置を、PHP条件分岐で切り替える

そこで、PHPの条件分岐（if）を使って、狭い２列ならびボックスの上、横幅をフルに使える位置にタイトルを出します。if(is_mobile())というところが、モバイルで表示するほうです。！がついているのは否定の演算子で、『モバイルじゃない』ということです。こちらは、通常のボックス内に出します。