ワードプレスの文章中に漫画のような吹き出しを入れる方法

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

ワードプレスの記事内や文章中に漫画やアニメのような吹き出しを入れる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的にも弱いと思います。

 

だから、吹き出しは記事のまとめ、や導入部分などに使うと良いと思います!

 

アフィリエイトランキントップを比較しましょう!

いろんな人から新しいアフィリエイト技術を吸収すべし!
私もゼロから沢山教わって稼げるようになったのです!

もしこの記事が気に入ったらブックマーク・いいね!お願いします(>_<)お礼きっと致します♪


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

アフィリエイトに関する質問はコチラで受け付けています

メルマガで真面目に教えています!稼げるサイトを2週間で作ろう!


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

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

ワードプレスアフィリエイト開始までの流れと手順
ワードプレスでアフィリエイトを開始するまでの流れとは?用意しておくもの,必要経費,サーバーやドメインについてお話します!
ワードプレスでやっておきたい拡散カスタマイズ
ワードプレスの設定ができたら次にやっておくべきは拡散のためのカスタマイズです。一記事を何倍にも膨らませるように先に済ませてしまいましょう!
ど素人でもプロに見えるTCDテンプレートの使い方
見た目が超カッコいいブログやHPのアフィリエイトサイトを作りたいのであればTCDのテンプレートを使えば簡単です。初期設定も難しくない。これで見た目の問題はクリアですね!
口コミ投稿サイトを無料で簡単に作る方法-ワードプレスブログ編
ワードプレスが使えるようになると、物販の口コミサイトが簡単に作れるようになります。使うのはReviews - Pending Reviewsというプラグインだけ!日本語化も全然難しくありませんよ!ネットショップを運営してい人もこれで評価を聞きながら商品を選べませすね。
無料サーバーでワードプレスを使おう!初期設定まで流れを解説
とにかくワードプレスに挑戦したいという人は無料サーバーからスタートしても良いのでは?サーバー開設から初期設定までの流れを解説!
初心者がワードプレスアフィリエイトを始める際の注意点
あれほど止めたのに、どーしても初心者のあなたがワードプレスを使ってアフィリエイトを始めたいのですよね?良いでしょう。最低限必要なチェックリストと注意点について詳しく解説したいと思います。
初心者のためのスマホワードプレスカスタマイズのコツ
今はアクセスの7割はスマホ経由ですよ?ワードプレス初心者でなおかつアフィリエイト初心者はほぼ全員スマホのテンプレートのカスタマイズができてません?アクセスアップ,SEO対策とテーマの選び方を図解して紹介します!!
ワードプレスと無料ブログアフィリエイトの違いを本音で教えます
先生、別にアメブロでも無料ブログでも集客ができるのに、なぜワードプレスをみんな推奨するのでしょうか?サーバー閉鎖と強制削除以外の違いが調べても見つかりませんとい言われたので、アフィリエイトの観点からその違いを解説します。さて、今のスキルでみなさんが選ぶのはどちら?
このページの先頭へ戻る

ホーム RSS購読 サイトマップ
トップページへ アフィリエイト講義一覧 厳選集客ツール 厳選教材とツール 目次