賢威7テンプレートのWordPress版では、キャラクターを表示させたり吹き出しの中に台詞をいれたりして、会話調の文章を簡単に書くことができます。
キャラクターを使っているブログは増えてきていますよね。平坦な文章でも会話にすると、サクサク読めると思います。そこで今回は、賢威テンプレートにキャラクターを設置して吹き出しを表示させる方法を紹介します。
このページの目次
キャラクターを設定しよう！
ケントこんにちは！ケントです。賢威のキャラクター設定はすごく簡単です。ぜひ、活用してみてください。
まずは、ブログで使うアバターを準備していきましょう。ブログで利用するアバターが決まったら、管理画面の「キャラ一覧」から「キャラ登録」をクリックします。
キャラ登録の画面が表示されたら次の手順で設定していきましょう。
①名前と②名前の表示
キャラクターの名前を入力してから、名前を表示させる場合は「名前の表示」にチェックを入れます。
③画像と④画像の形
画像設定をクリックします。
準備するキャラクターは、正方形のものがおすすめです。画像が長方形になっていると、「円形」を選択した場合は、楕円形になってしまいます。
「ファイルのURL」をクリックします。
「投稿に挿入」をクリックします。
画像の形は四角か円形の好きなほうを選んで下さい。
⑤吹き出しの形
吹き出しの形を選択します。
ケント四角を選択すると、こんな感じ
ケント角丸はこのとおり
ケントちなみに「なし」にするとこうだよ！
⑥吹き出しの色を選択する
吹き出しの背景色はデフォルトでは白になっていますが、好きな色を選択することが出来ます。色を選ぶときには、Google Chromeの拡張機能のひとつColorPick Eyedropperが便利です。
この拡張機能を追加した場合は、画面右上に下のアイコンが表示されます。
アイコンをクリックすると、以下のようにカーソルを置いている場所のカラーコードが現れます。
色を決めたら、画面をクリックします。すると、選択した色のコードが表示されます。
⑦基本ポジションを選ぶ
ケント僕は左側の設定です。
カプリこんにちは！カプリです。右設定です。どうぞ、よろしく！
ここで設定したキャラクターの向きは、ソースコードを追加することによって個別に変更することが出来ます。ソースコードの詳しい説明は、この記事の「基本の向きを変更したいときのコード」で紹介しています。
⑧投稿用ページのボタン表示
投稿用ページのボタン表示を「表示する」にすると、エディタ画面にボタンが表示されます。ただキャラクターにいくつかの表情を使う場合は、数が多くなり邪魔になってしまいます。そこで、一つのキャラクターに付き、一つだけ表示されるように設定すると使いやすいかと思います。
キャラクターのショートコードを使うと、以下のようなコードが表示されます。名前でキャラクターをトラックして、番号の部分を変更すれば、使いたい表情を利用することが出来ます。
基本の向きを変更したい時のコード
基本の設定と逆の向きにキャラクターを設定したいときには、以下のコードを［］に追加して下さい。
1 2 | 右 : position='chat-r' 左 : position='chat-l' |
ケントたとえば、左側から話をしている僕を、右側に設置して、背景の色を白にする場合は、下のコードを[]の中に記入する。
1 | [char no="1" char="ケント" position="chat-r" color="#ffffff"] |
ケントキャラクターの向きや背景色は、すごく簡単に変更できるんだ！
吹き出しの形を変更するときのコード
カプリなるほど！これは便利ね。でも、吹き出しの形は変更できるの？
ケントもちろんさ！下のコードを追加してみて
1 2 3 | 四角 : balloon='square' 角丸 : balloon='circle' なし : balloon='none' |
ケントたとえば、四角にするにはこんな感じで記入してみて！
1 | [char no="21" char="ケント" balloon='square'] |
ケント僕の吹き出しのフレーム、四角になっていると思うけど。どう！
カプリうん！ バッチリなってる。これなら簡単ね！
キャラクターの表情をもっと豊かにする方法
拡張子にgifを使うと、キャラクターの表情に動きを持たせることが出来ます。
ケント僕のように表情を変えるなら、gifファイルを使うといいと思う。これも簡単だから、やってみたらどうかな？
キャラクターの表情を変えるには、同じ顔のサイズを使用します。顔のパーツのみが変更された画像をいくつか組み合わせるだけで、より表情豊かなキャラクターになるかと思います。
画像を準備したら、まずはバナー工房にアクセスします。
このサイトでは、動画のようにみえるGIFアニメを作成できるだけでなく、画像の圧縮、修正、加工といった作業をオンライン上で簡単にすることが出来ます。
サイトにアクセスしたら、画面をスクロールして「GIFアニメページに行く」をクリックします。
アップロードできる拡張子は「GIF」「JPEG」「JPG」「PNG」と4種類です。それから、1回でアップロード可能なファイルの総量は、「20MB」までになります。2018年6月8日から最大で80枚まで選択できる仕様になり、使いやすく便利なサイトです。
「1枚目を選択」をクリックしてGIFアニメを作成するファイルを選択します。
画像を選択したら、画面をスクロールします。
各設定を指定したら、「GIFアニメを作る」をクリックします。出来上がったGIFアニメのサイズが大きい場合はサイズを縮小するをクリックします。
10%間隔でGIFアニメを圧縮できます。
出来上がったファイルをダウンロードしたら、GIFアニメの完成です。
ケントこれならすぐに動くキャラクターが作れるよね。
カプリうんホントだ！すごく簡単ね。私もさっそく作ってみるわ！
次は目次の作り方をみていきましょう。賢威では、目次も自動で表示することが出来ます。
