ブログ記事を投稿する際にイメージ画像が欲しくなることがあります。当サイトでもその時にはいつもフリー画像サイト「Pixabay」のお世話になっています。
Pixabayは良質の画像が豊富で種類も多く、何よりもフリーで自由に使えます。これまで出合った中では最高のフリー画像サイトと言えます。
このすぐれたPixabayはなんとワードプレスに設定できることが分かりました。それにより効率よく記事作成が可能になります。
Pixabayを編集画面に設定する
設定自体は非常に簡単です。通常、記事に画像を挿入するにはあらかじめ必要な画像をピックアップしデスクトップに保管しておき、記事作成につれて挿し込む方法がありますが、今日は記事作成と同時に画像検索を行うべく、Pixabayをワードプレスに設定する方法と使い方についてまとめてみました。
はじめに画像の肖像権について心配になります。そのあたりから解説します。
Pixabayについて
先ず画像使用に関する権利関係について、以下にPixabayの公式サイトから抜粋した一部をご紹介します。
「Pixabayは著作権のない画像や動画を共有する、活気のあるクリエイティブコミュニティです。すべてのコンテンツはクリエイティブコモンズCC0の下で公開されています。これにより、たとえ商業目的であっても、許可を求めたりアーティストに信用を与えることなく安全に使用できます」
※Pixabayサイト「よくある質問」より
Pixabayの卓越したサイト運営理念は上記の文言にすべてが集約されています。
要するに、Pixabayの画像はブログ等で普通に使用する限り、権利関係を気にせずに自由に使ってよいということです。
本稿では画像使用に関する詳細な権利関係の解説は省略します。詳しくはPixabayサイトの「よくある質問」を御覧ください。
それではPixabayのプラグインのインストールから解説します。
Pixabayのインストール
ワードプレスのプラグインの新規追加画面を開いて検索窓から「Pixabay」を打ち込みますと、「Pixabay Images」と「Pixabay Images Gallery」の2つのプラグインが現れます。
インストールは「Pixabay Images」の方だけで結構です。「Pixabay Images Gallery」の方は最近追加されたものと思われます。今回は触れません。
あとは「Pixabay Images」を有効化しますとインストールは完了します。
画像の設定画面と手順について
「Pixabay Images」をインストール後有効化してワードプレスの編集画面に戻りますと、以下のようにPixabayのボタンが表示されています。
ビジュアル画面でもテキスト画面でも同じように表示されています。
※画像01
左側ダッシュボードの下の「プラグイン」をクリックして、その下の「設定」の上までカースルを持っていくと右側にプルダウンメニューが表示されますのでその中の「Pixabay Images」をクリックします。
すると下の画面が現れます。上から説明します。
※画像02
□Language
言語の選択
□Safe Search
危なそうな画像を除外します。
□Attribution
画像の下にクレジットの文字が入ります。
□Button
編集画面にPixabayのボタンを表示させます。
ここの赤印「ボタン」にチェックを入れ、「変更を保存」します。
それから編集画面に戻ると画像01のように「メディアを追加」ボタンの右隣に「Pixabay」ボタンが表示されています。
次にその「Pixabay」ボタンをクリックすると下の画面が現れます。
※画像03
これは上に5つのリンクが並んでいますがその一番右端のリンク「Pixabay Images」が初期設定となっているためこの画面になります。そしてこの画面が画像を選ぶ際の基本になります。
更に真ん中の検索窓を挟んで下に4つの選択肢が並んでいます。初期設定ではすべての□にチェックが入っていますが、いよいよ記事が出来上がって画像を選ぶ際に必要なチェックを入れて画像を探して選択をします。順番に説明します。
□Photos
写真画像
□Cliparts
クリップアート
□Horizontal
正方形を含む横長の画像
□Vertical
正方形を含む縦長の画像
要するに写真かクリップアートかを選択し、縦長か横長かを指定します。
ちなみに一番右端の「歯車」をクリックすると画像02に飛びます。これらの指定が終わったら最後に検索窓にキーワードを入力することになります。
それではここまでの設定の仕方を踏まえて一旦編集画面に戻ります。次項では実際に記事が出来上がり、画像を入れる場所も決まった時点から解説します。
画像を記事中に挿し込む方法
編集画面で完成した記事の中の画像を挿し込みたい場所をクリックします。クリックする場所は文章が始まる一番左端になります。ビジュアル画面でもテキスト画面でもどちらでも良いです。
次に「Pixabay」ボタンをクリックします。すると画像03’が表示されます。
※画像03′
ここで検索窓に探している画像イメージを入れます。画像の設定は「写真画像」で「横長」にチェックを入れました。ここでは「果物」と入れて検索してみます。
すると以下の画面になります。
※画像04
今度は「fruits」と入れてみますと以下のようになります。
※画像05
キーワードが英語と日本語では属性は同じでも出て来る内容が違って来ます。言語を使い分けて希望の画像イメージを取得できます。
画像が見つかったらその画像をクリックしますと以下のような画面になります。
※画像06-1
※画像06-2
ここで画像の配置や情報を入力します。すべての項目を入力する必要はありません。入れ終わったらずっと下の方の「投稿に挿入」ボタンをクリックして「すべての変更を保存」すると、記事中の最初にクリックしていた希望の場所に画像が入ります。
またはアイキャッチ画像として使用する場合にはその横のリンク「アイキャッチ画像として使用」をクリックし、「すべての変更を保存」をクリックします。
やり直したい時にはその横のリンク「削除」をクリックします。ここで削除されなければ画像はメディアライブラリーに登録されます。
最後の「すべての変更を保存」を確認したら編集画面に戻り、画像の調整に取り掛かります。
画像の調整とは、
●画像の大きさを調整する
●画像を右寄せにするか、左寄せにするか、中央に据えるかの設定をする
●画像の上下に記事の文章があるので、画像と文章との空白の調整をする
以上のことを設定します。
これらの設定はビジュアル画面でやると楽です。ビジュアル画面で画像の角の辺りを何度かクリックすると小さな四角が現れます。その四角をクリックして左右・上下に動かすと画像の大きさが自在に設定できます。
画像をクリックする時にpixabayのメニューが同時に現れますので、その中の鉛筆のアイコンをクリックすると左右寄せや代替テキストなど、全ての設定が出来ます。
できれば画像のalt属性の中に英文の画像イメージか説明文を入れておくと、SEO的には良いようです。巡回してくるロボットはどのような画像が使われているのかわからないので、英文で画像のイメージを記述してやるのです。上記の代替テキストの欄に記述することで可能になります。
●エディター切り替えの際の注意点
最初からビジュアルエディター画面で記事作成をしている際には問題がありませんが、この時 html が使えるテキストエディタ画面で記事を作成し、画像調整のためにビジュアル画面に切り替えて、記事を更新したのちに再度テキストエディタ画面に戻ると、余計な(P)タグが生成されていたりしてテキストエディターの構成が崩れます。
この対策には、「TinyMCE Advanced」というプラグインをインストールし、管理画面から「設定」→「TinyMCE Advanced」とクリックしてゆき、「Advanced options」という項目の中の、要旨として以下の文言のところを捜してチェックを入れることで解決できます。
□ stop removeing the (p) and (br /) tags when saving and show them in the HTML editor……という文言のところを探してこの項目を有効にする。
●画像のボケについて
この際、取り込む画像サイズは1200px以上にして、図像の調整ではそのサイズからあまり小さくしない方が無難のようです。むしろ設定する画像枠よりも保存した画像サイズが小さ目の方が画像はボヤケないかも知れません。このあたりは検証されると良いかと思います。
以上がPixabayの使い方になります。
おわりに
Pixabayは日本語対応がなされており大変使いやすいのですが、興味深い特徴として、英語で検索しますと、一味ちがった種類のイメージ画像が出てくることです。
この辺は実際に色々と試してみられることをオススメします。
また記事の編集画面とPixabayの設定画面を出たり入ったりすることもありますが、慣れてきますと次第にパターンが決まってきます。最初にイメージ画像を見つけておくと作業がはかどります。
最後に本記事作成に当たってプラグインのインストール画面を確認しましたら、「Pixabay Images Gallery」という新しいプラグインがありました。これについてはまた次回に取り上げていこうかと思います。
