Lognote

ネット集客に強い整体院サイトを制作

affinger4-hukidashi-thumbnail

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

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

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

affinger4-hukidashi-01

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

ただ、ふきだしのためだけに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
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

WordPressで会話風ふきだしを表示させるCSSカスタマイズ
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger6-logo-use-google-web-fonts-thumbnail

WordPressの英字フォントをGoogle Web Fontsに変更してかっこよくカスタマイズする方法

STINGER8のタイトルロゴをGoogle Web Fontsを使ってカスタマイズする方法のご紹介します。

mouse-cursor-zoom-thumbnail

Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法

ふわっと画像を拡大させるエフェクトが実装できるLightbox。今回は、拡大可能な画像とわかるように、マ...

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法

アイコンフォント「Font Awesome」を、WordPressに導入する方法を紹介します。 目次Font …

custom-post-category-thumbnail

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回は …

wordpress-category-tag-change-thumbnail

WordPressのカテゴリー⇔タグを変換して訪問者に親切なブログ作りをしよう

ブログ訪問者はサイドバーなどに設置されたカテゴリーから「Wordpressの記事数が多いから参考になる記事があ …

コメントを入力

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

トラックバックURL

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


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい