⇒本気で学ぶ資産ブログ作成講座

ワードプレスの文章中に吹き出しを簡単に入れる方法

【PR】当サイトにはアフィリエイト広告が含まれています。というかアフィリエイトのことしか話しません。


目次

ワードプレスの記事内や文章中に漫画やアニメのような吹き出しを入れる3つの方法

今回はワードプレスの吹き出しカスタマイズについてお話ししようと思います。アフィイエイトで文章を書くのが大変!ということで、前回はQ&A方式で文章量を増やすテクニックを紹介しましたが、さらに、文章中にキャラクターを登場させて、まるだ会話しているような吹き出しを入れると臨場感がでますよね?
 
ワードプレスの場合はプラグインを入れたり、ちょっとCSSに書き込みをするだけでこのような吹き出しが文章中に作れますよ!
 
 
 
 
 

ワードプレス,吹き出し,プラグイン,やり方

まずはワードプレスのCSSをプラグインを入れれば、吹き出しカスタマイズは楽勝です

では作業順序について行きましょう。ワードプレスのCSSカスタマイズのプラグインを入れてから、そこにソースコードをちょとっとコピペすれば楽勝です。
 
① Simple Custom CSS をワードプレスに入れる。
 
ワードプレス,吹き出し,プラグイン,やり方
 
② 外観の中に custom cssが入るのでそこを開く
 
ワードプレス,吹き出し,プラグイン,やり方
 
③ 空欄部分に次のコードをはって保存する
 
/*============================================================
フキダシデザイン
============================================================*/
.arrow_answer,
.arrow_question {
position: relative;
background: #fff;
border: 1px solid #c8c8c8;
padding: 30px 25px;
border-radius: 10px;
width: 70%;
font-size: 13px;
}
.arrow_question {
float: right;
margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
top: 50%;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
border-color: rgba(255, 255, 255, 0);
border-width: 15px;
margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
border-color: rgba(200, 200, 200, 0);
border-width: 16px;
margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
float: right;
margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
margin-bottom: 25px;
overflow: hidden;
}
 
 
ワードプレス,吹き出し,プラグイン,やり方
【 貼るとこんな感じに見えますね?】
 
④ 記事をテキストモードに切り替えて以下のコードを貼る
 
ワードプレス,吹き出し,プラグイン,やり方
 
 

⑤ ビジュアルモードに切り替えてから写真と文字を挿入する。後はプレビューで確認すればOK
 
 
ワードプレスの文章中に吹き出しを簡単に入れる方法
 
これが一番オリジナル性が高いと思います
 
参考サイト:CSSで吹き出しのデザインを作る
 

同様にLINEのような吹き出しをつけることも可能です!

同様に、CSSプラグインにCSSコードを書き込み、テキストモードでHTMLテキストを記事内に入れてみると簡単に吹き出しが入ります。
 
ワードプレス,吹き出し,プラグイン,やり方
 
LINEのような吹き出しを作る方法
 

Speech Bubbleというプラグインを使うと楽に吹き出しが挿入できる

次にプラグインを使った方法ですね。speech bubbleといプラグインですが、これもアイコンをいじれば、オリジナルの吹き出し画像が作れます。
 
ただ、初期の状態ではちょっとアイコンがカッコ悪い気がする・・・。
 
① speech bubbleをプラグインからセット
 
② 次にHPのFAQのコードをテキストモードにして記事に貼ってみる
 
ワードプレス,吹き出し,プラグイン,やり方
 
ワードプレス,吹き出し,プラグイン,やり方
 
実際にプレビュー画面を見るとこんな感じです。名前や発話内容を変えれば吹き出しの
完成ですね?
 
ワードプレス,吹き出し,プラグイン,やり方
 
ただ、アイコンがカッコ悪いのでオリジナルの物を使いたい!という場合はFTPソフトで
プラグインの場所を特定して、その中のimgに自分で名前をつけた画像を入れる
 
ワードプレス,吹き出し,プラグイン,やり方
 
そしてjpgと書いてある部分を自分の作ったファイル名に書きかえればOKです。
吹き出しとして登場させる人物は無料素材のなかでアイコンを探せばいいでしょう。
 
 
プラグインスピーチバブルの使い方
 
以上です。最後に一言。日本語の会話というものは意味の含有率が高く、省略が多いです。言わなくても分かるのが日本語の文化ですので、1ページ内に多用すると、検索エンジンロボットには不親切であり、SEO的にも弱いと思います。
 
だから、吹き出しは記事のまとめ、や導入部分などに使うと良いと思います!
 

アフィリエイトブログ作成講座はコチラ

シェアしていただけると励みになります!
  • URLをコピーしました!

今回の記事の内容に関して分からない部分ありましたら質問どうぞ

コメントする

目次