>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法

PCとスマホで画像表示を変更させる方法ー必要な追加CSSを備忘録としてー




ワードプレスの投稿をするときに、「この画像は、PCでは見やすいけど、スマホにすると見づらいなぁ・・・」なんて思うことがあるのではないかと思います。

例えばこんな画像とか

この画像は、パソコンでは見やすいけど、スマホで見ると、文字が小さくて見えなかったんです。

ですので、この画像はスマホでは表示をこのようにしました。

スマホとPCで変えた方が見やすくなるパターンって多いのではないかと思います。

今回は、このように、スマホとPCの画像表示を変える方法を分かりやすく解説します。

パソコンが苦手だし、自分ではちょっとできないという方は、WordPressスポットサポートというサービスがあるので、ご活用ください。

【スポットサポート】WordPressに関する「困った!」「助けて!」を解決するサービス

追加CSSでディスプレイサイズによって表示・非表示の指示を入れる

追加CSSで指示と言うと難しく感じますが、作業は単純です。

  1. CSSをコピーします
  2. WordPressのダッシュボードからカスタマイズ→追加CSSにCSSをペースト

追加CSSを行うときは、ワードプレスに何か起こっても大丈夫なようにバックアップを取ってから行うようにしてください。
» WordPressのバックアップをプラグインを使用せずに行う方法

CSSをコピーします

まずはこのCSSを使います。(このままコピーして使用してOKです)

/*PCの場合*/
.pc	{ display:inline!important; }
.mb	{ display:none!important; }

@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc	{ display:none!important; }
.mb { display:inline!important; }
}

このCSSの意味ですが、横幅が768px以下の画面の場合、スマホ表示になるようにしています。

WordPressのダッシュボードからカスタマイズ→追加CSSにCSSをペースト

WordPressのダッシュボードから、「外観」にマウスを合わせて「カスタマイズ」を開きます。

カスタマイズを開くとこのようなメニュー項目が表示されますので「追加CSS」をクリックしてください。

わたしが使用しているWordPressテーマは『STORK19』なので、このようなメニューになっています。

追加CSSにコピーしたCSSを貼り付けしてください。

貼り付けしたら必ず「公開」をしてください。

これで、準備はOKです。

次は、投稿画面から必要なところに要素を設置します。

WordPress投稿エディターで画像にclassを追加

PCでのみ表示・・・「.pc」のクラスを追加。
スマホでのみ表示・・・「.mb」のクラスを追加。

画像は、スマホ用とPC用をご準備ください。

そして、入れたい場所に両方の画像を入れ込みます。

右側にあるブロックの設定から「高度な設定」があるのでそこから「追加CSSクラス」を入れます。

  • PCのみは「pc」
  • スマホは「mb」

これで、PCの表示の時に出てくる画像とスマホだけで出てくる画像と設定ができました。

プレビューで確認したり、記事更新をしたりして、実際の表示を確認してみてください。

ここでは、画像をスマホのみPCのみ表示指示をかけましたが、これは文章でも他ブロックでもなんでも可能です。

結構、いろんなパターンで使える方法だと思いますので、チャレンジしてみてください。

まとめ

今回は、スマホとPCの画像表示を変える方法を分かりやすく解説しました。

コピペ可能なCSSを入れて、あとは、投稿にclassを入れるだけという簡単な方法になります。

誰でも見ながらチャレンジしてもらったらできるかと思います。

ですが、どうしても自分で作業することに不安がある方は、「WordPressスポットサポート」というサービスがありますので、ぜひご活用ください。

【スポットサポート】WordPressに関する「困った!」「助けて!」を解決するサービス

シェアしてね♪


ブログ記事を書いても一向に成果が出ない!
心が折れそうな思いをするのはもう終わりにしませんか?


登録は無料!解除はいつでも自由! 興味のある方はご登録くださいね!!


ABOUT US

ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

詳しいプロフィールはこちら>>