超初心者の私がWord pressプラグインspeech bubbleを使うまでの道のり 前編

こんにちは、ヤムです。

プロフィール欄にも記入しているので、皆さんご存知だとは思いますが私はブログ初心者です。

昔ちらっとアメブロやってた以外は、知識も何もあったものじゃありません。

そのくせ好奇心は強いので、色々興味が出るものが多く、その度に頭を抱えながら挑戦しています。

そんな私が最近密かにやりたいと思っていたこと、それが

ブログの記事内に吹き出しを表示させる方法を探る!でした。

そう、この記事の最初の鯛が喋ってる吹き出し、まさにそれのことです。

やりたかった理由は、自分の描いたイラストが喋ってたら面白そうだからというどっちでもいいことなんですが(笑)なんかできるようになったら嬉しくなって、過去の記事もわざわざ書き換えてニヤニヤしてます。

導入工程は比較的簡単なので、超絶初心者の私でもすぐにわかりました。

ただめっちゃ初歩的なところで壁にぶち当たったので、世界の何処かにいる私並みに何も知らない誰かのためにその辺を含め道のりを書いてみますね。

爆笑するくらい初歩的なことですが…^^;

鶴さん
爆笑するくらい初歩的なこと?!
亀さん
超絶初心者だもんね

その1、とりあえずWord pressのサイドバーの中のプラグインを押す!

吹き出しを表示させるには「プラグイン」という名の便利ツールを利用しなければなりません。

吹き出しを表示させるプラグインはいろいろあるのですが、その中でもメジャーな"Speech Bubble"を私は使うことにしました。

ワードプレス管理画面の左サイドバーの中から、プラグインという項目を選び、新規追加を選択。

右上に出てくる検索画面で"Speech Bubble"と入力しましょう。

そのまま「今すぐインストール」を選択すると、あっという間にダウンロードが終了して「有効化」という文字に切り替わると思います。

プラグインは有効化させないと働いてくれないのでそこをプッシュして有効化させましょう。

その2、記事に吹き出しを挿入しよう!

ここまでくれば半分以上仕事は終わったも同然です。(゚o゚;;はやっ!

さて、早速記事を書いてみましょう!以下コードをコピペして記事本文中に貼り付けてみてください。

〇〇さん
入れたい言葉

こんな感じで表示されましたか?されてれば大成功です!

亀さん
なんか思った感じと違う

ちなみに貼り付けはビジュアルモードでもテキストモードでもどちらでもオッケーですが、ビジュアルモードに吹き出しが反映されるわけではないのでプレビューを見て確認してください。

その3、イメージいろいろ好みに合わせよう!

さて、さっき亀さんが心の中でつぶやいていましたね「なんか思った感じと違う」と

亀さん
バレてる!

なぜなら私が使っているものと、今表示してもらったものは吹き出しの種類が違うから。

実は吹き出しの種類は9種類から選べるんです!やったね!

吹き出しの種類を変更するには[drop, std, fb, fb-flat, ln, ln-flat, pink, rtail, think]の中から好きな種類を選び、先ほど貼り付けしたコードの

type="drop"の部分を、type="std"のように打ち直せばいいだけなんです。
それぞれの吹き出しの形状はこんな感じ!

鶴さん
std だよ
亀さん
fbです
鶴さん
fb-flatでやんす
亀さん
ln でござーい
鶴さん
ln-flat だぬん
亀さん
pinkざます
鶴さん
rtailでがす
亀さん
thinkだっちゃ

ちなみに鶴さんと亀さんが始めに使っていたのは"ln-flat"です。

また、〇〇さん部分を変更すると、「鶴さん」のようにアイコンに名前が表示され

L1の部分をL2に変更すれば吹き出しの尻尾の形がかわります。

会話形式のように左右に吹き出しを表示させたければL1の部分をR1もしくはR2にしてください。

鶴さん
ふむふむ
亀さん
話長いなぁ

どうですか?結構簡単なわりにブログの雰囲気が変わるのでついつい使いたくなっちゃいますよね。

多用しすぎるとチープな感じになりそうですが、ポイントポイントでうまく使えばいいアクセントになって記事の見た目がぐっと良くなりそうです。

さて、ここまでくるともう気になることは一つだけですよね。

いかにアイコンを変更するのか!

デフォのままでもなくはないけど、やっぱり好きなアイコンが使いたいところです。

そして私が冒頭でつまずいたと話していた恥ずかしいほど簡単な壁はこの先にあったのですが^^;

記事が長くなってきたので後編へと引き継ぎます。

どうぞ、激しい初心者の方のみお付き合いください(笑)

では!
今日は前回に引き続き、Speech bubbleを導入するまでの道のりをお届けします。 前回の内容で基本的な使…
スポンサーリンク







シェアする

スポンサーリンク