ワードプレスcssで会話形式の吹き出しを作成①　プラグインなし！コピペでOK

ねこさん

WordPressでブログを書いているとき会話形式にしたい

と思ったことありませんか。

文字ばかりだと読みにくいので吹き出しを使いたい。
しかしSpeech Bubbleなどのプラグインは使いたくない…。

ということでcssで会話形式のふきだしを自作してみました。
使うときはコピペでOKです。

※ 当サイトではアフィリエイト広告を利用しています

ワードプレスで吹き出しを使いたい

ワードプレスで吹き出しを使いたい場合は、

　■テーマの機能を利用
　■プラグインをインストール
　■cssで作成

のいずれかになるかと思います。

以下でそれぞれの特徴をまとめました。

テーマの機能を利用

私が使っているテーマはSTINGER8。

シンプルさが気に入って使っているのですが、シンプルすぎて吹き出しの機能なんてありません。

ねこさん

※現在は有料テーマのJINを使っています。

プラグインをインストール

プラグインをインストールすると、サイト表示が重くなるから嫌

という方も多いのではないでしょうか。
私もできるならプラグインは使いたくない主義です。

会話形式のプラグインを一応調べてみたところ、
「Speech Bubble」というプラグインが有名のようです。
いろいろな吹き出しが用意されているみたい。

しかし、スピーチバブルで画像を使うときはわざわざFTPツールを使ってサーバーにアップロードする必要があるとか。

ねこさん

ワードプレス上で完結できないのはあまりにも面倒くさい。

cssで実装

テーマにもなく、Speech Bubbleも使いたくないとなれば、

自分で作ればいいじゃないの。

ということで、会話形式の吹き出しをcssで作ってみました。

以下、覚書用にメモしていきますが、
使ってみたい場合は、ワードプレスのスタイルシートにコードをコピペしてご利用ください。

コピペする際は念のためバックアップもとってくださいね

ワードプレスの会話風ふきだしのcssを書いてみた

完成した吹き出しのイメージ

さっきからたびたび使っていますが、

今回の吹き出しを使うと
こんな風になります

会話形式（左側）

会話形式（右側）

考え事（左側）

考え事（右側）

作成したコード

作成したコードはこんな感じ。
スタイルシートにコードをコピペすれば使えるようになるはずです。

会話形式（左側）


/*--------------------
　 吹き出し
--------------------*/
/* セリフ_画像が左側 */
.balloon-L{
    position: relative;
    margin-bottom: 50px;  /* 吹き出し下の文章と重ならないように */
}
/* 文字設定 */
.balloon-L .text{
    position: relative;
    padding: 20px;
    border-radius: 10px;
    border-style: solid; border-color: #c0c0c0;/* セリフ枠の色 */
    max-width: calc(100% - 120px);
    display: inline-block;        /* 文字長さに応じた領域になるように */
    margin-left: 100px;
}
/* 画像設定 */
.balloon-L .icon{
    position: absolute;
    left: -50px;
    top: 0;
    width: 85px;         /* 画像の大きさ */
    height: 85px;
}
.balloon-L .icon-font {         /* 画像下の文字の大きさ */
    padding: 2px 0 0;
    font-size: 10px;
    text-align: center;
}
/* 三角アイコン */
.balloon-L::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 85px;
    top: 20px;
    border-right: 15px solid #c0c0c0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.balloon-L::after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 88px;
    top: 20px;
    border-right: 15px solid #fff;        /* ブログの背景色に合わせる */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

会話形式（右側）


/* セリフ_画像が右側 */
.balloon-R{
    position: relative;
    margin-bottom: 50px;
    text-align: right;    /* 右端寄せ */
}
/* 文字設定 */
.balloon-R .text{
    position: relative;
    padding: 20px;
    border-radius: 10px;
    border-style: solid; border-color: #c0c0c0;
    max-width: calc(100% - 120px);
    display: inline-block;
    text-align: left;     /* 文章左寄せ */
    margin-right: 100px;
}
/* 画像設定 */
.balloon-R .icon{
    position: absolute;
    right: -50px;
    top: 0;
    width: 85px;         /* 画像の大きさ */
    height: 85px;
}
.balloon-R .icon-font {         /* 画像下の文字の大きさ */
    padding: 2px 0 0;
    font-size: 10px;
    text-align: center;
}
/* 三角アイコン */
.balloon-R::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 85px;
    top: 20px;
    border-left: 15px solid #c0c0c0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.balloon-R::after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 88px;
    top: 20px;
    border-left: 15px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

考え事（左側）


 スポンサーリンク
     
