wordpressデザインカスタマイズ備忘録〜会話風の吹き出しをつけてみた〜

その他

ブログの記事内に、吹き出し入れたいんだけど、HTMLとかCSSの知識なんてないし、どうやればいいかわかんない、、

こう思っている人にぜひ読んでもらいたい記事です。

本記事の内容

  1. ブログ内に吹き出しがあった方がいい理由
  2. 会話風吹き出しの入れ方
  3. プラグイン「AddQuicktag」の使い方(簡単に吹き出しを入れることができるプラグイン)

スポンサーリンク

ブログ内に吹き出しがあった方がいい理由

このブログでは、僕自身パンダに扮装して記事を書いているのですが、そのパンダのキャラクターを記事内で活かすには、記事中で吹き出しを使って会話させるのが一番いい方法かなぁ〜と思ったので、実際に吹き出しを入れることにしました。

僕が思う吹き出しのメリットは以下の通りです。

文字だけのブログは途中で飽きやすい

一つ目はこれですね。

僕は昔から文章を読むのが苦手で、文字ばかり見てるとすぐに眠くなるような人です笑

文章だけしか書かれてないと、どうしても途中で飽きちゃうんですよね。

それよりも、キャラクターが話しているような文章をちょこちょこ入れることによって、コミカルな記事になり、ブログ全体が見やすくなると思います。

  
キャラクターだったら可愛らしい記事に仕上がるよね!

自分の顔やキャラクターを覚えてもらいやすい

二つ目はこれですね。

どんな人でもブログのプロフィール欄に、自分の顔やキャラクターのイラストを載せていると思いますが、その人やキャラクターを記事内でも実際に登場させることで、より読者に覚えてもらいやすくなります。

  
僕はパンDAIKIです!
 

 

実際に吹き出しをつけてみた

無料テーマ「cocoon」には最初から吹き出しが用意されているのだが、、、

僕は今、無料テーマ「cocoon」を使っているのですが、実はこのテーマには最初から吹き出しが用意されてます。

「cocoon設定」→「吹き出し」のところで吹き出し設定が簡単にできます。


ただですね、すごいシンプルなデザインなので、自分好みのもっとオシャレな吹き出しを入れたい!って方は、自分でカスタマイズしなければならないんですよね。

吹き出しを作るには、HTMLとCSSの知識が必要なのですが、僕自身もそこらへんについてあまり分からないので、ネットで探してたところ、とても分かりやすい記事を見つけました!

 

サルワカさんのサイトがとても分かりやすい

僕が実際に参考にしたサイトはこちらです!

このサイトを参考にすれば、HTML・CSSの知識が全くなくても、簡単に吹き出しを入れることができちゃいます。

 

  
サルワカさん、ありがたすぎるよ〜!

 

ちなみに上の吹き出しは、先ほど紹介したサイト内の、「会話(チャット)風」というところに書かれているコードをコピペすれば作れます。

 

僕の場合は、吹き出しの色をオレンジ色にしたかったので、以下のように三箇所だけコードをいじりました。(赤色のところを変更しています。)

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #fff0c6;
  border-radius: 50%;
}

.says {
 display: inline-block;
 position: relative;
 margin: 5px 0 0 105px;
 padding: 17px 13px;
 border-radius: 12px;
 background: #fff0c6;
}

.says:after {
 content: “”;
 display: inline-block;
 position: absolute;
 top: 18px;
 left: -24px;
 border: 12px solid transparent;
 border-right: 12px solid #fff0c6;
}

イラストが右にくるようにカスタマイズしてみた

僕のブログには、パンDAIKI以外にも他のキャラクターが登場しています。

 

 
僕も登場してるよ〜。分からないことが多すぎていつも頭の上に「?」がついてるんだよね。

 

他にも、「パンダ先生」というキャラクターもたまに登場します。

 

  
主に何かについて教える時に私は登場しますよ〜。

 

キャラクターが2種類以上になると、会話の掛け合いをさせるために、イラストを右側に配置したくなるんですよね。

サルワカさんのサイトには、キャラクターを右側に配置するコードが書かれてなかったので、自分なりコードを編集してみました。

  • 「HTML」は同じ。
  • CSSを以下のコードに編集。

.balloon6 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}

.balloon6 .chatting {
width: 100%;
}

.balloon6 .says {
position: relative;
margin: 5px 105px 0 0;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}

.balloon6 .says:after {
content: “”;
display: inline-block;
position: absolute;
top: 18px;
right: -24px;
border: 12px solid transparent;
border-left: 12px solid #d7ebfe;
}

.balloon6 .says p {
margin: 0;
padding: 0;
}

.balloon6 .faceicon {
float: right;
margin-right: 0px;
width: 80px;
}

.balloon6 .faceicon img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}

  
これで会話の掛け合いができるようになるね!

 

プラグイン「AddQuicktag」を使って、簡単に吹き出し設定しよう

プラグイン「AddQuicktag」の導入

テキストエディタを使って、吹き出しを入れたいところに「HTML」のコードを入れる。

この作業って毎回いちいちやってると超めんどくさいですよね。

ということで、その作業を一気に簡略化できるプラグインを導入しましょう!

こちらのAddQuicktag」というプラグインです。

プラグイン新規追加のところでAddQuicktag」と検索すれば一番上に出てくると思います。

 

プラグイン「AddQuicktag」の設定

インストール済みプラグインをクリックすると、導入しているプラグインが表示されると思うので、その中のAddQuicktag」の設定をクリックしてください。

するとこういう画面が表示されると思います。


 

  • ボタン名:その吹き出しの名前
  • 開始タグ:<p>より前のHTMLコードを入力(会話文・テキストより前の部分のことです。)
  • 終了タグ:</p>より後のHTMLコードを入力(会話文・テキストより後の部分のことです。)

 

<div class=”balloon5″>
<div class=”faceicon”>
  <img src=”画像のurl”>
</div>
<div class=”chatting”>
<div class=”says”>
<p>テキスト</p>
</div>
</div>
</div>

 例えば、僕が使っているこの吹き出しのHTMLコードは上記の通りなので、

<div class=”balloon5″>
<div class=”faceicon”>
  <img src=”画像のurl”>
</div>
<div class=”chatting”>
<div class=”says”>

この部分は「開始タグ」に。

</div>
</div>
</div>

この部分は「終了タグ」に入力します。

あとは、チェックボックスの一番右側をチェックして、「変更を保存」というところをクリックすれば設定は完了です。

 

プラグイン「AddQuicktag」の使い方

設定が完了したら、早速使っていきましょう!

ビジュアルエディタのQuicktag」をクリックすると、先ほど設定した名前が表示されていると思います。


その名前をクリックすれば、簡単に吹き出しをつけることができます。

プレビューで確認してみましょう!

ちゃんと吹き出しが表示されてますね!無事完了です。

サルワカさんのサイトとプラグイン「AddQuicktag」を使うと、簡単に吹き出しを記事中に入れることができるので、皆さんもぜひ試してみてください!

 

この記事を書いた人
DAIKI

英語・中国語の学習に役立つ情報や中国市場の情報について発信しています。
【略歴】
・京都に住んでいた時、中国人観光客の会話を何回も聞いているうちに中国語に興味が湧き、それ以降中国語の勉強にハマる。
・2019年3月〜中国の動画プラットフォーム「bilibili」で日本語や日本文化についての動画を中国人に向けて発信開始。
・現在は外国人に日本語を教えつつ、英語・中国語習得中。

DAIKIをフォローする
その他
スポンサーリンク
DAIKIをフォローする
DAIKI LIFE

コメント