affinger4-hukidashi-thumbnail

WordPressで会話風ふきだしを表示させるCSSカスタマイズ

公開日:2017-03-22
最終更新日:

Pocket

昨年12月、AFFINGER4に会話風ふきだし機能が追加されました。

affinger4-hukidashi-01

これ、使い勝手良さそう!

ただ、ふきだしのためだけにAFFINGER4に移行するのはリスクも高いし、また一からカスタマイズし直すのはさすがに気が重く躊躇していました。

それに、AFFINGER4じゃなくても今使っているテーマで同じようにふきだしが使えたらそれに越したことはないですよね?

WordPressなら「Speech bubble」というプラグインもありますが、なるべくプラグインは使わずにつけられないかといろいろ調べて、ショードコードを使って呼び出す方法で簡単に実装できるということがわかりました。

この方法だと、クイックタグをあらかじめ登録しておくことで、記事内の好きなところに自由に使うこともできます。

ふきだしごとにHTMLコードを入力する必要もなくなるので、記事も煩雑にならないというメリットもあります。

最終完成イメージ

この記事で紹介するカスタマイズの完成イメージです。

見た目はほぼAFFINGER4と同じです。

ヤマカワ
このようなふきだしが記事内どこにでも自由に配置できます

AFFINGER4では数に制限がありますが、何人でも好きなだけ登録できます(10人でも100人でもOK!)
CSSでふきだしの色も自由に変更できます

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • functions.phpにショートコードを作成
  • デザイン用CSSを記述
  • オリジナルクイックタグを追加

functions.phpにショートコードを作成

それでは、実際にカスタマイズをおこなっていきます。

まず、下記のPHPコードをfunctions.phpに追記してください。

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon1 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa1', 'kaiwasc1Func');

アイコンURLに表示したい人物の画像URLを指定します。CSSで60pxの正方形で表示するので、最低でも60px以上の画像を指定してください。

アイコンの名前はアイコンの下に小さく表示される名前です。

会話アイコンを2人、3人と増やしたい場合は、上記コードをそのままコピペすればOKです。

例えば3人分作りたいときは、

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon1 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa1', 'kaiwasc1Func');

function kaiwasc2Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon2 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa2', 'kaiwasc2Func');

function kaiwasc3Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon3 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa3', 'kaiwasc3Func');

このように、2行目のkaiwasc1Func、3行目のkaiwaicon1、6行目のkaiwa1kaiwasc1Funcも数字部分をコピーした数に合わせて変更してください。

また、ふきだしの色やデザインは3行目のkaiwaicon1のセレクタで指定します。

デザイン用CSSを記述

次にデザインを加えます。

共通部分に下記のCSSを追記してください。

/*--------------------------------------
会話風ふきだしデザイン
--------------------------------------*/
.kaiwa-box {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display:table;
}

.kaiwa-face {
    text-align:center;
    display: table-cell;
    width:60px;
    vertical-align:middle;
}

.kaiwa-face img{
    border-radius: 60px;
    border: 1px solid #ccc;
    margin-bottom:5px;
}

.kaiwa-face-name {
    color: #333333;
    font-size:70%;
    line-height:1.5;
    max-width:60px;
}

.kaiwa-area {
    display: table-cell;
    margin:0;
    vertical-align:middle;
    text-align:left;
}

.kaiwa-hukidashi {
    display: inline-block;
    padding: 15px 20px;
    margin-left: 20px;
    border-radius: 7px;
    position: relative;
    background-color: #f9f9f9;
}

.post .kaiwa-hukidashi p:last-child {
     margin-bottom:0px;
}

.kaiwa-hukidashi:after {
    content: "";
    position: absolute;
    top: 50%; left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #f9f9f9 transparent transparent;
}

