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

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

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

スマホでの配置はどうなるの？（２カラム）

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

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

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

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

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

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

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

その他の特徴

アーカイブ記事

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

TOPランキングボックス

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

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

TOPページ以外

投稿ページ

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

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

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

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

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

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

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

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

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