ワードプレスでやりたかった吹き出し表示のやり方!

blog, ワードプレス設定

まだパソコンやインターネット回線が全家庭に普及していなかった1998年頃。私は強制的にパソコンをやらされる環境でした。ですが、プログラマーをやっていた知人の手伝い程度でプログラムを実際に使うことはできず、チンプンカンプン(笑)htmlはそれなりに。CSSはそれほどできずのまま。モーヤダ!無理!となって投げ出しました。

ページを見ていただいていても分かるように、そんなど素人の私ですが、今ご覧いただいているワードプレスに出会い、プラグイン?なんだそれ?となって、1ヵ月位でそこそこ理解できるようになりました←遅w

さて、そこで、ワードプレスで一番初めに入れたプラグインの中の一つの「Speech Bubble」をご紹介させていただきたいと思いま~す♪

neko
この吹き出しにあこがれていたんです
neko
会話風でいいですよね

ちなみに初心者なので、私でもわかるやり方をご説明させていただきます!

アイコンの設定方法はこちらです

Speech Bubbleのインストール方法

まずプラグインを選択します。

「新規追加」を押します

「キーワード」に

Speech Bubble
と入力して

「Speech Bubble(ふきだしプラグイン)を今すぐインストールをクリックして有効化をクリックします

これで、プラグインのインストールはOKです!

Speech Bubbleを使って投稿する方法

記事を書くように、投稿を押して、新規作成をクリックします

ビジュアルモードでも、テキストモードでも大丈夫ですが、初心者ならビジュアルモードの方がわかりやすいかもしれません。

そして下記のコードをコピーして入力すると

A さん
こんにちは!
B さん
あ、どうもお久しぶりです

 

A さん
こんにちは!
B さん
あ、どうもお久しぶりです

と表示されます。

セリフの変更方法

A さん
○○○○
B さん
○○○○

この○○○○の部分を、好きな言葉に変えてあげるとセリフが変わります

表示される人物の名前の変更

□□
こんにちは!
□□
あ、どうもお久しぶりです

name=”□□”の部分を、表示させたい名前に変更してあげると名前がかわります

吹き出しの種類の変更方法

この「Speech Bubble」プラグインには、なんと9種類の吹き出しが用意されています。
記事の内容に合わせて変更してあげると、オリジナリティがでますね。

この9種類のコードは type=”○○”の部分を変更してあげるだけです。

このコードは

drop
std
fb
fb-flat
ln
ln-flat
pink
rtail
think

それぞれ、どのようになるか見てみましょう

drop

neko
これはdropですよ
neko
デフォルトなので、そのままでも、この表示がされるんですね

std

neko
これはstdですよ
neko
これはシンプルですね。

fb

neko
これはfbです。Facebookみたいにアイコンが○く切り取られます
neko
会話している吹き出しの色も変わりますね

fb-flat

neko
これはfb-flatです。 
neko
メッセンジャーみたいな感じですね。

ln

neko
これはlnです。LINEみたいな感じです
neko
LINEのように会話している吹き出しの色も変わりますね

ln-flat

neko
これはln-flatです。これもLINEみたいです
neko
LINEのフラットな感じですね

pink

neko
これはpinkです。女の子らしいですね
neko
ピンクを基調としているサイトなら合いそうですね

rtail

neko
これはrtailです。シンプルな表示ですね 
neko
注目させるには目立ちますね

think

neko
これはthinkです。何か考えてる感じですね
neko
こんな風に考えてるという時に使えそうですね

アイコンの向きと吹き出しの部分を変える

A さん
こんにちは!
B さん
あ、どうもお久しぶりです

アイコンを右に表示させるのか、左に表示させるのかは
subtype=”L1″ subtype=”R1″ このL1とR1の修正だけですね。

右に表示させたい場合はL1、左に表示させたい場合はR1を記載します。

neko
こちらはいじっていません
neko
ここのsubtype=”L1″に修正します

吹き出しの部分を考えているようにする場合は、L1→L2 R1→R2 にします。

neko
こちらはsubtype=”R2″に変更しました
neko
こちらはR1からR2に修正しました

アイコンの画像の変更方法

初心者ではつまづく場所ですよね。私は、さっぱりわかりませんでした(笑)

今では簡単に画像を変えられるようになったので、是非チャレンジしてください!

私は【お名前.com】 でドメイン取得をしているのでレンタルサーバーもお名前.comレンタルサーバー を使っています。

後ほどお名前.comレンタルサーバー でのアイコンの変更方法をupさせていただきます。

追記

お名前.comレンタルサーバー でのアイコンの設定方法をupしました

blog, ワードプレス設定

Posted by neko