wordpress編

ワードプレスで会話風吹き出しをCSSとHTMLで作ってみた!

ワードプレスで会話風吹き出しをCSSとHTMLで作ってみた!

CSSとHTMLで会話風吹き出しを作ってみました!

さるとりんご
さるとりんご
おはよう  
息子
息子
おはよう

こんな風に、投稿画面で吹き出し画像を使っておられるサイトを見て、
わたしもやりたい!!と思い色々サイトを検索させて頂きました。

以下のサイトのCSSとHTMLをそのままコピペさせて頂きました。
なんとか、会話風吹き出しが出来ました!!
ありがとうございます。

WordPressの吹き出しプラグインでSpeech Bubbleというプラグインがあるみたいなのですが、2018年4月現在3年間更新されていなかったり、不具合がでたりと、どうやらあまりお勧めではないみたいです。

色々これから上手に使っていけたらな、と思います。
ただ、ライン風の背景にしたい!と思うのがなかなかできません。ちょっとまた色々検索して調べてみます!

※上記できました。 <div class=”line_back”> </div>
で囲むとラインの青色背景が出来ました!!

(※simplicityのテーマのみ)

会話風HTMLを記事に簡単に挿入する方法

記事を書く時、会話のHTMLをいちいちテキストに保存していたものをコピーして、記事内に張り付けていたのですが、それが面倒くさい。

AddQuicktagというプラグインをインストールして、会話風HTMLをAddQuicktagに登録すると、簡単にボタンを押すだけで、記事内に挿入することができます。これは便利で時間短縮になります!

下記のサイト様にAddQuicktagの使い方が詳しく載っていましたので是非ご参考になさって下さい。



ここまでお読み頂きありがとうございました。

あわせて読みたい
アドセンスブログを始めて1か月目のわたしがやった事と、やろうとしている事
わたしがアドセンスブログを始めた理由と、これからの事さるとりんごがブログを始めたきっかけは? ブログは、アメブロでは日記程度に今まで書いた事がありますが、本格的にブログをやりたい...
あわせて読みたい
初心者が入れておく必須wordpressプラグイン5つ!
初心者が入れておく必須wordpressプラグイン5つ!初心者がとりあえずこれだけ入れればOKなプラグイン5つ プラグインって何よ?? まず、プラグインって何?ってところから始まったさると...
あわせて読みたい
ワードプレスとツイッターの連携をして、画面付き自動投稿が出来た
Next Scripts: Social Networks Auto Posterで、ツイッターへ画像付き自動投稿ができた! Next Scripts: Social Networks Auto Posterを使ってツイッターへ自動投稿する方法 ツイッター...