この記事も目次
ども、中の人です。
ブログを運営していくときに、フリー画像、フリー素材などを使う事というのはよくある話です。
ですが、フリー素材だけに、同じ画像を使うサイトも多いので、なんかもうちょっとオシャレにしたりとかしたいよねぇ・・・
でも、フォトショップとか、画像ソフトとか持ってないし、今更いろいろ覚えるのもなぁ・・・
っていう
あなた！
朗報です。
例えば元の画像のこういう画像ですが
こんな感じにできます。
ちょっとセンスが無いもので、こんな感じですが、それでも、文字が入るだけでもそのままフリー画像を使うよりはいいですよね？
使うソフトというか環境が違うので、出来る事とできない事はあるとおもいますが、
こちらのいけゆう＠図解デザイナーさんのツイートなどを見るととても参考になりますよ。
先日は多くのファボありがとうございました…！
中級編短編とはなりますが、文字の隙間を揃えるとグッと見栄えが良くなります！CanvaもAdobeも文字の間にカーソルを置いて
alt(option) ＋ 左右方向キー
で調整できます！数十秒でワンランク上のアイキャッチになるのでぜひ試してみてください！
↓ pic.twitter.com/g6DJKKZAQL— いけゆう@図解デザイナー (@ikeyu_design) October 3, 2018
ということで、
ワードプレスにDrawIt (draw.io)を導入する方法と簡単な使い方までを記載しておきます。
インストールと使用に関しては自己責任となりますのでご注意ください。
ワードプレスのバージョンはチェックしておこう
正しく使用するにはワードプレスのバージョンは、4.0以上とのことです。
ｐｈｐのバージョンももしかしたら関係してきそうなので、各種しようされているサーバーの推奨ｐｈｐバージョンに変更しておく事をおすすめします。
ただし、ｐｈｐのバージョンによって、稼働しなくなるプラグインの存在なども絶対無いとも言い切れないので、念のために、バックアップを取っておく事をお勧めします。
弊社ではこういった事もあるので、めちゃくちゃ安定しているサーバーとして、Xサーバーを推奨しています。
DrawIt (draw.io)のインストール方法
ワードプレスの管理画面の左側にあるプラグインをクリックして、新規追加をクリック
キーワード検索欄に DrawIt (draw.io) をコピペしてください。
すると下記のようなプラグインが出てくるはずです。
ちなみに、下記画像はすでにサイトにインストールしていて有効化しているので、有効ボタンがでていますが、インストールしていな時は、今すぐインストールというボタンが表示されているはずです。
インストールボタンをクリックして、そのあと、有効化ボタンをおせば、サイトへの設定が完了となります。
使用するには、固定ページや記事ページの編集画面に移動
記事投稿画面に移動したら、テキストモードになっている場合は、ビジュアルモードに切り替えてください。
するとこのようなアイコンが追加されてあると思いますので、クリックしてください。
するとこういう編集画面が表示されます。
アイキャッチ用の画像を作るときには、左上のファイルから、画像をアップロードして使うか、すでにアップしている画像のURLを入力して、使用する事ができます。
ワードプレスの記事にフローチャートの図形を書く事もできる
このDrawIt (draw.io) には、最初から、様々な図形の元にできるような素材が入っているため、かなり簡単にフローチャートが作れたりします。
また、吹き出し、矢印などの図形も、多く用意されているので、考え方や活用次第ではとんでもなく、上質なコンテンツの一部として、記事やサイト内に設置できます。
作った画像をダウンロードして再利用する事も可能です。
DrawIt (draw.io) に用意されている図形をちょっとだけ紹介
このような矢印類でも結構な種類があります。
いろんな図解を作るのに、矢印がこんなにあると助かりますよね。
フローチャートや、データベースの図などいろいろあります。
こういった図がたくさんあれば、その記事にだけ必要なフローチャートもサクッと作れそうです。
これもフローチャートではよく使いそうな図ですよね。
吹き出しやハートマーク、こういうのも、何かを説明したりするのに役立ちますよね。
といった感じで、様々な図形が用意されています。
正方形・長方形・円・ひし形・六角形・台形・分岐矢印・吹き出し・爆発等々
あとは、各種図形に色を付けれるのですが、半透明処理も可能です。
今日見本として、仮に作ったアイキャッチ画像も、白い長方形を配置し、枠線を入れて、背景を半透明にして、その上に文字を重ねました。
下記でも、再度その過程の一部を紹介しています。
見本でつくったアイキャッチの編集画面例
バラバラに分解した状態
それぞれのパーツを重ね合わせるとこうなります。
本当にセンスがなくてすいません＿( _´ω`)_ﾍﾟｼｮ
右上の保存をクリックで画像をアップしたのと同じ状態になります
操作編集が終わったら右上に青い保存ボタンがありますのでそれをクリックします。
すると、DrawIt (draw.io)を使用しない、通常の画像アップロードと同じような感じで、記事内に画像が表示されます。
また、細かく修正しながら、都度保存をしていくと、それぞれの画像がメディアとしてアップロードされた状態になります。
画像を作る途中でテスト的に保存した画像は、使用しなければメディアから削除しておく事をお勧めします。
不要な画像をサーバーに残してても意味ありませんからね。
DrawIt (draw.io) でフリー素材をかっこよくできたらあとはどう運用するか？
このDrawIt (draw.io) については、こだわろうと思えば、機能が許す限りどこまでも可能だと思いますが、記事やページを書き込む時に、あまり時間かけすぎると、記事公開までにはとても時間がかかってしまいます。
DrawIt (draw.io)を運用するにおいて、効率よくする方法
このやり方には、賛否両論あるかもしれませんが、画像を作りこむ事にやっきになって、その記事の存在をグーグルに伝えることができなければ、ちょっともったいないなと思います。
実際グーグルの判断材料の大きなところは文字です。
画像や動画は、ユーザーが来て、滞在時間などには関係しますが、画像そのものがあるからという理由では、グーグルの検索順位にはつながりません。
そういう理屈でいけば、記事を先に書いて、画像を入れるべき箇所は、改行しておくなりして、先に記事を公開する。
そして、その上で、画像を作りこんで作った後に、再度記事を更新するというやり方もあります。
完全に作りこむまでに1週間かかった。
という事であれば、1週間はグーグルには何もアピールできないわけです。
ですが、文章のみ先に完成させておく、もしくは、ある程度書いた状態で、投稿する。
という風にしておけば、画像の編集に例えば1日かかったとしても、先にグーグルには記事の存在は伝えていますし、世の中に無い新しい情報であれば、先に公開するというのは鉄則なはずです。
そういう意味で、先にテキストだけの状態だけでも公開しておくというのも一つの方法としてある
というわけです。
アイキャッチ画像は、先に目が行く、画像です。
であれば、その画像をみて、興味を引く文字を画像に表示させておけば、さらに見たくなる、読みたくなる。
という事を促すことができます。
高機能なソフトなどとは違って、複雑な処理には向いていませんが、それでも、ただのフリー素材を味付け出来て、特殊なソフトを購入したり、契約したりする必要もない。
という事であれば、導入を検討してもいいかもしれません。
では、また。
