ワードプレステーマ「JIN」の設定方法
使い方 解説blog
JINの設定方法

JINで吹き出しの設定方法

ワードプレスの「吹き出し」のメリット

ワードプレスでは、吹き出し機能を実装することができます。吹き出しとは、漫画などに出てくるような「あれ」です。

吹き出しがあることで、ブログを読んでいる側も一瞬ふっと気持ちがゆるんで読みやすくなるメリットがあります。

文字ばかりが並ぶと疲れるため、画像以外にも、視覚的なリラックス効果を狙える吹き出し機能を上手に活用しましょう。

 

コチドリくん
コチドリくん
こんな風に吹き出しで喋れるよ

 

吹き出し機能は、ワードプレスのプラグイン「Speech Bubble」を使うことでも設定可能ですが、ひつじさん(@hituji_1234)作のワードプレスの有料テーマ「JIN」では、もともと吹き出し機能が備わっているので、プラグインなしで吹き出しを表示することができます。

そこで今回は、「JIN」の吹き出し機能の設定方法について解説したいと思います。

JINの吹き出し機能の設定方法

吹き出しの素材の準備

まず、吹き出しに使用する画像(イラストなど)を用意します。

イラストは、自分で描けるようなら描いてもいいですが、フリー素材サイトを活用してもいいでしょう。

たとえば、この記事で登場してもらったコチドリくんは、「かわいいフリー素材集 いらすとや」というイラストのフリー素材サイトからダウンロードしたものです。

 

コチドリくん
コチドリくん
動物から歴史上の人物までたくさんあるよ

 

吹き出しの素材をメディアに新規追加

吹き出しに使用する素材の画像を準備したら、ダッシュボード左の「メディア」から「新規追加」を選択。

吹き出しに使う画像をアップロードしたら、次にアップロード写真の右にある「編集」をクリックし、使用する写真の右側にあるファイル情報から「ファイル名」を探します。

上の画像で言う右側の青く選択されている「ファイル名」の部分をコピペしておきます(*「ファイルのURL」ではありません)。

吹き出しのコード

次に、「吹き出し」の設置に入ります。

通常の記事作成画面(「ビジュアル」)の上部に、引用や強調など様々な装飾ができるボタンが並んでいます。

その一つに、「CHAT」というボタンがあるのでクリックします。すると、以下のようなコードが出てきます。

その状態のまま、プレビューで見てもらえれば、まだ吹き出しの内容はありませんが、人物のシルエットのようなイラストが表示されているでしょう。

それでは、吹き出しコードの一つ一つの設定を見ていきたいと思います。

まず、コードの一番左の“man1”の部分を、先ほどの「ファイル名」に変えましょう

[chat face=”×××.png”]

次に、nameのあとの”○○”に、キャラクターの名前を記入しましょう。

name=”コチドリくん”

そのあとのalignは、吹き出しを表示させる場所になり、左右どちらかを選ぶことができます。初期設定だと左ですが、右に吹き出しを表示させたい場合はrightに変えましょう。

align=”right”

boderとbgは、それぞれ吹き出しの「枠の色(boder)」と「背景色(bg)」になります。

色は、「gray」「blue」「red」「yellow」「green」と選ぶことができ、枠や背景色をなしにしたい場合は、「none」と記入しましょう。

 

コチドリくん
コチドリくん
これは吹き出しの枠がグレーで背景なし
コチドリくん
コチドリくん
これは枠なしで背景色がグレー

 

僕はシンプルなのが好きなので、枠がグレーで背景なしの吹き出しが好きですが、サイトやブログの記事にあった色を探してみましょう。

最後に、「style」ですが、ここはオプションなので”○○”のあいだは空欄のままでも構いません。

ここには、”maru”という風に記入すると、吹き出しのアイコンが丸で囲まれる仕組みになっています。

 

コチドリくん
コチドリくん
ぬう…鳥かごのなかの鳥感…合う合わないがありそう

 

以上で、JINの吹き出し設定は完了です。

いつもこの作業をするの? 面倒ならプラグイン「AddQuickTag」がおすすめ

吹き出しを使うたびに毎回この作業をするのは面倒という方には、ボタン一つで設定したコードが呼び出せるプラグイン「AddQuickTag」がおすすめです。

これはいつも使用するタグやコードをあらかじめ登録して、ボタン一つで記入してくれる優れものです。

プラグイン>新規追加>検索欄に「AddQuickTag」と記入し、インストールして有効化します。

次に、ダッシュボードの設定からAddQuickTagを選択し、編集画面に移ります。

編集画面の「開始タグと終了タグ」に、こんな風にして記入(二つ目の「吹き出し」という項目に注目)し、右側のチェック欄を入れましょう。

記事の編集画面の上に、「Quicktags」という今設定で登録したタグを選択できる項目が登場します。

あとは、吹き出しを表示したいときに、その都度その項目をクリックすれば、コードを差し込むことができます

以上、ワードプレスのテーマ「JIN」でプラグインなしで吹き出しを利用する設定方法でした。

ワードプレス「JIN」で、サイトタイトルを非表示にする方法JINでサイトのタイトルを非表示にする方法 このブログでは、ひつじさん作のワードプレステーマ「JIN」の設定方法を紹介していま...
ABOUT ME
めたもん
めたもん
2015年頃からワードプレスでブログを書いています。最近「JIN」を使い始めました。不器用にもがきながら模索中、ワードプレスのこと、JINの設定方法、また過去に脚本家を目指して教室に通っていたこともあるので文章についても書いていきたいと思います。

アフィリエイトにおすすめのASP

ASPとは、アフィリエイト広告とアフィリエイターを繋ぐ仲介業者のことです。アフィリエイト広告を貼る場合、まずはASPに登録します。

ここでは、アフィリエイトにおすすめのASPを紹介したいと思います。

どのサイトも無料登録なので、とりあえず最初に一通り登録しておくとよいでしょう。

おすすめ1、A8.net

言わずと知れたASPの大手。満足度ランキング7年連続1位とにかく提携企業(広告)が多いことがメリットです。

ひとまず「ここ」というASP。健康や美容関連にも強いです。

A8.net 公式サイト

おすすめ2、もしもアフィリエイト

もしもアフィリエイトは、Amazonも通りやすいので、Amazon関連のアフィリエイトを使うならもしもアフィリエイトは登録しておくとよいでしょう。

もしもアフィリエイト 公式サイト

 

おすすめ3、バリューコマース

バリューコマースのメリットは、スマホのオーバーレイ広告があることと、メルカリなど意外とバリューコマースにしかない案件がある点です。

バリューコマース 公式サイト

 

基本的には、この三つのASPを活用しています。

アフィリエイトは、この三社と、Amazonアソシエイト(Amazonは上記のASP三社でも提携が可能です)、グーグルアドセンスがメインとなっています。

どれも登録無料なので、複数あればリスクヘッジにもなりますし、各社で扱っている案件も違うので、ASPは登録だけでも行っておくとよいでしょう。

その他、afb(アフィb)も有名どころで評価の高いASPです。

その他サービス

クラウドワークス

在宅ワークで家にいながら記事のライティングなどの仕事を受けることができます。手続きも簡単で、お金をもらいながらブログ記事執筆の基本を学ぶことができます。

CrowdWorks(クラウドワークス) 公式サイト

ココナラ

自分ではちょっと不安なワードプレスやサーバーの設定、アイコンのデザインから翻訳まで、それぞれ得意なひとが格安で代行してくれる「スキルのフリマ」です。

無料登録後、必要なスキルを検索しましょう。取引は匿名で、自分で「出品」も可能です。

ココナラ 公式サイト