『LION MEDIA』PCとスマホでは見え方はどう違うの?

『LION MEDIA』PCとスマホでは見え方はどう違うの?

当ブログでも『LION MEDIA(ライオンメディア)』を使っていますが、記事の作成やカスタマイズ設定などはPCでの作業になります。

3月27日(2018年)にGoogleさんから「モバイルファーストインデックスを開始します」と発表されました。やはり意識していかないといけないのかなぁと思い、PCとスマホではどのように見えるのか検証してみました。

 

スマホでの配置はどうなるの?(2カラム)

当ブログは、アーカイブ・投稿・固定ページのすべてを2カラムで設定しています。

 

その他の設定は以下のとおり。

  • 「TOPピックアップ記事」設置あり
  • 「TOPランキングボックス」の設置あり
  • ウィジェットは、「固定サイドバーエリア」「左フッターエリア」「中央フッターエリア」「右フッターエリア」に設置

 

PCの画面
クリックすると大きくなります。

 

スマホプレビューで見てみるとこんな感じに。

スマホの見え方

 

 

スマホ・タブレットでの表示の順番

  1. アーカイブ記事
  2. 通常サイドバーエリア
  3. 固定サイドバーエリア
  4. TOPランキングボックス
  5. TOPカテゴリ最新記事ボックス(設定している場合)
  6. 左フッターエリア
  7. 中央フッターエリア
  8. 右フッターエリア
  9. コピーライト

TOPピックアップ記事は、スマホ・タブレットでは表示されませんでした。

 

その他の特徴

アーカイブ記事

PCでは2列表示だったものが、1列表示に。そして「続きを読む」ボタンが表示されました。

スマホアーカイブ記事

 

TOPランキングボックス

TOPランキングボックス(スマホ版)

 

ランキングボックスの表示は、横にスクロールする形になります。

ランキングスクロール

 

PCとスマホでの表示サイズを比較してみると、同じサイズでした。横スクロールじゃない方がいいのになぁ・・・。

ランキングボックスサイズの比較

 

TOPページ以外

投稿ページ

投稿ページの表示順は次の通りです。

  1. 記事
  2. 投稿者
  3. 関連記事
  4. 通常サイドバーエリア
  5. 固定サイドバーエリア
  6. カテゴリーの最新記事
  7. 左フッターエリア
  8. 中央フッターエリア
  9. 右フッターエリア

 

パンくずリストは横にスクロール。

スマホ 投稿ページ パンくずリスト

 

関連する記事とカテゴリ最新記事の表示はこんな感じ。カテゴリ最新記事は2列表示になっていました。

スマホ関連記事とカテゴリー記事

 

固定ページ・アーカイブページ

固定ページ、アーカイブページ(年月別・カテゴリー別)の表示順。

  1. 記事
  2. 通常サイドバーエリア
  3. 固定サイドバーエリア
  4. 左フッターエリア
  5. 中央フッターエリア
  6. 右フッターエリア

 


いかがでしたか? 思っていたイメージ通りでしたか?

PCで作業をしていると、いろんなものを詰め込み過ぎてしまう傾向があるので、やり過ぎるとスマホで見るのはしんどいなぁってことがわかりました。反省です。少しずつですがスマホを意識しつつ、作業していこうと思います。

広告