/* 考え事?画像が左側 */
.balloon-L-th{
    position: relative;
    margin-bottom: 50px;
}
/* 文字設定 */
.balloon-L-th .text{
    position: relative;
    padding: 20px;
    border-radius: 10px;
    border-style: solid; border-color: #c0c0c0;
    max-width: calc(100% - 120px);
    display: inline-block;
    margin-left: 100px;
}
/* 画像設定 */
.balloon-L-th .icon{
    position: absolute;
    left: -50px;
    top: 0;
    width: 85px;         /* 画像の大きさ */
    height: 85px;
}
.balloon-L-th .icon-font {         /* 画像下の文字の大きさ */
    padding: 2px 0 0;
    font-size: 10px;
    text-align: center;
}
/* 大きい丸 */
.balloon-L-th::before{
    content: '';
    position: absolute;
    display: block;
    border-style: solid; border-color: #c0c0c0;
    border-radius: 50%;
    left: 82px;
    top: 15px;
    width: 15px;
    height: 15px;
}
/* 小さい丸 */
.balloon-L-th::after{
    content: '';
    position: absolute;
    display: block;
    border-style: solid; border-color: #c0c0c0;
    border-radius: 50%;
    left: 70px;
    top: 25px;
    width: 10px;
    height: 10px;
}

考え事（右側）


/* 考え事?画像が右側 */
.balloon-R-th{
    position: relative;
    text-align: right;
    margin-bottom: 50px;
}
/* 文字設定 */
.balloon-R-th .text{
    position: relative;
    padding: 20px;
    border-radius: 10px;
    border-style: solid; border-color: #c0c0c0;
    max-width: calc(100% - 120px);
    display: inline-block;
    text-align: left;     /* 文章左寄せ */
    margin-right: 100px;
}
/* 画像設定 */
.balloon-R-th .icon{
    position: absolute;
    right: -50px;
    top: 0;
    width: 85px;         /* 画像の大きさ */
    height: 85px;
}
.balloon-R-th .icon-font {         /* 画像下の文字の大きさ */
    padding: 2px 0 0;
    font-size: 10px;
    text-align: center;
}
/* 大きい丸 */
.balloon-R-th::before{
    content: '';
    position: absolute;
    display: block;
    border-style: solid; border-color: #c0c0c0;
    border-radius: 50%;
    right: 82px;
    top: 15px;
    width: 15px;
    height: 15px;
}
/* 小さい丸 */
.balloon-R-th::after{
    content: '';
    position: absolute;
    display: block;
    border-style: solid; border-color: #c0c0c0;
    border-radius: 50%;
    right: 70px;
    top: 25px;
    width: 10px;
 height: 10px;
}

ねこさんの画像のように、吹き出しに画像を使う場合、
85px×85pxで自動調整するようにしました。

画像の大きさを変えたい場合は
/* 画像設定 */
の項目のwidthとheightの数字を調整すればOK。

スタイルシートにコピペ

上のコードをスタイルシートにコピペしていきます。

①ワードプレスの
「外観」－「テーマの編集」をクリック。

②右側の一覧からスタイルシート (style.css)を選択。

③スタイルシートのコードの一番後ろに、上で紹介したコードをコピペ。
会話形式（左右）、考え事（左右）の４種類とも使う場合は、それぞれコピペしていってください。

④「ファイルを更新」をクリック。

これでスタイルシートの設定は完了です。
この設定は１度やっておけば、後はいじる必要はありません。

吹き出しの使い方

記事中で吹き出しを使うには、
テキスト欄に以下のコードをコピペして使います。

会話形式（左側）を使う場合

<div class=“balloon-L”>
<figure class=“icon”>
（①画像URL）
<figcaption class=“icon-font”>（②名前）</figcaption>
</figure>
<div class=“text”>
（③会話文）
</div>
</div>

コード中の赤文字で書いた
①画像URL
②名前
③会話文

は以下のように自分の好きなように設定ください。

①画像URLについて

①画像URLは、普段画像を使うときと同じように、
「メディアを追加」から選べばOKです。

<img src=

から始まるコードになります。

このとき、
「添付ファイルの表示設定」の「リンク先」をなしにしてください。

②名前について

②名前は「ねこさん」のように画像の下に表示される文字です。

③会話文について

③会話文はセリフです。

会話形式（左側）のコードの例です

<div class=“balloon-L”>
<figure class=“icon”>
<img src=“https://ichinomemochou.com/01/neko.png” alt=“ねこ” width=“197” height=“145” class=“aligncenter size-full wp-image-1499” />
<figcaption class=“icon-font”>ねこさん</figcaption>
</figure>
<div class=“text”>会話形式（左側）のコードの例です</div>
</div>