WordPressで画像を挿入するコツってあるの？？ どうも、Linです。サライの空に、です。 誰でも簡単にブログ記事をポストできる WordPress。 2013年頃からお世話になってきて、累計で2,000記事以上を執筆し、おそらく4,000枚以上の画像を挿入してきました。 そして、ついに今日、その経験の中で編み出した WordPress の記事に画像を挿入する時のコツ を書いておこうと思います。 いきなり天からコツが降ってきて記事を書きたくなってしまったのです。 このコツさえ知っていれば、 初心者の方でもそれっぽく WordPress の記事に画像を挿入できるようになる と思います。
WordPressで画像を挿入する6つのコツ
ぼくが生涯で4,000枚ぐらい挿入し続けて見出したコツは次の6つ。コツ1. 横並びで画像を挿入したい時はギャラリー
画像を挿入する時にちょっとやりたくなるのが、 横並びに画像を挿入する だと思います。 内容によっては、1枚の写真だけではなく、複数の写真を同時に並べた方がわかりやすく説明できることがありますからね。 そんな横並びに画像を挿入したい時に使えるのが ギャラリー です。 詳しくは「WordPressのギャラリーの使い方」を読んでいただきたいのですが、ギャラリーを使うと、こんな感じで綺麗に並べて表示できます↓ [gallery link="file" size="full" ids="5133,5132,5131,5130,5129,5128" orderby="rand"] ただし、スマートフォンでの表示には注意。 スマートフォンは縦長表示なので、横に写真を多く並べすぎると、画像1枚あたりの表示が小さくなってしまいます。 スマホ表示を意識してカラム数は少なくて2枚、多くて3枚にしておくべきですね。コツ2. サイズはとりあえず「フルサイズ」
WordPress で画像を挿入する時に選ぶことになるのが「画像サイズ」です。 画像サイズは、テーマによる（functions.phpに記述されている内容）のですが、僕が使っているOlsen Lightというテーマでは- サムネイル
- 中サイズ
- フルサイズ
添付ファイルの表示設定の中の
サイズで調整できますよ。
おすすめはダントツで一番最後の
フルサイズ。
ケチって「サムネイル」や「中サイズ」を選んでしまうと、画質が落ちて画像がぼやけてしまうので要注意です。
「フルサイズ」で挿入するとこんな感じで、
「中サイズ」だとこんな感じ、
一番小さい「サムネイル」だと、
になっちゃいますね。
スマホ表示では問題ないかもしれませんが、PCのスクリーンサイズになると細部がぼやけてしまいます。
僕も初心者時代に師匠から
「まあ、とりあえずフルサイズにしておけよ」
と言われてからその戒律を守ってきましたが、これが案外正しく、問題なく記事を作り続けられています。
コツ3. 圧縮してから画像を挿入する
できればやっておきたいのが、 画像を挿入する前に画像の容量を圧縮する です。 じつは世の中には、画質を落とさずに、画像のメタデータなど余計な情報を剥ぎ落とすことで、容量を圧縮できるソフトがあります。 画像容量を圧縮してからワードプレスの記事に挿入するようにしましょう。 この数KB、MBの圧縮が読み込み速度のコンマ1秒に影響してくるので最前は尽くしておくべきですね。 僕はMacで使えるImage Optimというソフトを使っています。 [blogcard url="https://imageoptim.softonic.jp/mac"] このソフトならば、画像をドラッグ&ドロップしてやるだけで画像の容量サイズを大きい時で50%を、最低でも5%ほど小さくしてくれますよ。
この画像圧縮をするだけで WordPress の記事を読み込む速さが変わってくるので、圧縮に魂を込めます。
コツ4. 画像の元サイズを小さくする
とはいえ、画像圧縮にも限度がありますよね。 もっと画像の容量を小さくしたい場合は、 元の画像サイズ自体を小さくしてしまう という方法がありますよ。 僕は個人的に 横の長さの最大1000pxになるようにサイズ調整していますね。 1000pxの幅でPCのスクリーンでも十分綺麗に表示できます。 そんな画像のサイズの調整で便利で使っているのが Image Tools というMacのソフト。
iMage Tools
カテゴリ: 写真
現在の価格: 無料
コツ5. alt属性はとりあえずキーワードをぶちこんでおく
HTML で画像を表現するときには imgタグを使うことになります。 その img タグの中でもSEOに効くと言われているのが、 alt属性 です。 WordPressの画像挿入画面でいうと、代替テキストという欄ですね。
これは何のことかと言うと、画像を画像として読み取れない人たちのための情報です。
画像が何を表しているのか？を言葉で説明してあげる属性になります。
目の不自由な方にとってもalt属性は重宝されますが、実は Google の検索エンジンのクローラーというロボットもこのalt属性で画像を認識しています。
どんな素晴らしい画像を挿入したとしてもGoogleのクローラーには1mmも響いていないわけです。
WordPress で挿入した画像のalt属性に SEOキーワードを入れれば大丈夫。
検索エンジンにも、目の見えない方にも何の画像なのかわかりやすくなるのです。
この小さなホスピタリティが検索上位表示につながってきます。
しかしながら、このalt属性に大量のキーワードを盛り込みすぎるのはNG。
場合のよってはスパム判定されることがあります。
おすすめは3キーワードまでですね。
長すぎず短すぎず、上位表示を狙うキーワードちょんちょん入れていきましょう。
コツ6. 実寸大を意識した最終サイズ調整
これは最近気づいたことなんですが、 「被写体の実寸大」を意識するといいですね。 写真の被写体のリアルのサイズと、記事表示されるサイズに差異がなければないほど、人間は自然と画像を認識して受け止めてくれるのです。 例えばスマートフォンのキャプチャー画像だったら、そのキャプチャー画像はめちゃくちゃ大きく挿入するのではなく、 大体スマートフォンぐらいの大きさ に微調整してあげましょう。 先ほど WordPress の画像のサイズは「フルサイズ」がおすすめと言いましたが、フルサイズで挿入しまくっていると、 実寸大よりも大きく被写体が写っている画像 が出てきてしまいます。 これでは不自然さの塊なので、画像に写っているものと同じぐらいの大きさに最終調整してあげるといいですよ。 調整方法は画像の4隅をクリックし、ドラッグ&ドロップしてみましょう。
ただこの方法が有効なのは 、
画面サイズが大きいパソコンやタブレットでの表示になりますね。
スマートフォンの表示は小さいディスプレイなので、大抵が画面いっぱいのフルフル表示になります。
PCなどの大きいディスプレイ対策として、「実寸大を意識した最終調整」が効いてくると思います。
