覚えておきたいこと、忘れないようにメモメモ

ワードプレス

ワードプレスの会話風吹き出しをcssで作ってみた① プラグインなしでコピペでOK

投稿日:2019年6月29日 更新日:

ブログを書いているとき会話形式にしたいと思ったことありませんか。

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

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

スポンサーリンク

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

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

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

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

テーマの機能を利用

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

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

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

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

会話形式のプラグインを一応調べてみたところ、
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)を選択。

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

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

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

吹き出しの使い方

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

会話形式(左側)を使う場合

  • <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>

会話形式(右側)を使う場合

会話形式(左側)のコードの1行目の

  • <div class=“balloon-L”>

  • <div class=“balloon-R”>

に変更してください。

考え事(左側)を使う場合

会話形式(左側)のコードの1行目の

  • <div class=“balloon-L”>

  • <div class=“balloon-L-th”>

に変更してください。

考え事(右側)を使う場合

会話形式(左側)のコードの1行目の

  • <div class=“balloon-L”>

  • <div class=“balloon-R-th”>

に変更してください。

まとめ

ねこ
ねこさん
ワードプレスの文章をプラグインを使うことなく、会話形式で書けるようにcssを作成しました。

画像を変えるときは普段と同様に「メディアを追加」からできるようにしました。

大仏さん
画像を変えるときも簡単ですね
ねこ
ねこさん
吹き出しを使いたいけど、プラグインは入れたくない
という方はご利用くださいな。

さらに、投稿画面で

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

を打つのも面倒くさいと感じたので、
③会話文以外をショートカット化する方法を考えました。

の記事も合わせてご利用ください。

それでは!

スポンサーリンク

-ワードプレス
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ワードプレス 会話形式

ワードプレスの会話風吹き出しをcssで作ってみた② ショートカットで簡単表示!

スポンサーリンク 先日、 ■ブログで会話形式の吹き出しを使いたい ■プラグインは使いたくない…。 ということで、cssで会話形式の吹き出しを自作しました。 無事吹き出しを作れたものの、もっと簡単に使え …

ワードプレスのページ表示速度を速くする方法はこれでした

WordPressでブログを書き始めた当初から、 自分のサイト開くのがなんか重いなあ… ってなんとなく思ってはいたんですけど、 ブログ記事を書く練習をするほうが先! ということで遅い問題は先送りにして …

ワードプレス ツイッター 連携

ワードプレスとツイッターを連携するには?Jetpackでブログに自動投稿!

スポンサーリンク WordPressで作成したブログを公開したことを twitterでツイートしたいですよね。 でもリンクを毎回手動で貼り付けるのも面倒くさい… というときはワードプレスとツイッターを …

ワードプレス 反映

【解決法】ワードプレスのスタイルシート変更がスマホ画面に反映されないときに

スポンサーリンク WordPressのスタイルシート(CSS)を変更したところ、 PCの画面ではきちんと変更されているのに、スマホ画面で確認すると反映されない…。 というときに、 変更内容をスマホ画面 …

ワードプレス ツイッター 連携

ワードプレスとツイッターを連携するには?All in one SEOでツイッターカードの設定も楽々!

スポンサーリンク 先日、WordPressとtwitterをJetpackで連携する方法をご紹介しました。 Jetpackでツイッターの自動投稿はできるようになったものの、どうにもツイッターカードの設 …