【wordpress】スマホのキャプチャ画像のサイズを良い感じに調整する方法

ネットサーフィン中に他の方のブログを見ていると、たまにスマートフォンで撮影したキャプチャ画面画像が記事コンテンツの横幅いっぱいになってしまっていて非常に見づらいなと感じてしまう時があります。

大きい方が見えやすくて良いは良いのですが、大きい方がいいに越したことがないというわけではなく、画像サイズがでかすぎて高さが出てしまい、ユーザーに無駄にスクロールをさせてしまうことになってしまいます。これでは記事を読んでいる最中にスクロールに疲れてしまって離脱されかねません。

そこで今回は、 WordPress で取り込んだスマホのキャプチャ画像をブログの記事内でいい感じに表示するやり方をご紹介させていただきます。

Index

レイアウトのBefore / After

これからご紹介するやり方を取り入れてもらえば、PC上で大きく表示されてしまう画像がいい感じのサイズ感になります。プラスアルファでスマートフォンのキャプチャーですよというわかりやすいCSSレイアウトも加えています。

Before

After

wordpressのスマホのキャプチャ画像をいい感じにする方法

それでは実際に導入してみましょう。少しだけコードを触ることになりますが、コピペでものの数分で終わります。

PCで閲覧されたときに画像サイズを縮小する

まずは下記のコードをWordPressテーマのstyle.cssに追記しましょう。

@media (min-width: 769px) {
  img.size-sp-cap {
    width: 50%;
  }
}

このコードでは、「PCのブラウザ幅で閲覧された際に画像を記事コンテンツ幅の50%にして表示させる」という設定をしています。

次に、いつも通り WordPress のビジュアルエディタ画面からメディアを追加で画像を記事内に挿入します。記事内に画像が貼り付けられたら、今度はテキストエディタ画面に切り替えて、挿入した画像のタグ部分を探します。

<img class="aligncenter size-full wp-image-825" src="https://n-asterisk.net/wp-content/uploads/2019/08/cap-1.png" alt="" width="1318" height="939" />

このブログではこのようなタグになっています。このタグのclass内に先ほど CSS に追加したクラス名（size-sp-cap）を追加しておきます。

<img class="aligncenter size-full wp-image-825 size-sp-cap" src="https://n-asterisk.net/wp-content/uploads/2019/08/cap-1.png" alt="" width="1318" height="939" />

これでサイズの調整は完了です。

プラスアルファのデザインを追加する

もう少しスマホっぽいデザインにするためには、先程のcssを追加する際に下記のようにすると良いでしょう。

@media (min-width: 769px) {
  img.size-sp-cap {
    width: 50%;
    // ここからデザイン用・色は自由に変えてください
    border: 5px solid #333;
    border-bottom: 42px solid #333;
    border-top: 20px solid #333;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ccc;
  }
}

これで PC でスマホキャプチャ画面の画像を表示した時は、先程のようなスマホの本体のようなレイアウトになっているはずです。