ブログ内に画像を挿れてみよう

ブログ内に画像を挿れてみよう

WEB知識

この記事では、WordPress(ワードプレス)で画像を挿入する方法やそれに関連した設定の方法などを解説していきます。

画像をいれてみよう

まずは、基本的な画像の追加方法です。必要に応じて読み飛ばしてください。

media01
画像を挿入したい場所をクリックしてカーソルを合わせておき、「メディアの追加」ボタンをクリックします。
media02
画像を追加するには2種類の方法があります。詳しくは、このあと解説していきます。
media03
画像を追加すると、カーソルを合わせていた場所に画像が挿入されます。

画像をアップロードしてみよう

さきほどご紹介した、2種類の画像の追加方法について見ていきましょう。

アップロードする

image04
「ファイルをアップロード」を選択後、ファイル選択のボタンから画像を選択するか、すでにファイルが開いていればそこからドラッグで追加することができます。
image02
ちなみに画像を追加したい場所をクリックしたあと、そのまま画像をドラッグするだけでも画像が挿入されます。「ファイルを追加」ボタンのクリックなどが不要になるので、覚えておくと便利です。

サイト内の画像から選択する

image03
今までにアップロードしたことのある画像をもう一度使いたい場合などは、「メディアライブラリ」から選択することで簡単に同じ画像を追加することができます。

詳細設定をしよう

画像の追加方法がわかったところで、つぎは画像の各種設定についてみていきます。

image05
タイトルなどを入力できるようになっているこの部分の設定をしていきましょう。

タイトル

image07
はじめの設定では、読み込んだ画像の元のファイル名が反映されます。
image06
タイトルは、メディアライブラリの中から画像を検索するときに使うことができます。自分にとってわかりやすい名前にすればOKです。日本語でもかまいません。
image08
画像を見るとわかるように、タイトルを変更しても元のファイル名までは変わっていません。WordPress(ワードプレス)内専用の画像タイトルと考えていただければOKです。

キャプションと説明

続いて、「キャプション」と「説明」部分についてです。こちらもSEOには関係ないので、基本的には空欄のままで構いません。さくっとみていきましょう。

キャプション

実際に表示される画像のすぐ下に、短い解説文をつけることができます。

image09
画像にピッタリとくっついた形になり、キャプション部分までが1つの画像として表示されます。

説明文

ブログを読んでいる人には一切表示されません。タイトルに入りきらなかった補足などがあれば入力しましょう。

代替テキスト

代替テキストも他の人から見えない点は変わりませんが、Googleなどの検索エンジンが画像の内容を判断するときに見ています。Googleに知らせる用の画像タイトルといったイメージです。

image10
また、何かしらの原因で「画像が表示できなかったとき」や、たとえば視覚障がい者のための機能などで「ページの内容が音声で読み上げられたとき」などにも使用されます。

SEO対策にもなるので、できるだけわかりやすく、画像が見えない場合でも内容がわかるような代替テキストを入力するように意識してみましょう。

表示設定をしよう

最後に表示設定を見ていきます。こちらの設定も、特に必須というわけではありません。必要に応じて設定してください。

添付ファイルの表示設定
ここでは、主にサイズの変更や配置位置など、見た目の設定を行います。

配置を変えてみよう

まずは配置の変更です。どのように表示されるか、実際に例をみてみましょう。

 

配置なし

左配置とほとんど変わりませんが、横に並んでいる文章が1行分のみです。バランスが難しいので、文字を入力するなら隣は避けたほうがいいかもしれません。

左配置

配置なしのときと違い、横の文章がぎっしり詰まっており、画像の下にまで折り込まれています。

中央配置

画像が中央に表示され、左右には文字は並ばないようになっています。画像のサイズが大きいほど、中央配置が一番キレイに見えるでしょう。

右配置

左配置の逆になります。

全ての配置で言えることですが、サイトを見ている液晶のサイズや画像の大きさによって横に入る文字数は変動します。

「パソコンでちょうどよくなるように調整したのに、スマホで見たらおかしな形になってしまった!」ということはよくあるので、長い文章を画像に添えたい場合、基本的には画像の横は避けたほうが無難です。

リンク先の設定をしよう

次にリンク先の設定です。

image11
これを設定すると、画像をクリックしたときに別の場所に飛ぶようにすることができます。どこに飛ぶようにするかで設定が異なりますので、1つずつ見ていきましょう。

メディアファイル

メディアファイル①
実際にどのようになるか見てみましょう。メディアファイルの設定にした場合、画像をクリックすると・・
メディアファイル②
そのページが切り替わり、フルサイズの画像1枚だけがバンっと表示されます。画像だけの専用ページに移るイメージですね。

たとえば「本文中には小さめに表示したいけど、クリックすれば特大サイズで見られるようにしたい」という場合に設定するといいでしょう。

添付ファイルのページ

では『添付ファイルのページ』に設定するとどうなるのでしょうか。

添付ファイルページ
「メディアファイル」の設定のときとは違い、ブログ内の画像専用のページへと移動します。画像のタイトルや、投稿の日付なども表示されていますね。

カスタムURL

最後に、カスタムURLの設定です。画像をクリックすると、自分で指定した好きなページへ飛ぶようにすることができます。これは見たことがある方も多いのではないでしょうか。

カスタムURL①
『カスタムURL」を選択後にでてくるURL入力欄へ、移動させたいページのURLを入力します。
カスタムURL②
クリックすると、そのページがそのまま指定したページに切り替わります。

リンク先を別タブで開きたいときは?

あとから編集
投稿編集ページで追加した画像をクリックすると、小さなメニュー画面が開きます。その中のえんぴつマークをクリックしましょう。

※ちなみに左側にはさきほど紹介した配置の変更ボタンもあります。後から配置変更をしたい場合は、こちらも活用してみてください。

リンクを新しいタブで
「上級者向け設定▼」というメニューをクリックすると、下に新しい設定画面が表示されます。この中の「リンクを新しいタブで開く」にチェックを入れれば完了です。

元のページを開いたまま別ページに移動できるのは便利ですが、使いすぎには気をつけてください。毎回別タブで開くようにしていると、ブログを読んでいる人はうっとうしく感じてしまう場合もあります。

『ブログ内の移動なら通常リンクで、まったく別のサイトへの移動なら別タブで』など、使い分けをして必要なときにだけ設定するようにしましょう。

 

画像サイズを変えてみよう

最後に、画像のサイズ変更です。

画像サイズ
添付ファイルの表示設定の中にある『サイズ』を選択し好きなサイズを選びましょう。数字が大きいほど、画像は大きく表示されます。
カスタムサイズ
もし選択肢にはないサイズに変更したい場合は、投稿編集ページで画像を追加したあと、その画像をクリックしましょう。四隅にある□マークをドラッグすることで好きなサイズに変更することができます。

まとめ

以上、WordPress(ワードプレス)を使ったブログへの、画像の追加方法や設定についての解説でした。

たくさんの項目があり一度に覚えるのは大変なので、はじめは余分な設定はしなくても構いません。まずは、画像をいれてみることからはじめ、少しずつ慣れていきましょう。

Index目次