AFFINGER5【PCでの表示とスマホでの表示】を別々に設定

AFFINGER5で、「PCでの表示」「スマホでの表示」をそれぞれ設定する方法の紹介です。

以下の内容で解説していきます。

こんな人のお役に立てる記事です。

小豆

パソコンでの表示は問題ないのに、スマホで見ると残念な表示のされ方をするときがある。
これって、なんとかならない？

AFFINGER5【PCでの表示とスマホでの表示】を別々に設定

小豆

PCでの表示はバッチリなのに、スマホで見ると残念。

ブログ記事を書いていると、こんなことってありますよね。

たとえば、こんな感じ。

小豆

そうそう、こういうの。
あと、その逆パターンもあるよね。

スマホで撮影した縦長の写真なんかがそうだね。

大福

スマホでの表示	PCでの表示

画像はクリックで拡大できます

で、今回紹介する方法で設定を行った場合の表示のされ方がこちら。

PCでの表示	スマホでの表示

画像はクリックで拡大できます

「PC」「スマホ」どちらで見ても、とても見やすく表示することができるようになりました。

「PCに表示しない」「スマホに表示しない」の使い方

AFFINGER5には、「PCに表示しない」と「スマホに表示しない」という設定が備わっています。

これらを利用することで、「PC」「スマホ」それぞれでの表示のされ方を分けることができます。

step
1コンテンツ（画像）を2種類用意

「PCでの閲覧時に表示したい画像」と「スマホでの閲覧時に表示したい画像」を用意

小豆

なるほど。
それぞれ別々の画像を用意していたんだね。

その通り。
閲覧時に、PCとスマホでは別々の画像が表示されるように設定しているんだ。

大福

step
2記事内に挿入

用意した2種類のコンテンツ（画像）を、ブログ内に挿入

step
3記事装飾を設定

記事装飾ボタンが表示されていないときは

PCに表示しないボックス　スマホに表示しないボックス　のボタンが表示されていない場合は、以下の手順でボタンを追加します。

AFFINGER5管理　→　投稿・固定記事　→　管理画面　→　テキストエディタで非表示にしたいボタン

横長のテーブル（表）をスマホでも見やすく表示する方法

小豆

スマホで見づらいと言えば、横長の表もそうだよね。
ってことは、スマホ用には縦長の表を別途作って表示すればいいってことか！

確かにそれでもいいんだけど、ちょっと面倒だよね。
テーブル（表）の場合には、スクロール機能を使うと便利だよ。

大福

テーブル（表）のスクロールに関しては、以下の記事で詳しく解説しています。

まとめ：記事作成後は必ずスマホでの見え方を確認しよう

PC表示では全然問題ないのに、スマホではめちゃくちゃ見づらい。

こんなことって、けっこうあります。

ちょっと面倒でも、記事作成後は必ずスマホでの見え方もチェックしたいですね。

大福

ちなみにこのブログの場合は、ユーザーの7割はスマホからの閲覧だよ。

【当ブログ限定】AFFINGER6購入オリジナル特典

当ブログを通して「AFFINGER6」を購入していただくと、以下の特典をお付けしています。

どれもブログのスタートダッシュを強力にサポートしてくれる内容だよ。

大福

以下のページで詳しく紹介していますので、ぜひご覧ください。

オリジナル特典紹介ページへ