WordPressでブログ記事書くのに
文章だけではなくて
挿し絵を入れたりする場合って
けっこう苦労したりしていませんか？
こんばんは！
りょうへい(@ryoheihobozero) です。
りょうへいの場合はけっこう画像の準備が
必要なネタが多いのでなかなか苦労していますｗ
当ブログの場合は
ネタがネタだけに…
画面ハードコピーが多くなりがちです。(汗
しかし、いろいろと記事を書くのに準備して
こんなやり方の画面ハードコピーそろった♪
ってなると、もうそれ以上に
挿し絵的なイメージまで準備するのは
大変すぎますのでｗ
けっこー割愛してしまっておりました。
具体的に、どんなのモノかというと
↓こんな風に文中に挿入するイメージ画像です♪
しかし、そんなカット的なイラストや
写真をちょいちょい挿入するためだけに
いちいちフリー素材のサイトを開いて
画像を選んだらダウンロードして保存して
適度なサイズにリサイズして、、
なんてさらに作業するのはちょっと大変ですよね！
この、一連の作業となる
フリー素材からイメージにぴったりな画像を
WordPressのエディタの中だけで記事に挿入！
なんてことを実現可能にしてくれる
とても便利なプラグインがありました！
しかし、コイツ超便利ですが
使ってみたら、取扱注意！
な点があることも判ったので
その辺の使い方を誤らない為にも
プラスアルファな方法もあわせて紹介しますね♪
Contents
WordPressプラグイン Pixabay Images をインストール
このプラグインが面等な作業をかなり楽にしてくれちゃいます！
その名も『Pixabay Images』
早速検索してインストールしてみました。
このプラグインは海外の有名著作権フリーな
写真とイラストが満載の素材サイト『 Pixabay』から
ワードプレスのエディタのメディア項目内で
画像を検索してそのままメディアファイルとして
保存して記事に挿入できてしまう素敵プラグインなんです！
ちなみに過去に下記記事で書いた
スマートモックアップでも
利用されている画像の元ネタも
こちらにけっこうありました♪
ブログ記事のヘッダーアイキャッチ画像にも使える高解像度おしゃれモックアップをsmartmockups.comで作ってみた
設定から詳細を確認してちょい弄ってみる。
設定項目は至ってシンプル♪
ちなみに言語設定は日本語が初めから選択されていました。
上の画像でチェックした３番目の項目は
WordPressのエディタの上の方の
『 メディア』ボタンの次に
『 Pixabay』のボタンを追加する。
という設定の項目です。
りょうへいの場合は、そこだけチェックしました。
また、『 メディア』の中からも
Pixabayを呼び出すことが出来るので
チェックしないでもOKです！
Pixabay Imagesプラグインを使ってみる。
先程の設定でWordPressのエディタに『 Pixabay』ボタンが登場したよ！
このボタンから『Pixabay Images』プラグインを呼び出せます♪
キーワード検索して画像を選ぶ！
とりあえずキーワードを入力して
検索してみるといろいろな画像が表示されます。
イラストだったり写真だったり
テイストも色々あるのでお好みで選べます♪
日本語で検索してもOK！
海外サイトだから、、、
と思いつつも、恐る恐る日本語で検索しても
それらしい結果が登場しましたよ！
↓『会議』で検索してみたところ
しかし、検索結果は英語で検索した方が
ヒット数が多い気がしました。
お好み画像を見つけるためには
日本語でも英語でも検索を
試してみるとよさげです。
選択した画像を記事に挿入してみる
そんなこんなで、チョイスした画像を
クリックするとこんな感じの画面になります。
りょうへいの場合は、挿し絵的に使う目的なので
フルサイズ(オリジナル使用)だと大きすぎるので
『 中(300 x XXX)』でいきます。
あとは『投稿に挿入』ボタンをクリックすれば記事内に画像が掲載できちゃいます！
超簡単！
便利！
スマホ表示させてみるとこんな感じ！
挿し絵としてのイメージなので
画像サイズ的には 「中」で十分でした♪
おお！
それらしく挿し絵として掲載できました！
文章が長くなると読んでいる人も
ちょっと疲れてしまうのでw
適度に段落をわけて、、、
ところどころに目を休める場所として
挿し絵を挿入していきたいな♪
って思っています。
《重要》Pixabay Imagesで掲載した画像を自分でリサイズしよう！
ブログ記事に中サイズで掲載したからといって
安心してはいけませんでした(^^;
ここが重要っぽいです♪
記事の投稿後でも構わないので
メディアを開いてみましょう！
すると『Pixabay Images』を使って
掲載した画像もメディアの中にありますよね！
その画像（さっきは中で掲載しましたが…）の
詳細を開いてみると….
あら ビックリ！
オリジナルの解像度のまま保存されています！
しかも高解像度な画像がPixabayには
多くあったりします！
そして容量の多いPNG形式のものまで…
こんなモノをそのまま
WordPressのメディア内に置いておいたら
容量も食うし、サイトの表示速度にも
じわじわと関わって来ることが予想されます(^^;
こんな便利なプラグインなので！
こんなところで諦めてたまるか～ｗ
ということで
自分でオリジナル画像をリサイズして
ファイルサイズをダイエットする習慣を
身につけることにしました！
具体的には上の画像の詳細を開いた画面で
『画像を編集』というボタンがあるので
そちらをクリック！
すると『画像縮尺の変更』という項目が登場♪
こちらで解像度の値を自分で入力して
メディア内に保存されているオリジナル画像を
300に自分でリサイズしちゃいます♪
リサイズしたら 267kb → 16kb に減りました♪
というわけで、地味な作業となりますが
これで継続していけば、大丈夫そう♪
大事な作業なのでもう１回書いておきます
記事を無心に書いて、Pixabay Imagesで
挿し絵を掲載しまくって投稿完了後に！
メディアの中に保存されている
Pixabay画像を編集→自分でリサイズ！
これは忘れていても思い出したときに
じわじわやっていってもいいので
りょうへい、肝に命じようと決めました(^^;
(2018/4/11追記)やっぱり、画像選択したらすぐに編集でオリジナルサイズを変更するといいかも
その後、作業をしてみた感想として
Pixabay Imagesで画像を選択したら
すぐに『画像の編集』でオリジナルサイズ自体を
300 x XXX にリサイズして運用するほうが
りょうへい的には効率良いことが
判ってきたので追記しました♪
やっぱり、記事公開後に作業しよう！
なんて思っても忘れることもありそうだし(^^;
WordPressのメディアファイルが格納されているディレクトリが気になるからFTPでチェック
また、画像はWordPressがインストールされている
ディレクトリ以下の
wp-content/uploads の中にも溜まっていきます。
こちらも、使わないサイズとなる 300pixと
サムネイル用の200pix以外のファイルはりょうへい的には削除していってもよさげです。
でもこれは、ある程度サイトが遅い？？
とか思い出してからでもいいと思うので
対策として覚えておこうと思いました。
Pixabay Imagesプラグイン まとめ
というわけで、簡単に挿し絵を挿入♪
イエーイ。
こんな感じで、いろいろなサイトで
使えそうなので、活用してみようと思います。
でも、オリジナルサイズが高解像度なことを忘れないで！
自分でリサイズ作業だけは行って自己管理のうえ活用してみましょうね♪
りょうへい、ブログランキング参加中です♪
記事を読んでみて役にたった！
なんて思ってもらえたら
クリック応援よろしくお願いしますm(__)m
ブロトピ：ブログ更新しました♪
ブロトピ：今日のブログ更新
ブロトピ：wordpressのカスタマイズ
[…] Pixabay ImagesプラグインでWordPress記事を書きながらフリー画像を簡単挿入！WordPressでブログ記事書くのに 文章だけではなくて 挿し絵を入れたりする場合って けっこう苦労したりしていま […]