2022.10.06PCとスマホで画像表示を変更させる方法ー必要な追加CSSを備忘録としてーワードプレスの投稿をするときに、「この画像は、PCでは見やすいけど、スマホにすると見づらいなぁ・・・」なんて思うことがあるのではないかと思います。こんな画像とかこの画像は、パソコンでは見やすいけど、スマホで見ると、文字が小さくて見えなかったんです。この画像はスマホでは表示をこのようにしました。スマホとPCで変えた方が見やすくなるパターンって多いのではないかと思います。今回は、このように、スマホとPCの画像表示を変える方法を分かりやすく解説します。記事内の画像や文章などをPCとスマホで表示を変えたい場合は、こちらのプラグインを使うと簡単です。Visibility」WordPressでPCとスマホ表示を切り替える簡単な方法2022.10.30パソコンが苦手だし、自分ではちょっとできないという方は、WordPressスポットサポートというサービスがあるので、ご活用ください。まとめ追加CSSでディスプレイサイズによって表示・非表示の指示を入れる追加CSSで指示と言うと難しく感じますが、作業は単純です。CSSをコピーしますWordPressのダッシュボードからカスタマイズ→追加CSSにCSSをペースト追加CSSを行うときは、ワードプレスに何か起こっても大丈夫なようにバックアップを取ってから行うようにしてください。WordPressのバックアップをプラグインを使用せずに行う方法CSSをコピーしますまずはこのCSSを使います。}}この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スポットサポート」というサービスがありますので、ぜひご活用ください。Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。itRECOMMENDWordPressスキルアップ2022.04.23ブログ画像の引用ルールと正しい引用方法!ブログ初心者は注意が必要!!WordPressスキルアップ2021.12.14ブログ超初心者さんのお悩み「ブログはどうやったら見てもらえる?」の答えはシンプルに一つ。ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル」ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル」ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。1日ゆかブログで使用中のWordPressテーマ誰が使っても美しいデザイン関連記事:『STORK19』を使ってみた評判レビュー!メリットデメリットを解説!無料メールマガジンシークレットサイトを見てみる検索:CLOSECLOSE無料メールマガジンシークレットサイトを見てみるProfileアフィリエイター兼WEB制作マーケターゆかご訪問ありがとうございます!当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。福岡で3人の子供を育てながら、お家でのんびりと個人ビジネスを展開しています。お仕事は、パソコンが苦手な女性起業家さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。●ハンドメイド作家サイト●キーパーコーチの個人ブログ●キーパーグローブECサイト●女性起業家の活動用サイト●スピリチュアル系の方の活動用サイト●協会サイトetc・・・ブログの作り方や書き方も教えています。当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。