.kaiwaicon1 .kaiwa-hukidashi:after { border-color: transparent #ddeeff transparent transparent; }
.kaiwaicon1 .kaiwa-hukidashi {  color: #333333; background-color: #ddeeff; }

.kaiwaicon2 .kaiwa-hukidashi:after { border-color: transparent #ECF8E0 transparent transparent; }
.kaiwaicon2 .kaiwa-hukidashi {  color: #333333; background-color: #ECF8E0; }

.kaiwaicon3 .kaiwa-hukidashi:after { border-color: transparent #F8E0E0 transparent transparent; }
.kaiwaicon3 .kaiwa-hukidashi {  color: #333333; background-color: #F8E0E0; }

複数のふきだしを作る場合は、64行目、65行目の.kaiwaicon1.kaiwaicon2.kaiwaicon3のように増やして背景色や文字色を変更してください。

あとは記事編集画面でこのように記述するだけです。

affinger4-hukidashi-02

オリジナルクイックタグを追加

ここまでで会話風ふきだしの実装はできましたが、毎回ショートコードを手打ちするのは面倒ですよね?

そこで、投稿ページにオリジナルのクイックタグを追加します。

下記のPHPコードをfunctions.phpに追記してください。

if (!function_exists('add_orignal_quicktags')) {
//オリジナルクイックタグ登録
    function add_orignal_quicktags() {
        if ( wp_script_is( 'quicktags' ) ) { ?>
            <script type="text/javascript">
                QTags.addButton('ed_kaiwa1', '会話風吹き出し1', '[kaiwa1]', '[/kaiwa1]');
                QTags.addButton('ed_kaiwa2', '会話風吹き出し2', '[kaiwa2]', '[/kaiwa2]');
                QTags.addButton('ed_kaiwa3', '会話風吹き出し3', '[kaiwa3]', '[/kaiwa3]');
            </script>
            <?php
        }
    }
}
add_action('admin_print_footer_scripts', 'add_orignal_quicktags');

これでワンクリックでふきだしが設置できるようになります。

affinger4-hukidashi-03

横顔シルエットフリー素材ダウンロードリンク

今回使わせていただいたシルエットフリー素材を紹介します。

■男性シルエット

affinger4-hukidashi-04

■女性シルエット

affinger4-hukidashi-05

■子供シルエット

affinger4-hukidashi-06

ふきだしと顔の向きが左右逆なので、画像編集ソフトで反転させて使いましょう。

以上、「WordPressで会話風ふきだしを表示させるCSSカスタマイズ」という記事をお届けしました。

それでは、また。

オススメ商品はこちら!

-WordPress
-

ヤマカワ (@lognotebiz) の一言
記事内のちょっとしたアクセントとしてふきだしは便利ですね!実店舗ブログならお客様との会話や口コミページでも使えますよ!
この記事のタイトルとURLをコピーする
WordPressで会話風ふきだしを表示させるCSSカスタマイズ
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

mts-simple-booking-c-fatal-error-thumbnail

「MTS Simple Booking-C」のフェイタルエラー解決方法

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てしまいました...

child-theme-copy-thumbnail

WordPressの親テーマのファイルを子テーマにコピーする方法

サーバー上のファイルにアクセスするFTPソフト「FFFTP」の設定方法と使い方を解説します。WordPressはサ...

salon-for-wordpress-theme-healer-thumbnail

整体院・サロン専用WordPressテーマ「Healer」をリリースしました

スマホ対応。SEO対策とウェブ集客便利機能標準装備。整体院・サロン経営に特化した専用WordPressテーマ...

custom-field-affiliate-banner-thumbnail

カスタムフィールドで記事毎にアフィリエイト広告を貼り替える方法

Amazonアソシエイトやアフィリエイト広告は記事にマッチしなければクリック率は上がりません。この記事...

comment-coupon-thumbnail

整体院の口コミ促進!コメントをくれた方に電子クーポンを配る方法

先日、WordPressの標準コメント機能を使って、お客様の声を掲載する方法を紹介しました。今回はそのおま...


コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士

にほんブログ村 ブログブログ ブログノウハウへ

ヤマカワ
2017/8/16
子テーマのコピー方法はカスタマイズの基本ですので省略してしまいました。 新しく別ページで解説記事を...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい
ヤマカワ
2017/7/25
キャッシュの削除は試されましたでしょうか。 それでも反映されないようでしたら、!important...
haruboshi
2017/7/24
全く反映されません。