「エンジョイ鉄旅!」は、青春18きっぷやその他のお得なきっぷでの鉄旅を楽しむブログ
鉄旅に便利でお得なきっぷの王様「青春18きっぷ」

乗り鉄さんからそうでない人までに発売開始から35年以上の人気を誇る「青春18きっぷ」。

今さら聞けない「青春18きっぷ」の基本中の基本を徹底解説しています!

青春18きっぷの詳細はこちら!

【WordPress】会話風の吹き出しをプラグインなしで表示する!

吹き出しを作るcss ブログ運営

いろんな人のブログを読ませていただいて「これは自分も使ってみたい!」と思ったら、取り入れずにはいられない、あらくま(@sa_arakuma)です。

今回は、多くの人が取り入れている会話風の吹き出しをプラグインなしでSimplicity2に取り入れた方法をお伝えしていきます。この方法はSimplicity2に限らず、WordPressサイトなら導入できますよ!

また、吹き出しのアイコン画像の設定もとっても簡単なので、ぜひ参考になさってくださいね!

この会話風の吹き出しを表示する方法はWordPress限定の方法です!
スポンサーリンク

吹き出しのスタイルシートのコード

先にスタイルシート用のコードを。

このブログではPC用とモバイル用で吹き出しに使う画像のサイズを変えていますが、画像のサイズを無理して変える必要はありません。

PC用

PCでの表示では画像サイズを縦横100pxにしています。

画像と吹き出し(テキスト)エリアの間隔は20pxくらいがちょうど良い間隔になりますので、画像のサイズを変更するときは「画像幅+20px」で『画像とテキストエリアの間隔を調整』に数字を書き換えてください。

/************************************
吹き出し
************************************/
/* 全体のスタイル */
.kaiwa {
  margin-bottom: 40px;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 100px; ← 画像の幅を調整
  height: 100px; ← 画像の高さを調整
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 100px; ← 画像の幅を調整
  height: 100px; ← 画像の高さを調整
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
  line-height: 0.5em;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 120px; ← 画像とテキストエリアの間隔を調整
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 120px; ← 画像とテキストエリアの間隔を調整
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
p.kaiwa-text {
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #aaa;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #aaa;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

モバイル用

PC用のままでもかまわないですが、モバイル表示の場合に画像が少し大きい感じがしたのでモバイル用に画像を少し小さくしたものを表示させています。

PC用との違いは「画像の大きさ」「画像とテキストエリアの間隔」の2か所になります。

この2か所を変更したものを、お使いのWordPressテーマが『Simplicity2』の場合は「mobile.css」に追加してください。その他のテーマの場合はちょっとわからないので、該当の場所を探して追加してくださいね。

アイコン画像下の空白の削除

アイコン画像の下にしっくりとこない空白ができることがある(当ブログにも空白ができました)ので、空白を削除する以下のコードをJSファイル(javascript.js)に追加しましょう。

Simplicity2をお使いなら子テーマのテーマの編集にjavascript.jsが用意されているので、そこへ追記してください。

$(function() {
    $('.kaiwa-img-left').find('p,br').remove();
    $('.kaiwa-img-right').find('p,br').remove();
});

吹き出しを表示させるコード

続いて実際にWordPressサイトへ吹き出しを表示させるコードを。

自分は以下の吹き出し用のコードを「AddQuicktag」に登録して簡単に使えるようにしています。

以下のコードを『投稿の編集』の「テキスト」エディターに貼り付ければ吹き出しを表示することができます。

アイコン画像が左側のもの

<div class="kaiwa">
  <figure class="kaiwa-img-left">
    <img src="dummy.jpg" alt="dummy">
    <figcaption class="kaiwa-img-description">画像下テキスト</figcaption>
  </figure>
  <div class="kaiwa-text-right">
    <p class="kaiwa-text">吹き出しテキスト</p>
  </div>
</div>

こんな感じで表示されます。(画像です)

アイコン画像が右側のもの

<div class="kaiwa">
  <figure class="kaiwa-img-right">
    <img src="dummy.jpg" alt="dummy">
    <figcaption class="kaiwa-img-description">画像下テキスト</figcaption>
  </figure>
  <div class="kaiwa-text-left">
    <p class="kaiwa-text">吹き出しテキスト</p>
  </div>
</div>

こんな感じで表示されます。(画像です)

アイコン画像が右の吹き出し

アイコン画像の表示と変更方法

なんでも吹き出しをプラグインを使って表示させていると、「アイコン画像をFTPを使ってサーバーにアップロードしないといけない」なんて見かけるんですけど、この方法では投稿にメディアをアップしたり画像を変更する感覚でアイコン画像を変更することができちゃいます!

アイコン画像は正方形のものを用意しましょう! 正方形でない画像を使うと画像が左右が押しつぶされたように表示されます。

アイコン画像を表示させる

たぶん、ここまでの作業(コピペだけどね!)で吹き出しを表示させると下のような感じで表示されますね。アイコン画像がないのでなんとも言えない感じです…。

アイコン画像が左の吹き出し

アイコン画像を表示させてみましょう!

1.画像が表示される部分(四角になっている場所)をクリック。

アイコン画像が表示される部分をクリック

2.「メディアを追加」をクリックしてアイコンに使う画像を選んで『投稿に挿入』をクリック。

メディアをクリック

アイコン画像を選んで投稿に挿入をクリック

これでアイコン画像が表示されましたね!(画像です)

アイコン画像表示されました

アイコン画像を変更する

今度は、アイコン画像を変更する方法です。

1.アイコン画像をクリック。

アイコン画像をクリック

2.鉛筆マークの「編集」をクリック。

編集をクリック

3.現在使っているアイコン画像が表示されますので、画像下の置換をクリック。

置換えをクリック

4.変更したい画像を選んで置換をクリック。

置き換える画像を選んで置換えをクリック

これで吹き出しのアイコン画像の変更が完了です! 簡単でしょ!!

アイコン画像が変更できました

おわりに

今回、プラグインを使わずにWordPressで会話風の吹き出しを表示させる方法は、シェフさん(@chef_moriawase)が書かれているブログ『MORIAWASE』を参考にして導入しました。

WordPressで会話風の画像とテキストをコピペで簡単表示! – MORIAWASE(モリアワセ)
先日、普通のテキストを会話風の吹き出しにする方法について書きました。(吹き出しになる仕組みについて知りたい方はぜひ読んでみてください)今回は、この吹き出しをWordPressのブログで多用する方法についてご紹介します。関連吹き出し機能が使えるWordPressテーマ「4536」TinyMCE Templatesをインス...

この方法で吹き出しを使うと画像の変更も簡単にできて便利なので、ご参考にどうぞ。

今回も最後までお付き合いくださって、ホントにありがとうございました! また次回お会いできるのを楽しみにしています!!

それでは次回までごきげんよう!

あらくま

列車やバスに乗って全国各地を訪れるのが趣味な中年オヤジ。現在は2周目となるJR全線完乗、私鉄と公営鉄道と第三セクター線の初完乗を目指して全国各地を乗り鉄旅をしています。

あらくまをフォローする
ブログ運営
スポンサーリンク
あらくまをフォローする
エンジョイ鉄旅!
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus