リモートで働く管理人のTwitter @2013ume Follow me

画像の横に吹き出しをつけるには?(CSSわからない人用)Speech bubble使用

ブログ運営memo

人のブログを見ていると画像の横に吹き出しがついていて「あれ、いいなぁ」って前々から思っていました。

 

文字ばかりの単調な記事より画像があった方が見やすいし、吹き出しを使えば変化もあります。

漫画みたいで読んでいると楽しくて。

 

当ブログはSimplicity2のテーマを使っていて、吹き出しは簡単につけることができます。

でも画像の横に吹き出しをつける方法がわからない。

(2018/07/19 Cocoonに変更しました。)

 

調べてみたところ、CSSでできるようですが…

説明されてる記事のコードをコピペするだけでいいはずなのに、なぜかうまくいかず

いくつかの記事を読んで試してみましたが、結局、画像の横に吹き出しをつけることはできませんでした。

 

でも!プラグインを使えば

 

ミイコ
ほら!こんな風に画像の横に吹き出しをつけることができたよ。
うめ
そうそう!これ!こういうの使いたかった。
ミイコ
吹き出しのパターンも色々あるよ。
うめ
好みもあるから選べるのは嬉しいね。

 

 

ではさっそく画像横に吹き出しをつける方法をご紹介します。

「Speech bubble」というプラグインを使います。

 

 

Speech bubbleをインストールする

WordPressの管理画面から、他のプラグインと同じ方法でSpeech bubbleをインストールします。

簡単に説明しますね。

 

 

プラグインの新規追加

プラグインの<新規追加>をクリック。

 

プラグイン一覧

検索窓に「Speech bubble」と入力し<Enter>

一覧の中から「Speech bubble(ふきだしプラグイン)」を<今すぐインストール>

(上記画像はすでに使用している状態なので、すでに有効になっています。)

<有効化>をクリック。

以上です!

 

 

実際に画像横に吹き出しをつけてみよう!

プラグインを有効化したら、記事作成の際に画像横に吹き出しをつけるためのコードを貼り付け。

そして必要な箇所だけコードを変更、という流れになります。

では順番に説明していきますね。

 

Speech bubbleをインストールしたままの状態

テスト1号さん
最初の状態だよ。

テスト2号さん
ちなみにセリフを入れないと画像も吹き出しも表示されないよ。


WordPressで記事を書く時に使用するビジュアル・テキストのどちらかに、上記のコードを貼りつけるだけでOK。

 

(1)がテスト1号さんのコード、(2)がテスト2号さんのコードになります。

自分で変更する箇所は「名前」と「セリフ」。

そして左側に表示させたい時は「L1」、右側に表示させたい時は「R1」です。

吹き出しの種類は最初「drop」になっています。

 

 

吹き出しの種類いろいろ

Speech Bubbleのコード

吹き出しは「drop」の他に8つあります。

コードの「drop」のところに、これから紹介する種類名をそのまま入力すれば吹き出しのデザインを変更できます。

think

テスト1号さん
think

テスト2号さん
think

std

テスト1号さん
std

テスト2号さん
std

 

rtail

テスト1号さん
rtail

テスト2号さん
rtail

 

pink

テスト1号さん
pink

テスト2号さん
pink

 

fb

テスト1号さん
fb

テスト2号さん
fb

 

fb-flat

テスト1号さん
fb-flat

テスト2号さん
fb-flat

 

ln

テスト1号さん
ln

テスト2号さん
ln

 

ln-flat

テスト1号さん
ln-flat

テスト2号さん
ln-flat

 

 

吹き出し横の画像を変更したい!

画像横にいろんなパターンの吹き出しを作ることができました。

せっかくなら画像も気に入ったものに変更したいですよね。

というわけで次は

 

ミイコ
好きな画像を使う方法を紹介するよ!
うめ
イラストだけじゃなくてこれから紹介する方法で写真も使えるよね。

 

レンタルサーバー上でやる方法とFTPソフトを使う方法がありますが

この記事ではFTPソフトのFileZilla(ファイルジラ)を使って説明します。

 

 

FTPソフトを使って画像をアップロード

記事中に画像を入れる時みたいに<メディア>に画像をアップロードできたらいいのですが、吹き出しの画像は<メディア>にアップロードしても使えません。

 

ちょっと難しく感じるかもしれませんが、吹き出し画像『1.jpg』『2.jpg』が入っている場所を目印にして、同じ場所へ画像をアップロードすれば大丈夫です。

ではアップロードの方法を説明します。

 

 

FTPソフトファイルジラ

上記はFileZilla(ファイルジラ)の画像です。

右のサーバー側にWordPressのディレクトリ(ファイルの管理情報など)が表示されるので図ではWordPress側としました。

吹き出し横に使いたい画像は、デスクトップへおいておくとわかりやすいです。

FileZillaではデスクトップに置いた吹き出し画像は左側に表示されます。

 

上記の画像ではサーバーへつないでいない状態なので右側のWordPress側には何も表示されていません。接続するとディレクトリ(ファイルの管理情報など)が表示されます。

WordPressのディレクトリが表示されたら

Wp-content→plugins→Speech Bubble→img(もともと1.jpgと2.jpgがあった場所へ画像をアップロード)

というようにたどっていき画像をアップロードしましょう。

デスクトップに置いた画像をFileZillaで左から右へドラッグするだけで、簡単にアップロードできます。

 

 


コードの『1.jpg』『2.jpg』のところを、自分が選んだ画像のファイル名に変更してビジュアルかテキストに貼りつけます。

好みの画像を使った吹き出しができます。

 

アップロードする画像ファイル名は半角英数字にしておきましょう!

 

ミイコ
大きめ画像をアップロードしても自動的に吹き出し画像サイズになるよ。

 

追記  2018/07/16

Speech bubbleを設定してから数日後、イラストを追加しようとFileZillaにアップロードしたんですが記事に画像が表示されない…

「おかしいなぁ~」と色々やっていたところ、コードを書いた時、画像のファイル名に拡張子がついていないことに気づきました。

 

Speech bubbleにもともと入っている画像のファイル名でいうと『1.jpg』の「jpg」が拡張子です。

自分のイラストのファイル名は長く、なかなか気づけませんでした。

拡張子がわからない場合は、FileZillaの画像ファイル名横に書いてある「種類」を見れば確認できます。

上記のFileZillaの画像をご覧ください。

わたしのイラストの拡張子は「png」です。

 

 

まとめ

好みの吹き出し画像をつけるまでの流れが、最初は少し大変かもしれませんが、方法がわかれば画像の追加もスムーズにできると思います。

 

それから、コードを毎回記事に入力するのは大変なので、登録しておいて簡単に呼び出したいですね。

「AddQuicktagにコードを登録しておくと便利だな」と思って設定したんですが、なぜかうまくいきませんでした。

そこで単語登録してコードや画像ファイル名を呼び出しています。

 

吹き出し画像は、言葉がうまく出てこない時やちょっとしたアドバイスなどをピョコンっと入れたい時にも使えて便利です。

コメント