どうも、ホインです。
おしゃれ有料テーマ「JIN」の導入をきっかけに、このブログにもついにキャラたちが追加されました！
かなり可愛い仕上がりになっています。
これで念願の吹き出しデザインがビジュアルエディタで簡単に使えるようになりました。
今回、私が紙に書いたイラストを画像にした方法や、WordPressでの設定方法について残しておこうと思います。
せっかくなので最後にキャラも紹介させてください。
それでは行ってみよー！
オリジナルキャラクターを導入したワケ
私は顔出し無しでブログを運営しているため、WEB上の本人ビジュアルが欲しかったというのが導入した理由です。
イラストであれ何であれ、「ホイン」と聞いて思い浮かぶモノがある状態にしたかったんです。
私自身、「インフルエンサーになりたい」とかは特にないのですが、記事を読む側からすれば書いている人の顔なり絵なりが浮かんだ方が安心ですよね。
人と成りまで伝われば、説得力も出てくると思います。
あと、吹き出しイラスト。
やってみたかったんですよねー。
あんまり細かい所にこだわりすぎるのも良くないのはわかっているのですが、せっかくだから楽しまないと٩( ‘ω’ )و
JINだと簡単に設定できるということもあり、このタイミングで導入を決めました。
イラスト作成〜JINでの吹き出し設定方法
もちろん、我が家にはペンタブレットとかデジタルでイラストを描くような設備はありません。
なので、紙にイラストを描き、スマホで取り込み＆加工をし、ワードプレスに登録しました。
以下の方法でなかなかキレイにできますよ。
①白い紙にイラストを描く
色はアプリで読み込んだ後でも足せるので、白い紙に書いた方が後の編集が楽だと思います。
なるべく濃い鉛筆やペンで書いた方が、線がハッキリして色塗りや透過の範囲指定がしやすいかもしれません。
②スマホアプリ「CamScanner」でイラストをデータ化
このアプリで撮影して取り込むと、スキャナーで取り込んだような画像データに仕上げることができます。
普通の写真だとこれ↓
CamScannerで加工したのがこれ↓
…マジですごくないですか? ?
スマホの無料アプリでここまで出来るのかと本当に驚きました。
③スマホアプリibisPaintXで2の画像を読み込み、色塗りや背景透過、テキスト挿入、サイズ調整などを行う
CamScannerで取り込んだ画像を使い、まずは不要な線を消します。
後は範囲指定の設定さえうまく使えれば、色塗りや背景透過がスイスイできます。
以下のページがとてもわかりやすくて参考になりました。
「自動選択」の範囲指定ですが、イラストを鉛筆で書いていた私は「簡単設定」をオフにして、「強さ→5%」「拡張→0.5」に設定すると綺麗に範囲指定できました。
この２つの数値をいじると範囲指定の深さが調整できるので、自分の指定したい範囲になるよう色々いじってみてください。
できた画像をPGN画像でアプリ本体やDropboxなどのクラウド上に保存します。
④作成した画像のファイル名を修正し、ワードプレスに画像データを取り込む
アイビスペイントXで仕上げて保存した画像のファイル名をPC上（スマホであればDropboxなどのクラウド上でもOK）で修正します。
ファイル名はそのままでも使えますが、吹き出しのショートコード（例：hoin.jpgなど）として使うので、できるだけどんな画像かわかるような名前にしておいた方が後で便利です。
ファイル名を修正したあと、ワードプレスのメディアから画像を取り込みます。
⑤吹き出し用のショートコードを作成し、プラグイン「AddQuicktag」に登録する
吹き出し用のショートコードの作成方法はJIN公式サイトに載っています。
上記サイトで説明されている通り、一旦新規記事投稿の編集画面を開き、本文上でショートコードを完成させましょう。
完成したショートコードをコピーし、記事は一旦下書き保存します。
次にAddQuicktagの設定画面を開き、「開始タグ」の部分にコピーしたコードをペーストして末尾の [/chat] 部分だけを切り取り、「終了タグ」の所に切り取ったものを貼り付けます。
一番右側にチェックを付けて保存すると、ビジュアルエディタでもプルダウンで吹き出しを使用できるようになります。
サーバーがロリポップの場合、AddQuicktagの保存を押した時に「403エラー」が出て、保存ができない事があります。
この場合、ロリポップのWAF設定を無効にし、5分以上末待つと保存できるようになります。
保存後、WAF設定は有効に戻しましょう。
ビジュアルエディタでの吹き出しの使い方
記事編集画面で「Quicktag」のプルダウンを選択すると、設定したショートコードが本文記事中に出てきます。
（例）[〜”]ここに書く[/chat]
↑ここに書くの部分にコメントを入力すると、吹き出し内に文字が入ります。
吹き出し用のキャラクターをご紹介
私はあまりイラストの自信がないため、今回は妻に書いてもらいました。
妻もイラストの勉強などは一切していないのですが、以前ハンドメイド作品を作っていた時に書いた絵を貰いました。
シンプルなイラストですが、なかなか可愛らしいキャラです。
絵のアイデアというか、発想が良いんですよね。
ハンドメイド作品を作っていた時も数人のファンがいたそうです。
描いてもらったイラストの中から、私は本人のキャラとしてハムスターらしきものをチョイスしました。
どうですかっ！ か、可愛い…。
可愛すぎてブログタイトルの横にも添えてしまいました。
一応、サブキャラとしてカワウ〜ソとパン〜ダも導入。
これもなかなか！か、可愛い…。
小学生の文房具に使われてそうなキャラクターたちですが、たまごっち世代の自分としては親近感アリアリ。
めちゃくちゃ気に入っています。
サブキャラまで使いこなせる自信はありませんが、いいんです、可愛いから。
まとめ：紙に書いたイラストで十分OK！
いかがでしたか?
紙に書いたイラストでも、スマホさえあれば簡単にきれいなデジタルイラストとして読み込めるとは驚きですよね。
特に②と③のアプリには本当に驚かされました。
③は慣れるまで範囲選択の調整などがちょっと難しいかもしれませんが、仕上がりに影響するところなので試行錯誤してみてください。
以上、ホインでしたー!
