[SANGOカスタマイズ]吹き出しのデザイン・色の変更とショートコード追加

SHARE

最近、SANGOを購入して気に入って様々なブログで愛用しているみっぴーです！(^^)

今回は、吹き出しのカスタマイズに挑戦しました！

吹き出しの色変更とショートコードで複数のキャラを呼び出せるようにするカスタマイズです。

メインで使う画像と名前は、SANGOのカスタマイザーで登録すれば下記のショートコードで呼び出せるようになっていますよね。

[say]ここに文章[/say]

しかし、二つ目以降のキャラを使う時は毎回記事で下記のように入力しないといけません。

[say name="名前" img="画像のURL"]ここに文章[/say]

でも、ある程度使うキャラって決まってくるし・・・

ぱん猫

サブキャラもショートコードで呼び出したいよね
うん、メインの私だけじゃなくて2つ目、3つ目ってあったら便利

みっぴー

僕もショートコードで呼び出したいなぁ

ぱん猫

僕もショートコードで呼び出したいなぁ

ねこ

ってことで今回は、カスタマイザーに画像と名前を登録できるようにして、ショートコードで呼び出せるようにしてみました！

みっぴー

つまり「ショートコードで呼び出せるキャラを増やすカスタマイズ」だね

ねこ

あと吹き出しの色もそれぞれ別の色に出来るよ！

みっぴー

あと吹き出しのデザインもこんな感じで変更したよ！
心の声みたいな感じだね！

ちょっとPRです

みっぴー（@bennriya_mi）です～。

アイキャッチを変えただけで、広告表示回数が5倍になりました。（こっそり独り言）

今回、そのアイキャッチを誰でも使えるようにテンプレにしました。
詳しくは、下記にて

⇒アイキャッチテンプレート150種について


今回の吹き出しカスタマイズの内容

みっぴー

今回のカスタマイズでこんな事が出来るようになるよ！

今回の吹き出しカスタマイズの内容をまとめると下記の通りです。

吹き出しカスタマイズの内容
  1. カスタマイザーで画像と名前を登録できるキャラを増やす
  2. カスタマイザーで登録したキャラをショートコードで呼び出す
  3. それぞれ別の吹き出しのデザインや色を指定可能
  4. デザインを心の声風にする

修正するファイル

今回のカスタマイズで編集するファイルは下記の通りです。

このカスタマイズで修正するファイル
  1. functions.php
  2. style.css
注意
functions.phpのファイルを編集する場合は、必ずバックアップを取った上で編集してください。functions.phpの記入を誤るとブログの画面が真っ白になって管理画面にさえも入れなくなります。編集は慎重に行ってください。万が一、真っ白になった場合は「[WordPress]functions.phpを編集後に画面が真っ白になった時の対処法と注意点」を参考にしてください。

[WordPress]functions.phpを編集後に画面が真っ白になった時の対処法と注意点

吹き出しの色変更とショートコードの追加方法

みっぴー

今回は結構大変かもしれないけど追加キャラを2つまでだったらコピペだけで完了するよ！

今回の吹き出しの色変更とショートコードで呼び出すキャラの追加カスタマイズの手順は下記の通りです。

    吹き出しの色変更とショートコード追加手順
  • STEP.1
    カスタマイザーの項目追加
    「functions.php」にこれから紹介するコードを追記して吹き出しに関する設定をカスタマイザーに新たに追加します。
  • STEP.2
    ショートコードを定義
    「functions.php」にこれから紹介するコードを追記して新しいショートコードを定義します。
  • STEP.3
    CSSを定義
    「style.css」に新しいCSSを追加して吹き出しのスタイルを変更します。

1．カスタマイザーの項目追加

みっぴー

最初は、カスタマイザーの項目を追加する設定だよ

まずは、カスタマイザーに吹き出しで使う画像と名前を登録できる項目を増やしていきます。

