【記事を書く】ブログ記事に写真やイラストを挿入する方法

2016/04/08

【記事を書く】ブログ記事に写真やイラストを挿入する方法

ワードプレスでブログ

ブログ記事を書くには「文章で伝える力」や「SEO対策」が必要なんだな…とわかった、たのちん管理人なむ。

しかしその前にもっと基本的な、WordPressのブログ記事に画像やイラストを掲載する方法についてまとめます。

 

スポンサーリンク

ado

 

ブログに写真を掲載してみよう

eating2

ブログは文章を読んでいただくメディアです(たのちんはただの雑多文ですが…)。

写真やイラストなどの画像は必須のものではないのですが、記事の内容をわかりやすくしたり、読みやすくしたりするためにあった方がいいですよね。

ステキな写真を使ってブログを書きたいですが、画像の利用には注意も必要です。

ネットにはたくさんの画像があって「いいな~」と思う写真も多いですが、その写真ひとつひとつに著作権が存在していて、勝手に使うことはできません。

まあちょっとくらいバレなければいいじゃない、と思うかもしれませんが、ブログはインターネット上に広く公開されている媒体ですから、バレます。

例えば自分が撮影した写真や作成した画像が、知らない間に勝手に使われていたら…。

いい気分はしませんよね…。

もしバレなかったとしても、気分のいいものではないのでなむはしません。

*参考:著作権侵害に要注意!ブログやWebサイトで使用できる画像・できない画像

 

使ってもいい画像を使おう

写真ひとつに戦々恐々するのはイヤですから、使ってもいい写真を利用することにしようと思うのですが、使ってもいい画像とはなんでしょう?

1.自分で撮ったり作ったりした画像

自分で撮影した写真や、作成したイラストや画像は自分の自由です。

その写真自体の著作権は自分にあります。
写っているモノの肖像権が問題になる場合がありますが、写真自体の使用に制限はありません。

肖像権その他、他人の権利を侵害しない限りは自由に使えます。

2.ロイヤリティフリーの画像

ロイヤリティフリーとは、事前に取り決められた使用許諾範囲内であれば、知的所有権に関する追加の使用料(ロイヤルティー)の発生が免除されている著作物や技術のこと。

*引用:ロイヤリティフリー

この範囲なら自由に使ってもいいよ。というルールが決められている画像のことです。

なむは「Pixabay」「写真AC」「ぱくたそ」「いらすとや」などの素材サイトさんをよく使わせていただいています。

すごくキレイな写真と、かわいいイラストが素敵です。

「個人利用OK・商用利用OK・クレジット表記不要」でとても使いやすいです。

いつもお世話になってます。

3.クリエイティブ・コモンズの画像

これちょっとややこしいです…。

基本的には、決められたルールを守ってくれれば使っていいよ。という画像だと思うのですが、それが画像ひとつひとつに設定されているので、うっかり間違った使い方をしないように注意が必要です。

クリエイティブ・コモンズの画像を集めたサイト(「Photo Pin」とか?)もあるみたいですが、なむは使っていません。

間違えそうで怖いから(;´Д`)

あと、英語が読めないからです。恥(/ω\)w

 

これらのように自分で用意したり、「使ってもいいよ」といわれる画像を使ったりしながら、ブログを書いていきます。

実際に記事の中に画像を挿入する方法を記録しておきます。

 

記事内に画像を挿入する方法

WordPressでは、プラグインを使って画像を記事内に挿入することもできます。

たのちんでも、「Flickr-Pick a Picture」と「Pixabay Images」という2つのプラグインを使わせていただいていますが、ここでは今持っている画像を挿入する方法をまとめます。

*<PI>画像を簡単に探して記事に挿入できるプラグイン【Flickr – Pick a Picture】

*<PI>ライセンスフリー画像を簡単に検索・挿入できる【Pixabay Images】


 

いつも通り記事を書きます。

画像を挿入したい位置にカーソルを合わせて「メディアを追加」をクリックします。

g1

「メディアを挿入」という画面に変わります。

ファイルをアップロード」と「メディアライブラリ」という2つのタグがあります。

新しく画像をアップする場合は前者、もうすでにWordPressにアップロードしてある画像を利用する場合は後者を選びます。

 icon-hand-o-up 新しい画像を挿入してみましょう。

「ファイルをアップロード」をクリックすると、下のような画面になります。
PCなどに保存してある画像のデータをドロップするか、選択してアップロードします。

g2

アップロードした写真が「メディアライブラリ」に保存されました。

画像にチェックが入っていることを確認して「投稿に挿入」しましょう。

g3

  記事に画像が挿入されました。

g4

続いて、サイズを変更して画像を挿入してみます。

画像を挿入する位置にカーソルを合わせて「メディアを追加」をクリック。

g5

メディアライブラリに保存されている同じ画像を使います。

挿入する画像をクリックして選択すると、右側に「添付ファイルの詳細」が出ます。
一番下までスクロールすると、「添付ファイルの表示設定」という欄があります。
ここで挿入する画像のサイズを変えることができます。

中サイズで挿入してみます。

g6

  無事、サイズを変えて挿入できました。

g7

  同様に、サムネイルサイズでも挿入できます。

g8

ここで選択できる「大サイズ」「中サイズ」「サムネイルサイズ」は、自由に変更できます。

よく使うサイズをあらかじめ設定しておくといいと思います。

投稿した記事のプレビューを見てみます。

こんな感じに画像を入れることができます。

g9

おつかれさまでした(*´ω`)

 

記事内に挿入した画像を編集・削除する

いったん挿入した画像の編集もできます。

画像をクリックして選択すると、上部にメニューバーが出ます。

g10

画像の配置変更はボタンひとつでできます。

  左寄せにしてみます。

g11

  右寄せもすぐできます。もちろん中央揃えもできます。

g12

いちばん右の×印は画像の削除です。

g13

もう少し細かい編集もできます。

  「編集」ボタンをクリック。

g14

画像の詳細画面に移動します。

画像のサイズや、リンクの設定、オリジナルデータの編集なども可能です。

g15

サイズの変更は、先ほどと同様に「大サイズ」「中サイズ」「サムネイルサイズ」から選んで変更することができます。

g16

 

画像にリンクを貼る方法

編集画面からは、画像にリンクを貼ることができます。

g17

画像にリンクを貼ると、読者が画像をクリックした際にリンク先のページに誘導することができます。

g18

リンク先を「メディアファイル」にしてみましょう。

g19

メディアファイルにリンクを貼られた画像をクリックすると、WordPressにアップロードされているオリジナルの画像が表示されます。

記事中では画像が小さくて見にくいようなときにオリジナルの画像を見せたいときに有効です。

g20

リンク先を「添付ファイルのページ」にしてみましょう。

g21

添付ファイルのページにリンクを貼られた画像をクリックすると、その画像専用のページが表示されます。

たのちんでは利用したことがありません。どういう意図で使うのでしょう…?汗

g22

  最後に「カスタムURL」にリンクを貼ってみましょう。

カスタムですから、任意のWEBページにリンクを貼ることができます。
リンクを貼りたいURLをボックス内にコピー&ペーストしましょう。

試しに、Wikipediaのネコのページにリンクを貼ってみました。

g23

任意のURLにリンクを貼られた画像をクリックすると、そのページに飛ぶことができます。

g24

ここでは画像にリンクを貼る方法をお伝えしましたが、テキストにも貼ることができます。

テキストにリンクを貼る方法は、以下で確認できます。

画像を挿入すると、文字ばかりの記事よりもリズムが生まれ読みやすくなると思います。

おつかれさまでした(*´ω`)

 

-ワードプレスの使い方
-