ワードプレスで画像や動画を挿入する方法

前回の記事で文章の投稿方法は理解していただいたと思います。

ワードプレスで文章を投稿する方法

2015.10.06

ただ、文章だけのウェブサイトでは味気ないと感じる方も多いのではないでしょうか?

もちろん、ワードプレスであれば画像や動画の使用も簡単に行えるのです。今回は画像とYoutube動画の挿入する方法を解説します。

画像の挿入方法

画像の挿入方法はとても簡単です。投稿画面の上部の「メディアを追加」をクリックしてください。

「メディアを追加」をクリック

すると以下のアップロード画面に移行します。

アップロード画面

この領域に自分のパソコンから画像をドロップ&ドラッグするだけで、画像がアップロードされます。あとは下部の「投稿に挿入」で挿入完了です。

注意点

画像の挿入時に注意しなければならないのは、画像のファイル名に全角ではなく半角英数字を用いる、ということです。全角のファイル名だと、スマートフォン等でサイトを見たときに表示されないことがあるからです。

画像のサイズにも注意しましょう。最近はスマートフォンでウェブサイトを見る利用者が増えていることから、大きすぎる画像は利便性に悪影響が出ます。また、縦と横の比率も気をつけてください。スマートフォンは画面が縦長なので、画像が縦長だと画面を埋め尽くしたり入りきらなくなってしまうことがあるからです。

画像はなるべく適度に横長(パソコンのディスプレイくらい)で作成し、ファイル名は半角英数字にしておきましょう。

画像の設定

画像の挿入の前に一つやっておいて欲しいことがあります。画像をアップロードすると以下の画面が出てくるのですが、「代替テキスト」「リンク先」の項目の変更です。

画像の設定その1

「代替テキスト」とはalt属性の設定項目のことです。altとは画像を説明する要素で、何らかのトラブルで画像が表示されない時に表示されるテキストの設定ができます。また、検索エンジンに挿入されている画像の内容を正しく理解を促すようになるため、SEOにも有効です。

画像の設定その2

「リンク先」の初期状態は「メディアファイル」です。この状態でウェブサイトに表示された画像をクリックすると、画像がフルサイズで表示されます。

これを「なし」に変更すると、画像から何もリンクされなくなります。特にリンクするページが無いのであれば、「なし」に設定しておいてください。

Youtube動画の埋め込み

ワードプレスはYoutubeの動画も手軽に埋め込むことができます。埋め込み方法は以下の通りです。

Youtubeから埋め込み用のコードを取得

Yotubeの動画ページの「埋め込みコード」をクリックすると埋め込み用のコードが出てきます。すぐ下の「もっと見る」をクリックすると、動画のサイズ等などの設定が可能です。

動画のサイズ等の設定

設定が完了したら、<iframe〜</iframe>までを全てコーピーします。ワードプレスの投稿画面に戻り、「挿入」→「埋め込む」→「動画を挿入/編集」をクリックして下の画面の赤枠にコピーしたコードを貼り付けしてください。

Youtube動画の埋め込み方法

実際にサイトに表示したのが以下の画面です。

Youtube動画を埋め込んだページ

サムネイル画像の設定

サムネイル

サムネイルとは記事の一覧で表示される画像のことです(上の画像の赤枠の画像です)。ウェブサイト内の他のページから違うページに移行する際に、サムネイルに惹かれてクリックされることはよくあります。サイト内の回遊率を上げるためにも、必ず設定しておきましょう。

サムネイルの設定

投稿画面の右下に「アイキャッチ画像」の項目があるので、「アイキャッチ画像の設定」をクリックしてサムネイルにしたい画像を選択して「アイキャッチ画像を設定」をクリックするとサムネイルの設定は完了です。

まとめ

これで文章だけの寂しいページから、画像や動画を活用した華やかで分かりやすページ作りが可能になりました。専門的なウェブサイトは画像や動画で手順等を解説すると、より読者に伝わりやすくなります。また、文章だけのページより疲れにくく読みやすくなるのも利点です。

続いては、投稿の下書き保存や公開時期の設定の解説をします。下のリンクからどうぞ。

無料でウェブマーケティングを勉強しませんか?

ABOUTこの記事をかいた人

マツ

高2から陰キャでコミュ障になり、最終学歴高卒フリーターの人生がけっぷち屑野郎へ。 こっから人生大逆転ホームラン狙ってます。担当はゲームとお菓子調達です。よろしこ