下記のコードを追加するとカスタマイザーの画面の一番下に「吹き出しショートコード追加設定」という項目が追加されていると思います。

functions.phpに下記を追加すればオッケーです。

functions.phpの編集前は、バックアップを取ってくださいね。

下記は、吹き出しで使えるキャラを2つ追加するコードになります。なので、もしそれ以上増やしたい場合は、コードの下の「2つ以上キャラを追加したい場合」を確認してください。

functions.php 
/*********************
カスタマイザーに吹き出しキャラ追加
 *********************/
function my_theme_customize_register( $wp_customize ) {

$wp_customize->add_section( 'sayori', array(
  'title'     => '吹き出しショートコード追加設定', // 項目名
  'priority'  => 200, // 優先順位
));

    //オリジナルの吹き出し画像１
    $wp_customize->add_setting('sayori1_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayori1_image_upload', array(
            'settings' => 'sayori1_image_upload',
            'label' => '「sayori1」で呼び出すキャラ設定',
            'description' => '<small>「sayori1」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前１
    $wp_customize->add_setting('sayori1_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayori1_name', array(
        'settings' => 'sayori1_name',
        'description' => '「sayori1」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));
    
    //オリジナルの吹き出し画像２
    $wp_customize->add_setting('sayori2_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayori2_image_upload', array(
            'settings' => 'sayori2_image_upload',
            'label' => '「sayori2」で呼び出すキャラ設定',
            'description' => '<small>「sayori2」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前２
    $wp_customize->add_setting('sayori2_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayori2_name', array(
        'settings' => 'sayori2_name',
        'description' => '「sayori2」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));    
//2つ以上追加する時はこの下に追加していく
(繰り返し追加部分)
//2つ以上追加する時はこの上に追加していく
}
add_action( 'customize_register', 'my_theme_customize_register' );
functions.phpはどこ？

レンタルサーバーのFTPにログインしてください。

編集するブログのファイルが入ってるところまで進んでください。

みっぴー

大体の場合はブログ名のフォルダの中かな？

それから下記の通り進んでいくとfunctions.phpがあります。

ブログ名/wp-content/themes/お使いのテーマ/functions.php

子テーマでカスタマイズをしている人は、子テーマの中のfunctions.phpに追記してください。



【オススメツールをちょっと紹介】
複数のASPを一括で管理する無料のツール
案件の報酬額を比較できるので、1番条件の良いASPを簡単に見つけることが出来ます！

2つ以上キャラを追加したい場合

上記は、2つキャラを追加するコードなのでそれ以上追加したい場合は下記を参考にしてください。

ぱん猫

ここはカスタマイザーの項目を2つ以上追加する場合だよ

↓カスタマイザーを2つ以上追加↓

もし2つ以上のキャラを追加したい場合は下記の「sayori1」の赤文字の部分の数字を3とか4に変えて追加していけばオッケーです。

数字を全部変えないで保存するとエラーになって真っ白になると思うので間違えないようによーく確認してくださいね。

注意
‘section’ => ‘sayori’,の部分は数字を追加するとカスタマイザーの追加部分がバラバラになって分かりにくくなるので、変えないでくださいね！
functions.php 
    //オリジナルの吹き出し画像１
    $wp_customize->add_setting('sayori1_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayori1_image_upload', array(
            'settings' => 'sayori1_image_upload',
            'label' => '「sayori1」で呼び出すキャラ設定',
            'description' => '<small>「sayori1」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前１
    $wp_customize->add_setting('sayori1_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayori1_name', array(
        'settings' => 'sayori1_name',
        'description' => '「sayori1」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));

上記の追加部分の数字をどんどん増やしていけば、何個でも追加出来ます！

上記の追加部分を1つ追加した例を見たい場合は、下記を参考にしてください。

functions.php 
/*********************
カスタマイザーに吹き出しキャラ追加
 *********************/
function my_theme_customize_register( $wp_customize ) {

$wp_customize->add_section( 'sayori', array(
  'title'     => '吹き出しショートコード追加設定', // 項目名
  'priority'  => 200, // 優先順位
));

    //オリジナルの吹き出し画像１
    $wp_customize->add_setting('sayori1_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayori1_image_upload', array(
            'settings' => 'sayori1_image_upload',
            'label' => '「sayori1」で呼び出すキャラ設定',
            'description' => '<small>「sayori1」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前１
    $wp_customize->add_setting('sayori1_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayori1_name', array(
        'settings' => 'sayori1_name',
        'description' => '「sayori1」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));
    
    //オリジナルの吹き出し画像２
    $wp_customize->add_setting('sayori2_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayori2_image_upload', array(
            'settings' => 'sayori2_image_upload',
            'label' => '「sayori2」で呼び出すキャラ設定',
            'description' => '<small>「sayori2」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前２
    $wp_customize->add_setting('sayori2_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayori2_name', array(
        'settings' => 'sayori2_name',
        'description' => '「sayori2」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));    

//2つ以上追加する時はこの下に追加していく

    //オリジナルの吹き出し画像３
    $wp_customize->add_setting('sayori3_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayori3_image_upload', array(
            'settings' => 'sayori3_image_upload',
            'label' => '「sayori3」で呼び出すキャラ設定',
            'description' => '<small>「sayori3」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前３
    $wp_customize->add_setting('sayori3_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayori3_name', array(
        'settings' => 'sayori3_name',
        'description' => '「sayori3」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));

//2つ以上追加する時はこの上に追加していく
}
add_action( 'customize_register', 'my_theme_customize_register' );

2．ショートコードを定義

みっぴー

次にショートコードを定義するコードを追加していくよ

次にfunctions.phpにショートコードを定義するコードを追加します。

さっき追加したコードの下に下記をそのままコピーして貼り付けて保存してください。

functions.php 
/*********************
会話ふきだしショートコード１
 *********************/
add_shortcode('sayori1', 'sayori1_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコード１
 *********************/
function sayori1_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayori1_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayori1_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scori1">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scori1">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

/*********************
会話ふきだしショートコード２
 *********************/
add_shortcode('sayori2', 'sayori2_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコード２
 *********************/
function sayori2_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayori2_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayori2_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scori2">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scori2">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

//2つ以上追加する時はこの下に追加していく
(繰り返し追加部分)
//2つ以上追加する時はこの上に追加していく

2つ以上キャラを追加したい場合

上記は、2つキャラを追加するコードなのでそれ以上追加したい場合は下記を参考にしてください。

ぱん猫

ここはショートコードの項目を2つ以上追加する場合だよ

ねこ

でもカスタマイザーで2つ以上にしたら全部セットで増やさないとだよね

↓ショートコードを2つ以上追加↓

もし2つ以上のキャラを追加したい場合は下記の「sayori1」と「scori1」の赤文字の部分の数字を3とか4に変えて追加していけばオッケーです。

※「scori1」の部分がCSSのclassなので、これから指定するclass名は同一のものにしてくださいね。

functions.php 
/*********************
会話ふきだしショートコード１
 *********************/
add_shortcode('sayori1', 'sayori1_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコード１
 *********************/
function sayori1_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayori1_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayori1_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scori1">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scori1">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

上記の追加部分の数字をどんどん増やしていけば、何個でも追加出来ます！

上記の追加部分を1つ追加した例を見たい場合は、下記を参考にしてください。

functions.php 
/*********************
会話ふきだしショートコード１
 *********************/
add_shortcode('sayori1', 'sayori1_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコード１
 *********************/
function sayori1_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayori1_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayori1_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scori1">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scori1">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

/*********************
会話ふきだしショートコード２
 *********************/
add_shortcode('sayori2', 'sayori2_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコード２
 *********************/
function sayori2_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayori2_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayori2_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scori2">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scori2">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

//2つ以上追加する時はこの下に追加していく

/*********************
会話ふきだしショートコード３
 *********************/
add_shortcode('sayori3', 'sayori3_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコード３
 *********************/
function sayori3_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayori3_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayori3_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scori3">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scori3">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

//2つ以上追加する時はこの上に追加していく

3．CSSを定義

みっぴー

最後にstyle.cssを指定するよ

最後にこれまで設定してきたショートコードで呼び出す吹き出しのデザインをstyle.cssに追加していきます。

CSS 
/*--------------------------------------
  ふきだしの色を変える（オリジナル左の１）
--------------------------------------*/
.scori1 ul,
.scori1 ol {
  margin: 5px 0;
  padding: 0 0 0 1.4em;
  border: none;
  box-shadow: none;
  background: transparent;
}
.scori1 {
  display: inline-block;
  text-align: left;
  padding: 13px;
  border: solid 0.5px #aaa;/*外枠の色*/
  border-radius: 12px;
  background: #F4B798;/*吹き出しの色*/
  word-break: break-all;
}
.scori1:before {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -21px;
  border: 11px solid transparent;
  border-right: 11px solid #aaa;/*外枠の色*/
  content: "";
}
.scori1:after {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -20.5px;
  border: 11px solid transparent;
  border-right: 11px solid #F4B798;/*吹き出しの色*/
  content: "";
}
.scori1 p {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 481px) {
  .scori1:before,
  .scori1:after {
    top: 30px;
}
}
/*--------------------------------------
  ふきだしの色を変える（オリジナル右の１）
--------------------------------------*/
.right .scori1:before,
.right .scori1:after {
  right: -21px;
  left: auto;
  border: 11px solid transparent;
  border-left: 11px solid #aaa;/*外枠の色*/
}
.right .scori1:after {
  right: -20px;
  border-left-color: #F4B798;/*吹き出しの色*/
}
/*--------------------------------------
  ふきだしの色を変える（オリジナル左の２）
--------------------------------------*/
.scori2 ul,
.scori2 ol {
  margin: 5px 0;
  padding: 0 0 0 1.4em;
  border: none;
  box-shadow: none;
  background: transparent;
}
.scori2 {
  display: inline-block;
  text-align: left;
  padding: 13px;
  border: solid 0.5px #aaa;/*外枠の色*/
  border-radius: 12px;
  background: #FFE2B3;/*吹き出しの色*/
  word-break: break-all;
}
.scori2:before {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -21px;
  border: 11px solid transparent;
  border-right: 11px solid #aaa;/*外枠の色*/
  content: "";
}
.scori2:after {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -20.5px;
  border: 11px solid transparent;
  border-right: 11px solid #FFE2B3;/*吹き出しの色*/
  content: "";
}
.scori2 p {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 481px) {
  .scori2:before,
  .scori2:after {
    top: 30px;
}
}
/*--------------------------------------
  ふきだしの色を変える（オリジナル右の２）
--------------------------------------*/
.right .scori2:before,
.right .scori2:after {
  right: -21px;
  left: auto;
  border: 11px solid transparent;
  border-left: 11px solid #aaa;/*外枠の色*/
}
.right .scori2:after {
  right: -20px;
  border-left-color: #FFE2B3;/*吹き出しの色*/
}

色を変えたい時は、/*吹き出しの色*/と説明が書いてあるところを変更すれば色変更が可能です。

吹き出しの外枠の色を変えたい場合は、/*外枠の色*/の部分を変更してください。

2つ以上キャラを追加したい場合

上記は、2つキャラを追加するCSSなのでそれ以上追加したい場合は下記を参考にしてください。

ぱん猫

ここはCSSの項目を2つ以上追加する場合だよ

ねこ

だから、2つ以上にしたら全部セットで増やさないとでしょ！

↓CSSを2つ以上追加↓

もし2つ以上のキャラを追加したい場合は下記の「scori1」の赤文字の部分の数字を3とか4に変えて追加していけばオッケーです。

2のショートコード定義の時に追加したclass名と同一になるようにしてくださいね。

CSS 
/*--------------------------------------
  ふきだしの色を変える（オリジナル左の１）
--------------------------------------*/
.scori1 ul,
.scori1 ol {
  margin: 5px 0;
  padding: 0 0 0 1.4em;
  border: none;
  box-shadow: none;
  background: transparent;
}
.scori1 {
  display: inline-block;
  text-align: left;
  padding: 13px;
  border: solid 0.5px #aaa;/*外枠の色*/
  border-radius: 12px;
  background: #F4B798;/*吹き出しの色*/
  word-break: break-all;
}
.scori1:before {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -21px;
  border: 11px solid transparent;
  border-right: 11px solid #aaa;/*外枠の色*/
  content: "";
}
.scori1:after {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -20.5px;
  border: 11px solid transparent;
  border-right: 11px solid #F4B798;/*吹き出しの色*/
  content: "";
}
.scori1 p {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 481px) {
  .scori1:before,
  .scori1:after {
    top: 30px;
}
}
/*--------------------------------------
  ふきだしの色を変える（オリジナル右の１）
--------------------------------------*/
.right .scori1:before,
.right .scori1:after {
  right: -21px;
  left: auto;
  border: 11px solid transparent;
  border-left: 11px solid #aaa;/*外枠の色*/
}
.right .scori1:after {
  right: -20px;
  border-left-color: #F4B798;/*吹き出しの色*/
}

吹き出しのデザインを心の声風に変更したい場合

吹き出しのデザイン変更をしていきます！

みっぴー

次に吹き出しのデザインを心の声風に変える方法です！

みっぴー

こんな感じ

手順は、上記で説明したものとほぼ同じです！

    吹き出しを心の声にする手順
  • STEP.1
    カスタマイザーの項目追加
    「functions.php」にこれから紹介するコードを追記して吹き出しに関する設定をカスタマイザーに新たに追加します。
  • STEP.2
    ショートコードを定義
    「functions.php」にこれから紹介するコードを追記して新しいショートコードを定義します。
  • STEP.3
    CSSを定義
    「style.css」に新しいCSSを追加して吹き出しのスタイルを変更します。

1．カスタマイザーの項目追加

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

※すでに上記で説明した手順を追加している人は、下記の間の部分だけ2キャラ以上追加する人の手順にある(繰り返し追加部分)に追加してください。

//すでに上記を追加済の場合はここから下を追加
この間のコードを(繰り返し追加部分)に追加してください。
//すでに追加済の場合はここから上を追加

functions.php 
/*********************
カスタマイザーに吹き出しキャラ追加
 *********************/
function my_theme_customize_register( $wp_customize ) {

$wp_customize->add_section( 'sayori', array(
  'title'     => '吹き出しショートコード追加設定', // 項目名
  'priority'  => 200, // 優先順位
));
//すでに上記を追加済の場合はここから下を追加
    //オリジナルの吹き出し画像k1
    $wp_customize->add_setting('sayorik1_image_upload', array(
        'type' => 'option',
        array(
            'sanitize_callback' => 'theme_slug_sanitize_file',
        ),
    ));
    if (class_exists('WP_Customize_Image_Control')):
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sayorik1_image_upload', array(
            'settings' => 'sayorik1_image_upload',
            'label' => '「sayorik1」で呼び出すキャラ設定',
            'description' => '<small>「sayorik1」で呼び出す画像を登録してください。</small>',
            'section' => 'sayori',
        )));
    endif;
    //オリジナルの吹き出しの名前k1
    $wp_customize->add_setting('sayorik1_name', array(
        'type' => 'option',
        'transport' => 'postMessage',
        array('sanitize_callback' => 'wp_filter_nohtml_kses'),
    ));
    $wp_customize->add_control('sayorik1_name', array(
        'settings' => 'sayorik1_name',
        'description' => '「sayorik1」の名前',
        'input_attrs' => array('placeholder' => '表示しない場合は空欄に'),
        'section' => 'sayori',
        'type' => 'text',
    ));
//すでに追加済の場合はここから上を追加
}
add_action( 'customize_register', 'my_theme_customize_register' );

2．ショートコードを定義

次にショートコードを定義していきます。

functions.php 
/*********************
会話ふきだしショートコードk1
 *********************/
add_shortcode('sayorik1', 'sayorik1_what'); //会話形式の吹き出し

/*********************
会話ふきだしショートコードk1
 *********************/
function sayorik1_what($atts, $content = null)
{
    $img = (isset($atts['img'])) ? esc_url($atts['img']) : esc_url(get_option('sayorik1_image_upload'));
    $name = (isset($atts['name'])) ? esc_attr($atts['name']) : esc_attr(get_option('sayorik1_name'));
    if (isset($atts['from'])) {
        $from = ($atts['from'] == "right") ? "right" : "left"; //入力が無ければleftに
    } else {
        $from = "left";
    }
    if ($from == "right") { //右に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<div class="chatting"><div class="scorik1">{$content}</div></div>
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
				</div>
EOF;
    } else { //左に吹き出し
        $output = <<<EOF
				<div class="say {$from}">
					<p class="faceicon"><img src="{$img}"><span>{$name}</span></p>
					<div class="chatting"><div class="scorik1">{$content}</div></div>
				</div>
EOF;
    } //endif
    return $output;
}

3．CSSを定義

最後にstyle.cssにCSSを追加してください。

下記のコードをコピペして貼り付けてください。

色変更などお好きなものに変えてくださいね。

CSS 
/*--------------------------------------
  ふきだしのデザインを変える（心の声風）
--------------------------------------*/
.scorik1 {
  display: inline-block;
  position: relative;
  text-align: left;
  padding: 13px;
  border: solid 0.5px #aaa;/*外枠の色*/
  border-radius: 12px;
  background: #FCECEA;/*吹き出しの色*/
  word-break: break-all;
  margin: 0 0 2em 26px;
}
.scorik1:before{ 
  display: inline-block;
  position: absolute;
  content: "";
  left: -38px;
  width: 10px;
  height: 9px;
  bottom: 15px;
  background: #FCECEA;
  border: solid 0.4px #aaa;
  border-radius: 50%;
}
.scorik1:after{
  display: inline-block;
  position: absolute;
  content: "";
  left: -23px;
  width: 16px;
  height: 14px;
  bottom: 20px;
  background: #FCECEA;
  border: solid 0.4px #aaa;
  border-radius: 50%;
}
.scorik1 p {
    margin: 0;
    padding: 0;
}
/*--------------------------------------
  ふきだしの色を変える（心の声風の右）
--------------------------------------*/
.right .scorik1 {
  margin: 0 26px 2em 0;
}
.right .scorik1:before {
  right: -38px;
  left: auto;
}
.right .scorik1:after {
  right: -20px;
  left: auto;
}

ショートコードの使い方

みっぴー

ショートコードの使い方だよ

デフォルトのショートコード

デフォルトのショートコードは、下記でしたね。

ショートコード 
[say]ここに文章[/say]

今回追加したショートコード

今回追加したショートコードを使うには下記のように入力してくださいね。

もしclass名などを自分で変更している場合は、それに合わせて変更してくださいね。

右側に画像を出す場合もSANGOの設定どおりに from="right"を追加すればオッケーです。

みっぴー

sayori1の数字を設定した数字に変更してくださいね！

sayori1で追加したキャラの左側

ショートコード 
[sayori1]ここに文章[/sayori1]

ぱん猫

左側～

sayori1で追加したキャラの右側

ショートコード 
[sayori1 from="right"]ここに文章[/sayori1]
右側～

ねこ

今回追加したショートコード(心の声風)

みっぴー

心の声風の吹き出し

吹き出しのデザイン変更(心の声風)を呼び出す時のショートコードは下記です。

心の声風の左側

ショートコード 
[sayorik1]ここに文章[/sayorik1]

みっぴー

左側～

心の声風の右側

ショートコード 
[sayorik1 from="right"]ここに文章[/sayorik1]
右側も呼び出せるよ

みっぴー

これで、メインで使うキャラをショートコードで何個でも呼び出せます！(^^)

おまけ：デフォルトの色を変えたい場合は

とこれまで色々と説明してきましたが、とにかくデフォルトの色を変えたいだけ！という方は下記のCSSをstyle.cssに追記すればオッケーです。

/*吹き出しの色*/と/*外枠の色*/の部分を好きな色に変更して使って下さいね！

CSS 
/*--------------------------------------
  ふきだしの色を変える（デフォルトの左）
--------------------------------------*/
.sc {
 border: solid 0.5px #aaa;/*外枠の色*/
 background: #FCECEA;/*吹き出しの色*/
}
.sc:before {
 left: -20.5px;
 border: 11px solid transparent;
 border-right: 11px solid #aaa;/*外枠の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 11px solid transparent;
 border-right: 11px solid #FCECEA;/*吹き出しの色*/
 content: "";
}
/*--------------------------------------
  ふきだしの色を変える（デフォルトの右）
--------------------------------------*/
.right .sc:before,
.right .sc:after {
  right: -21px;
  left: auto;
  border: 11px solid transparent;
  border-left: 11px solid #aaa;/*外枠の色*/
}
.right .sc:after {
  right: -20px;
  border-left-color: #FCECEA;/*吹き出しの色*/
}

みっぴー

疲れたー

ぱん猫

お疲れ様でした！

2 COMMENTS

けん×2

はじめまして！

WordPressを利用していて、こちらの「吹き出しのデザイン・色の変更とショートコード追加」の記事を参考にさせていただき、無事編集が完了できました！！

注意文のように、実際に画面が真っ白になることも多々あり苦労しましたが、リカバリーも成功したのは良い思い出です…笑

さて、今回こちらでお聞きしたいのは、このfunction.phpに『画像を登録する方法』です。

‘description’ => ‘「sayori1」で呼び出す画像を登録してください。’,

↑上記のように、呼び出す画像をここに登録すれば良いのかは理解できたのですが、登録するには画像のURLを添付するのか、それとも別のコードを編集するのかよくわからなかったため、ご連絡させていただきました。

※ちなみに、画像のURLでは解決せず…

ぜひ、またブログにて方法を書いていただいたり、ご教示いただけますと幸いですm(_ _)m

みっぴーさんのブログ、とてもわかりやすくてWordPress初心者としてはとても心強いです。
どうぞよろしくお願いいたします！

返信する
みっぴー みっぴー

けん×2さん、コメントありがとうございます！(*´ω｀*)
お返事が遅くなってしまって申し訳ありません！
とてもわかりやすくてと言って頂き、とても嬉しいです(^^)ありがとうございます♪

function.phpに『画像を登録する方法』とのご質問でしたが、functions.phpに上記のコードをそのままコピペして貼り付けて頂くと、WordPressの管理画面の中にある「外観」⇒「カスタマイズ」の中に画像を登録する項目が出てくるので、そちらで画像を登録して頂く感じになります。

外観⇒カスタマイズを開くと一番下に「吹き出しショートコード追加設定」という設定項目が増えていると思うのですが、いかがでしょうか？
その項目の中に画像の選択ボタンを押して、画像を選択して、上にある青い「公開」ボタンを押してください。

それで画像登録が出来ると思います！

もし、まだ出来なければ教えてください(*^-^*)

返信する

けん×2 へ返信する コメントをキャンセル

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

前の記事

[SANGOカスタマイズ]関連記事(横長)のデザインを変更

次の記事

[SANGOカスタマイズ]アコーディオンのデザインを変更