wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/05/01

こんにちは、管理人@SS_mshpです。

今回は、管理人のこのサイトを使って、『記事一覧のタイトル表示場所をPC/SPで切り替えて、スマホで見やすくする』というのを実践してみたいと思います。

一覧のページが見にくいと、ページ内の回遊性が下がったりして、ユーザーにじっくりサイトを見てもらうのが難しくなります。さっそくサイトを調整してみます。

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

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

管理人がこのサイトに使っていたのは、『ワードプレステーマ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は問題ないけどスマホ表示で気になるところがあったら、条件分岐もうまく使ってみていただければと思います。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - サイトのモバイル対応 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい

今回は、スマホ対応や管理をしやすくするためにレスポンシブにしたはいいけど …

【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。

今回は、fc2ぶろぐの検索タグを、スマホ向けで使える簡単な方法を行ってみ …

【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応

今回は、WordPress(4.9などの新しいバージョン)の管理画面で、 …

【WPの仕組み】スマホとかに対応するレスポンシブ化(デバイスに応じてレイアウト変動)ってどうなってるの?

今回は、よくある疑問『wordpressのスマホ対応とかレスポンシブの仕 …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

お知らせ:楽曲受付サイトをレスポンシブ・スマートフォン対応にしました。しなかった場合考えられるリスクは?効果は?

今回は音楽制作ではなく、管理人がお仕事サイト(アトリエss)をスマートフ …