wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

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

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

   

こんにちは、管理人@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サイト制作 【タグ】 -

Message

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

  関連記事

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もS …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじ …

ワードプレスサイトの独自ドメイン解除方法

今回は、以前『ワードプレスに独自ドメインを設定する方法』を書きましたが、 …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …