【WordPressの画像】初心者向けの挿入方法や応用設定、サイト収益&集客を改善するコツまで!

WordPressワードプレスの画像について徹底解説します!

WordPressに画像を挿入する方法応用設定について、

初心者にもわかりやすいよう、キャプチャ付きでくわしく説明。

また、WordPressに画像を入れるメリット(利点)や、

画像の圧縮、WebP(次世代画像フォーマット)への対応方法、

かならず知っておきたい画像の著作権の問題などについても解説します。

目次

WordPressの画像はとても重要!

YouTubeで動画のブログ部を始めました。

まず、WordPressなどのWebメディアに画像があたえる影響やメリットについて解説しておきましょう。

サンツォのアイコン画像サンツォ

画像はめちゃくちゃ重要な存在なんだよ!

ユーザーの理解度を高める

画像は、ユーザーがその記事ページに書かれている内容を

より深く、より素早く理解することに役立ちます。

テキストだけでの文字情報だけではなかなか伝えにくいイメージも、

写真・図解・図表などのビジュアル情報を利用すれば一発で伝わりますよね。

画像は文字にくらべて圧倒的に多い情報量を脳に伝えられますし、

記憶としても長く残りやすいというメリットがあります。

ユーザーの滞在時間を長くする

ヒートマップなどの分析ツールで見ると、

ユーザーは文章よりも画像をじっくりと時間をかけて見ていることがわかります。

文字をじっくりと読むことは面倒くさくてストレスになりますが、

写真や画像を眺めることは苦になりません。

画像を上手につかえばその記事ページの滞在時間が長くなり

結果的にユーザーの満足度や、検索エンジンからの評価も向上し、

あなたのWordPressサイトの集客や収益につながります。

記事が読みやすくなる

僕がブログ記事を書く時は、

大見出し(H2)ごとに最低1つの画像を配置するようにしています。

これは長文に区切りをつける箸休め的な効果を狙っているとともに、

文章にテンポをあたえ、スラスラと読みやすくするための工夫でもあります。

どうしても長くなりがちなハウツー系の記事では、

画像などのビジュアル要素を多用することで、読者のストレスを軽減してあげることが大切です。

WordPressに画像を挿入(基本設定)

WordPressとは

それでは実際にWordPressの記事に画像を挿入してみましょう。

本記事では新エディターであるブロックエディタGutenbergグーテンベルク)の操作方法を説明します。

※WordPressの無料テーマである「Cocoonコクーン」を使用しています。テーマによって細かい設定は異なりますが、基本的な操作は同じです。

画像を挿入するブロックを選択

WordPressに画像を挿入するための投稿編集画面を開く

WordPressの投稿編集画面を開きます。

WordPressに画像を挿入するブロックを作る

画像を挿入したい場所に新しいブロックを追加します。

WordPressに画像を挿入するための画像ブロックを選択

するとブロックタイプを選択するウィンドウが表示されますので、「画像」を選択します。

※ここに「画像」ブロックが無い場合は、「すべて表示」をクリックします。すべてのブロックタイプが画面左に表示されますので、「画像」を探してください。

WordPress画像のアップロード

すると3種類の画像挿入方法を選ぶことができます。

  • アップロード
  • メディアライブラリ
  • URLから挿入

今回はこのうち「アップロード」「メディアライブラリ」の2種類の方法を解説します。

新しく画像をアップロードする場合

WordPressにアップロードする画像を選択

「アップロード」を選択すると、フォルダーの選択ウィンドウが表示されるので、アップロードしたい画像が入っているフォルダーを選択します。

アプロードしたい画像を選択し、「開く」ボタンをクリックします。

WordPress画像のアップロード完了

画像が挿入されました。

よめちゃんのアイコン画像よめちゃん

画像の配置(中央、左右寄せなど)、Altテキストについては後ほどで説明するよ!

サンツォのアイコン画像サンツォ

画像サイズが大きいままだとページが重くなるから、あらかじめ横幅800pxlまたは640pxlにしておこう!容量は100kb以下が理想だよ!くわしくはこちら

メディアライブラリから挿入する場合

WordPressのメディアライブラリから表示させる画像を選択

「メディアライブラリ」を選択すると、メディアライブラリが開きますので、

任意の画像を選択して、「選択」をクリックします。

WordPressのメディアライブラリにアップしたい画像をドロップ

ちなみにPC上から画像をドロップすることで、新規画像をアップロードすることも可能です。

よめちゃんのアイコン画像よめちゃん

複数の画像を一度にアップロードすることも可能だよ!

WordPress画像009_画像の挿入が完了

画像が挿入されました。

管理画面から画像をアップロードする

ちなみに、投稿編集画面以外からでも画像はアップロードできます。

WordPress管理画面から画像をアップロード

WordPress管理画面から「メディア」→「新規追加」へと進みます。

メディアのアップロード画面が開きますので、画像をPCなどからドロップするか、

画像が入っているファイルを選択してアップロードしてください。

WordPress画像の編集(応用設定)

WordPress

ここからはWordPressの画像編集(応用設定)について、もう少しだけくわしく解説します。

画像の配置、画像サイズの変更、画像にリンクを設定する方法などです。

画像の配置を変える

画像を配置を「左寄せ」「中央揃え」「右寄せ」などに設定します。

WordPress画像の配置を変更

配置位置を変更したい画像ブロックを選択し、配置設定のアイコンをクリックします。

WordPress画像の配置パターンを選択

表示されたウィンドウから、希望の配置を選択します。

画像サイズを変える

記事に表示された画像のサイズを変更します。

WordPressの画像サイズを変更

サイズを変更したい画像ブロックを選択し、

右カラムメニューから「ブロック」→「画像設定」へと進みます。

よめちゃんのアイコン画像よめちゃん

右カラムメニューが表示されていない時は、画面右上の歯車アイコンをクリックすると表示されるよ!

WordPress画像サイズの設定方法を選択

画像のサイズの指定方法は3つの中から選ぶことができます。

あらかじめ設定したある「画像サイズ」から選ぶ方法、幅・高さを数値で設定する「画像の寸法」、

または25%・50%・75%・100%の縮小率から選ぶことも可能です。

Altテキストを設定する

画像にAltテキスト(代替えテキスト)を設定します。

WordPress画像にAltテキストを設定

矢印の部分に、その画像の目的・意味・内容を入力します。

サンツォのアイコン画像サンツォ

画像のAlt属性の設定は、SEO的にも重要な意味があるんだ!くわしくはこちらで説明しているよ!

画像を削除する

記事に表示させた画像を削除します。

WordPress画像を削除

削除したい画像ブロックを選択し、

「詳細設定」のアイコンをクリックします。

WordPress画像ブロックを削除

「ブロックを削除」をクリックすると、画像が削除されます。

よめちゃんのアイコン画像よめちゃん

あくまで記事内から画像が削除されるだけで、メディアライブラリからは削除されないよ。

画像をトリミングする

記事に表示された画像をトリミングします。

WordPress画像のトリミング

削除したい画像ブロックを選択し、

「切り抜き」のアイコンをクリックします。

WordPress画像のトリミング_ズーム

トリミングの方法には、「ズーム」や、

WordPress画像のトリミング_縦横比

「縦横比」を指定してのトリミングが選択できます。

WordPress画像のトリミング_回転

画像を「回転」させることもできます。

WordPress画像のトリミング_適用

トリミングが完了したら「適用」をクリックします。

画像を横並びにする

WordPrssでは画像を横並びに複数表示することもできます。

WordPressのカラムブロックを選択

ブロックタイプを「カラム」にします。

WordPressカラムブロックのパターンを選択

カラムの表示パターンを選択します。

今回は50:50を選択しました。

WordPressカラムブロックに画像を表示

ブロックが横に2つ追加されますので、それぞれに表示させたい画像を設定します。

WordPressのカラムを使って画像を横並びに配置完了

画像が横並びに表示されました。

WordPress画像とテキストを横並びに配置

ちなみにこのカラムを使えば、テキストなど他のブロックパターンも横並びにできます。

WordPressのギャラリーを使って画像を横並びに配置

他にも「ギャラリー」ブロックを使って画像を横並びに表示させることもできます。

WordPressギャラリーを使って画像を横並びに配置完了

ギャラリーを使って画像を横並びに表示させました。

画像にリンクを設定する

画像にリンクを挿入します。

WordPress画像にリンクを挿入

リンクを挿入したい画像ブロックを選択し、「リンクを挿入」アイコンをクリックします。

WordPress画像にURLを入力

任意のURLを入力し、「適用」をクリックします。

画像にキャプションを設定

画像にキャプションを挿入します。

WordPress画像にキャプションを入力

キャプションを挿入したい画像をブロックを選択すると、

「キャプションを入力」という表示が出るので、ここにマウスを合わせて入力します。

WordPress画像にキャプションを入力完了

画像の下にキャプションを表示させました。

WordPress画像を集客&収益につなげるコツ

パソコンデスク

この章では、WordPress画像をより使いこなし、

あなたのサイトの集客&収益を改善させるためのコツを紹介します。

画像には代替テキスト(Alt)を設定しよう!

WordPressの画像にはかならずAlt属性(代替えテキスト)を設定するようにしましょう。

Altテキストは、もしなんかしらの理由で画像が表示されなかった場合に、代替えで文字情報を表示することができます。

また、視覚障がい者が音声読み上げ機能などでWebメディアを利用する際に、画像の内容を伝えるために役に立ちます。

さらに画像にAlt属性を付与することは、SEO(検索エンジン最適化)対策にもなります。

Altテキストは検索エンジンのクローラーが画像の内容を理解することに役立つとともに、画像検索に表示されやすくなるなどのメリットもあります。

Altテキストは、その画像の目的・内容・意味を正確に記載するとともに、関係のない文言は排除するようにしましょう。

また、装飾目的の画像にはalt属性は付与せず、空白にしてください。

サンツォのアイコン画像サンツォ

画像にAltテキストを設定する方法は、こちらで解説しているよ!

画像はなるべく軽く(圧縮)しよう!

SEO対策の重要な要素の一つであるサイトの表示速度。

表示速度が遅い理由の多くは、画像を重いままサイトに表示させていることにあります。

大きい画像はあらかじめ圧縮して軽くしてからWordPressにアップロードするようにしましょう。

画像サイズ・容量はとくに決まっているわけではありませんが、横幅は640pxl、もしくは800pxlがおすすめです。

また容量は100kb未満(大きくとも200kb未満)になるようにしましょう。

画像の圧縮方法には、「TinyPNG」などのWebサービスや、WordPressプラグインを使う方法があります。

くわしくは下記のブログ画像についての記事にくわしくまとめています。

画像をWebP(次世代画像フォーマット)にしよう!

次世代画像フォーマットとは従来のPNGやJPEGより圧縮性能の高い、新しい画像フォーマットのことです。

次世代画像フォーマットへの対応は、サイトの表示速度を改善させ、SEO的にも大きなメリットがあります。

次世代画像フォーマットにも種類がいくつかありますが、

Googleが開発する「WebP」に対応する方法をこちらの記事で解説しています。

プラグインで簡単にできますので、ぜひ参考にしてみてください。

著作権に注意しよう!

著作権」とは自分の著作物(文章・写真・作品など)が、他人に不正に使われるないようにする権利のこと。

WordPressなどのサイトで他人に著作権がある写真・画像などを勝手に使ってしまうと「著作権の侵害」になってしまい、

最悪の場合法的な責任を負わされる羽目になってしまいます。

著作権の侵害にあたらないようにするためには、正しいルールを理解する必要があります。

こちらに著作権に関する注意事項をまとめていますので、ぜひ参考にしてみてください。

画像素材のおすすめサービス

メディアの方向性

この章では、WordPressで使用する画像に使える、おすすめの画像素材サービスを紹介します。

無料(フリー)画像素材はお金がかからずに画像が使えるメリットがありますが、そのぶん他サイトと画像が被ってしまうデメリットがあります。

有料画像素材はお金がかかりますが、他人と被らず、質の良いキレイでお洒落な画像が多いメリットがあります。

無料(フリー)の画像素材サービス

無料で画像素材をダウンロードできる、おすすめの画像素材サービスです。

個人的には有料画像素材を使うことをおすすめしますが、無料の素材でもWordPressサイトを運営するこは可能です。

Pixabay

海外もののなかではもっともおすすめのフリー画像素材サービスです。質が高くおしゃれな画像が多いのが特徴。

写真点数も1,800万点以上と豊富で、種類のバリエーションも多いという魅力を持ちます。日本語検索がやや不便なのが残念。

写真AC

レベルもそこそこ高く写真点数も多いのが特長の、日本のフリー画像素材サービスです。

しかし無料会員だと1日9枚までのダウンロード制限があったり、ダウンロードまで待たされるのが難点と言えます。

イラストAC

写真ACのイラスト版です。特徴は同じと言えます。

ぱくたそ

写真点数・バリエーションはやや少ないですが、高品質で個性的で面白い画像が多い特徴をもつフリー画像素材サービスです。

会員登録などは不要で、待たされることなく気軽に画像をダウンロードできるのが魅力ですね。

いらすとや

可愛いけど甘すぎないちょうどいいイラストが豊富に揃っている、超有名な無料のイラスト素材サービスです。

画風がすべて統一されているのも魅力です。

いらすとん

ゆるくてかわいい無料イラスト素材がたくさん揃っている無料のイラスト素材サービスです。

手書き風で味のある、ゆるかわテイストのイラストが魅力です。

足成(ASHINARI)

やや写真が古臭い感じなので好みが分かれますが… 昔からある王道のフリー画像サイトです。

GIRLY DROP

「女の子による女の子な写真素材」をテーマに、ガーリーな画像を幅広く提供しています。

FLAT ICON DESIGN

珍しい「フラットデザイン」専門のアイコン素材サービスです。お洒落でセンスの良いアイコンがたくさん揃っています。

Freepik

海外系のグラフィック素材サイト。他とあまり被らない素材を使いたい人におすすめです。

PEXELS

海外系のフリー写真素材サイトです。おしゃれでカッコイイ写真が多いのでおすすめです。

タダピク

複数(現在43サイト)のフリー素材サイトから、画像をまとめて一括で検索できちゃう便利なサービスです。

有料の画像素材サービス

高品質な画像を豊富なストックの中からダウンロードできる、おすすめの有料画像素材サービスです。

shutterstock

アメリカに本社がある、世界No.1クラスの有料画像素材サービスです。その素材数はなんと3億を超えています。筆者もshutterstockをよく利用しています。

Pixta

日本の有料画像素材サービスです。有料画像素材サービスのなかでも比較的リーズナブルな価格設定になっています。日本語対応なので検索で画像を見つけやすいというメリットがあります。

Adobe Stock

画像の世界で圧倒的なポジションを誇るAdobe社が運営する有料画像素材サービスです。PhotoshopやIllustratorなどを利用されている方にはおすすめです。

amanaimages

日本最大級の画像素材サービス。比較的高額ではありますが、質の高い画像が多いのがメリットです。日本人モデルの画像が多いという特徴もあります。

gettyimages

世界中の報道機関などでも使われているメジャーな有料画像素材サービスです。

収益&アクセスを激増させるツール紹介

ブログ&アフィリエイトの収益SEO集客アクセス流入を改善させる、

筆者おすすめのツールを紹介します。

SEOに強い記事を作れるツール!

エクセル、事前準備シート

収益がなかなか発生しない…」
検索順位が上がらず、アクセスも少ない…」

このようなお悩みの原因の99%は、記事の書き方がダメだから。

そしてその記事の品質は、記事を書き始める前の調査・準備の段階でほぼすべてが決まってしまいます。

そんなあなたにおすすめのツールが『 事前準備シート』。

事前準備シートは、下記のような記事作成に必要なあらゆる要素を1枚のエクセルシートにまとめたツールです。

  • キーワード調査
  • 検索結果ページの調査
  • 競合サイトの調査
  • ペルソナ(中心的ターゲット像)の設定
  • 検索意図の調査
  • 仮タイトルの候補案を作成
  • 記事構成(見出し構成)を作成

これらの事前調査をしておくことで記事の質は格段に向上し、

アクセスや収益を上げやすい記事、検索エンジンに評価されやすい記事を作ることができます。

ブログで累計1億円の確定収益を上げた筆者がふだんから利用している自作ツールです。

長年にわたってカスタムを続けた自信作。一度購入すればずっと使うことができます。

下記から1,500円で購入できますので、ぜひご利用ください。

「売れる記事テンプレート」が収益UP!

ブログ記事を書いている、ノートパソコンで作業中

ブログやアフィリエイトで商品を売るためには、

売れるための話の進め方・記事の書き方があります。

トップ営業マンが使う「セールストーク」のように、

ブログやアフィリエイトにも「セールスライティング」が存在するのです。

私サンツォがふだんからよく利用している5つの記事テンプレートをnoteにまとめましたので、

ぜひ下記からご確認ください。

お悩み相談&コンサルティング実施中!

マーケティング、分析03
  • ブログやアフィでなかなか結果が出ない
  • このままでいいのか心配になった
  • 記事の書き方はこれでいいのかな
  • 分野やサイト設計で迷っている

…などで不安を感じたり、悩んでいる方は、ぜひ私サンツォにご相談ください。

チャットやオンラインMTGにて、お悩み相談コンサルティングを受けつけています。

有料にはなりますが、悩んで立ち止まっていたり、

間違った方法を続けていても時間と手間のムダになりますので、ぜひ一度ご相談ください。

以下からお申し込みいただけます。

超高速&格安レンタルサーバーが限定500円OFF!

国内最速!超高性能&格安レンタルサーバーの「ConoHa WING」。

今ならキャンペーン中につき月額640円~で利用することができます。しかも初期費用は無料

しかも当「ブログ部」なら、さらに500円OFFになる特典付き!くわしくは下記の記事をご参照ください。

WordPressのカスタム・引越し・問題解決なら!

もしWordPressに関することで困ったことがあったら「サイト引越し屋さん」に相談しよう

WordPressからWordPressへの引越し、ドメイン移管、テーマ変更。無料ブログからWordPressへの引越し。

WordPressのカスタムやサイト高速化、セキュリティ対策など、あらゆる問題・お悩みを解決してくれるサービスです!

サンツォのアイコン画像サンツォ

僕もいつもお世話になっているよ!
相談は無料なので、まずは問い合わせしてみよう!

\ WordPressで困ったことがあったら! /

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる