ショートコード対応のカラー会話風ふきだし|SANGOコピペカスタマイズ




いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

先日、このブログのテーマをSTORKからSANGOに変えました!

STORK(ストーク)のときは、ふきだしをカスタマイズして人物によって色を変えたりしていたんですが、SANGOではうまく種類の追加ができず…。

わたし

だから、自分で作っちゃいました。

ということで、ふきだしのショートコードを自作してみました。

デザインはSANGOのデフォルトのふきだしに寄せていますが、同じではないので混合して使うのはあまりオススメしません。

この記事に載せているコードを、function.phpとcssにコピペすれば、ショートコードで簡単に会話風ふきだしが使えます。

カラーバリエーションもいろいろ用意してみました。

自分で色をカスタマイズする方法も記載してありますので、オリジナルのふきだしもつくってみてくださいね(・∀・)

このままのコードで、「STORK(ストーク)」と「SANGO」は使用できることを確認しています。

ショートコードで使えるオリジナルのふきだしを作ったよ

色の指定をしなければ、この薄い灰色のふきだしが表示される仕組みになっています。

この記事を書く前に、「SANGO」「STORK(ストーク)」で使えることを確認済みです。他のテーマは表示崩れが起きる可能性があります。

その他、「使えたよ!」という例があれば、実際に試したテーマを教えていただけると幸いです。

「Simplicity」にもコピペで使えました。

ただ、アイコンの大きさを「3em」にしないと、アイコンの下に吹き出しがきてしまいます。

そして3emだと小さいので、border: 1pxにしてみました。

今までスピーチバブルを使っていましたが、こちらの方が簡単でとてもいいですね!
かわいいカスタマイズを教えてくださりありがとうございます!

当記事のコメント欄より引用

SANGOのデフォルトのふきだしの中ではショートコードが使えませんが、このふきだしなら、ふきだしの中でもショートコードが使えます。

ショートコードが使えるようにしよう

phpファイルを触りますので、バックアップをとってから作業を行ってください。

まず、子テーマのfunction.phpに以下のコードを追記します。

//オリジナルのふきだしを作るよ~//
function hukidashi_area( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'icon' => '',
        'type' => '',
        'name' => '',
    ), $atts ) );
    return '<div class="hukidashi cf ' .$type. '"><figure class="icon"><img src="' . $icon . '"><figcaption class="name">' . $name . '</figcaption></figure><div class="hc">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('hukidashi', 'hukidashi_area');

子テーマに書かないと、親テーマのアップデートがあるたびに書き直さないといけなくなりますので、必ず子テーマのfunction.phpに書いてくださいね。

基本のスタイルを指定しよう

のちほど、いろいろな色のふきだし用コードを載せますが、この基本コードは必ず記載しておいてください。

この記載がないと、ふきだしが表示されなくなります。というか、そうしないとコード1つ1つが長くなるので、あえてそうしています。

コピペする場所は子テーマのstyle.css。

/*オリジナルふきだし基本コード*/
.hukidashi .name{
    margin-top: 0.5em;
    font-size: 0.7em;
    color: #666;
    font-weight: bold;
}
.hukidashi{
    margin:1em 0 1.3em;
    font-size:0.95em;
}
.hukidashi .hc{
    text-align: left;
    border:3px solid #FAFAFA;
    background-color: #FAFAFA;
    color: #555;
    margin-top: 0.5em;
    position:relative;
  width: calc(100% - 6em);
    border-radius:12px;
}
.hukidashi.left .hc{
    float:right;
    padding: 1em 0.8em 1em 1em;
}
.hukidashi.right .hc{
    float:left;
    padding: 1em 1em 0.8em 1em;
}
.hukidashi.left .hc:before {
    content: '';
    position: absolute;
    border-right: 1.1em solid #FAFAFA;
    border-bottom: 0.8em solid transparent;
    border-top: 0.8em solid transparent;
    top: 1em;
    left: -0.8em;
}
.hukidashi.right .hc:before {
    content: '';
    position: absolute;
    border-left: 1.1em solid #FAFAFA;
    border-bottom: 0.8em solid transparent;
    border-top: 0.8em solid transparent;
    top: 1em;
    right: -0.8em;
}
.hukidashi .hc h2,
.hukidashi .hc h3,
.hukidashi .hc h4,
.hukidashi .hc h5 {
    margin:10px 0!important;
    padding:0;
}
.hukidashi .hc p {
    margin-bottom:1em;
}
.hukidashi .hc p:last-child{
    margin-bottom:0;
}
.hukidashi .icon{
    width: ;
    text-align:center;
}
.hukidashi.left .icon{
    float:left;
}
.hukidashi.right .icon{
    float:right;
}
.hukidashi .icon img{
    border-radius:50%;
    width:5em;
    margin:0;
    border: 3px solid #FAFAFA;
    background: #FAFAFA;
}

コピペできましたか?それでは、このショートコードを使って表示してみてください。

[[hukidashi name="名前" icon="画像URL" type="left"]ここに文章[/hukidashi]]

[[hukidashi name="名前" icon="画像URL" type="right"]ここに文章[/hukidashi]]

この、薄いグレーのふきだしが使えるようになっていたら準備完了です。

以下から、さらにいろいろな色のCSSをコピペしたり、自分でカスタマイズしていってください(・∀・)

もし表示されない場合は、コードのコピペミスがないかを確認してください。また、テーマによってはうまく表示できない可能性があります。

いろいろな色のふきだしを使おう

とりあえず、12色用意してみました。

各ふきだしを使うためのショートコードも載せていますので、気に入ったものがあればCSSをコピペしてください。

全部使いたい人用に、最後にCSSコードをまとめてコピペできるようにしています。

赤いふきだしのCSSとショートコード

以下のCSSコードを追記してから使ってください。

/* --- 赤い吹き出し --- */
.hukidashi.red .hc{
background-color: #FD6173;
border-color: #FD6173;
}
.hukidashi.left.red .hc:before{
border-right-color: #FD6173;
}
.hukidashi.left.red .hc:after{
content:none;
}
.hukidashi.right.red .hc:before{
border-left-color: #FD6173;
}
.hukidashi.right.red .hc:after{
content:none;
}
.hukidashi.red .hc{
color: #ffffff;
}
.hukidashi.red .icon img {
background-color: #FD6173;
border-color: #FD6173;
}

CSSを追記したら、以下の赤いふきだし用のショートコードが使えるようになります。

左アイコン用
[[hukidashi name="名前" icon="画像URL" type="left red"]ここに文章[/hukidashi]]

右アイコン用
[[hukidashi name="名前" icon="画像URL" type="right red"]ここに文章[/hukidashi]]

ピンクのふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- ピンクの吹き出し --- */
.hukidashi.pink .hc{
background-color: #ffccd5;
border-color: #ffccd5;
}
.hukidashi.left.pink .hc:before{
border-right-color: #ffccd5;
}
.hukidashi.left.pink .hc:after{
content:none;
}
.hukidashi.right.pink .hc:before{
border-left-color: #ffccd5;
}
.hukidashi.right.pink .hc:after{
content:none;
}
.hukidashi.pink .hc{
color: #555555;
}
.hukidashi.pink .icon img {
background-color: #ffccd5;
border-color: #ffccd5;
}

ブログのCSS欄にコードを追記したら、以下のショートコードでピンクのふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left pink"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type=" right pink"]ここに文章[/hukidashi]]

薄いピンクのふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 薄いピンクの吹き出し --- */
.hukidashi.lp .hc{
background-color: #FDDFE6;
border-color: #FDDFE6;
}
.hukidashi.left.lp .hc:before{
border-right-color: #FDDFE6;
}
.hukidashi.left.lp .hc:after{
content:none;
}
.hukidashi.right.lp .hc:before{
border-left-color: #FDDFE6;
}
.hukidashi.right.lp .hc:after{
content:none;
}
.hukidashi.lp .hc{
color: #555555;
}
.hukidashi.lp .icon img {
background-color: #FDDFE6;
border-color: #FDDFE6;
}

CSS欄にコードを追記したら、以下のショートコードで薄いピンクのふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left lp"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right lp"]ここに文章[/hukidashi]]

オレンジのふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- オレンジの吹き出し --- */
.hukidashi.orange .hc{
background-color: #FED999;
border-color: #FED999;
}
.hukidashi.left.orange .hc:before{
border-right-color: #FED999;
}
.hukidashi.left.orange .hc:after{
content:none;
}
.hukidashi.right.orange .hc:before{
border-left-color: #FED999;
}
.hukidashi.right.orange .hc:after{
content:none;
}
.hukidashi.orange .hc{
color: #555555;
}
.hukidashi.orange .icon img {
background-color: #FED999;
border-color: #FED999;
}

CSS欄にコードを追記したら、以下のショートコードでオレンジのふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left orange"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right orange"]ここに文章[/hukidashi]]

黄色のふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 黄色の吹き出し --- */
.hukidashi.yellow .hc{
background-color: #FFFFCC;
border-color: #FFFFCC;
}
.hukidashi.left.yellow .hc:before{
border-right-color: #FFFFCC;
}
.hukidashi.left.yellow .hc:after{
content:none;
}
.hukidashi.right.yellow .hc:before{
border-left-color: #FFFFCC;
}
.hukidashi.right.yellow .hc:after{
content:none;
}
.hukidashi.yellow .hc{
color: #555555;
}
.hukidashi.yellow .icon img {
background-color: #FFFFCC;
border-color: #FFFFCC;
}

CSS欄にコードを追記したら、以下のショートコードで黄色のふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left yellow"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right yellow"]ここに文章[/hukidashi]]

青いふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 青い吹き出し --- */
.hukidashi.blue .hc{
background-color: #9CC2F7;
border-color: #9CC2F7;
}
.hukidashi.left.blue .hc:before{
border-right-color: #9CC2F7;
}
.hukidashi.left.blue .hc:after{
content:none;
}
.hukidashi.right.blue .hc:before{
border-left-color: #9CC2F7;
}
.hukidashi.right.blue .hc:after{
content:none;
}
.hukidashi.blue .hc{
color: #555;
}
.hukidashi.blue .icon img {
background-color: #9CC2F7;
border-color: #9CC2F7;
}

CSS欄にコードを追記したら、以下のショートコードで青いふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left blue"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right blue"]ここに文章[/hukidashi]]

水色のふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 水色の吹き出し --- */
 .hukidashi.lc .hc{
 background-color: #C0E7F6;
 border-color: #C0E7F6;
 }
 .hukidashi.left.lc .hc:before{
 border-right-color: #C0E7F6;
 }
 .hukidashi.left.lc .hc:after{
 content:none;
 }
 .hukidashi.right.lc .hc:before{
 border-left-color: #C0E7F6;
 }
 .hukidashi.right.lc .hc:after{
 content:none;
 }
 .hukidashi.lc .hc{
 color: #555555;
 }
 .hukidashi.lc .icon img {
 background-color: #C0E7F6;
 border-color: #C0E7F6;
 }

CSS欄にコードを追記したら、以下のショートコードで水色のふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left lc"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right lc"]ここに文章[/hukidashi]]

緑のふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 緑の吹き出し --- */
.hukidashi.green .hc{
background-color: #B2EDA7;
border-color: #B2EDA7;
}
.hukidashi.left.green .hc:before{
border-right-color: #B2EDA7;
}
.hukidashi.left.green .hc:after{
content:none;
}
.hukidashi.right.green .hc:before{
border-left-color: #B2EDA7;
}
.hukidashi.right.green .hc:after{
content:none;
}
.hukidashi.green .hc{
color: #555555;
}
.hukidashi.green .icon img {
background-color: #B2EDA7;
border-color: #B2EDA7;
}

CSS欄にコードを追記したら、以下のショートコードで緑のふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left green"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type=" right green"]ここに文章[/hukidashi]]

きみどりのふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 黄緑の吹き出し --- */
.hukidashi.lg .hc{
background-color: #CFFFCA;
border-color: #CFFFCA;
}
.hukidashi.left.lg .hc:before{
border-right-color: #CFFFCA;
}
.hukidashi.left.lg .hc:after{
content:none;
}
.hukidashi.right.lg .hc:before{
border-left-color: #CFFFCA;
}
.hukidashi.right.lg .hc:after{
content:none;
}
.hukidashi.lg .hc{
color: #555555;
}
.hukidashi.lg .icon img {
background-color: #CFFFCA;
border-color: #CFFFCA;
}

CSS欄にコードを追記したら、以下のショートコードできみどりのふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left lg"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right lg"]ここに文章[/hukidashi]]

紫のふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 紫の吹き出し --- */
.hukidashi.purple .hc{
background-color: #E6E6FA;
border-color: #E6E6FA;
}
.hukidashi.left.purple .hc:before{
border-right-color: #E6E6FA;
}
.hukidashi.left.purple .hc:after{
content:none;
}
.hukidashi.right.purple .hc:before{
border-left-color: #E6E6FA;
}
.hukidashi.right.purple .hc:after{
content:none;
}
.hukidashi.purple .hc{
color: #555555;
}
.hukidashi.purple .icon img {
background-color: #E6E6FA;
border-color: #E6E6FA;
}

CSS欄にコードを追記したら、以下のショートコードで紫のふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left purple"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type=" right purple"]ここに文章[/hukidashi]]

グレーのふきだしのCSSとショートコード

基本形より、少し濃いグレーになっています。以下のCSSコードをコピペして使ってください。

/* --- グレーの吹き出し --- */
.hukidashi.gray .hc{
background-color: #CFCDCD;
border-color: #CFCDCD;
}
.hukidashi.left.gray .hc:before{
border-right-color: #CFCDCD;
}
.hukidashi.left.gray .hc:after{
content:none;
}
.hukidashi.right.gray .hc:before{
border-left-color: #CFCDCD;
}
.hukidashi.right.gray .hc:after{
content:none;
}
.hukidashi.gray .hc{
color: #555555;
}
.hukidashi.gray .icon img {
background-color: #CFCDCD;
border-color: #CFCDCD;
}

CSS欄にコードを追記したら、以下のショートコードでグレーのふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left gray"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right gray"]ここに文章[/hukidashi]]

黒っぽいふきだしのCSSとショートコード

以下のCSSコードをコピペして使ってください。

/* --- 黒っぽい吹き出し --- */
.hukidashi.black .hc{
background-color: #4D4C4C;
border-color: #4D4C4C;
}
.hukidashi.left.black .hc:before{
border-right-color: #4D4C4C;
}
.hukidashi.left.black .hc:after{
content:none;
}
.hukidashi.right.black .hc:before{
border-left-color: #4D4C4C;
}
.hukidashi.right.black .hc:after{
content:none;
}
.hukidashi.black .hc{
color: #ffffff;
}
.hukidashi.black .icon img {
background-color: #4D4C4C;
border-color: #4D4C4C;
}

CSS欄にコードを追記したら、以下のショートコードで黒っぽいふきだしを使うことができます。

左アイコン
[[hukidashi name="名前" icon="画像URL" type="left black"]ここに文章[/hukidashi]]

右アイコン
[[hukidashi name="名前" icon="画像URL" type="right black"]ここに文章[/hukidashi]]

全部のCSSを一気にコピーする

全色をCSSにコピペしたい方は、下の開閉ボタンを開いてコードをコピーして、CSS欄にペーストしてください。

ここには、最初に記載してもらったはずの基本コードは含まれていません。 一気にコピーができるのはカラーバージョンのふきだしだけです。

/* — 赤い吹き出し — */ .hukidashi.red .hc{ background-color: #FD6173; border-color: #FD6173; } .hukidashi.left.red .hc:before{ border-right-color: #FD6173; } .hukidashi.left.red .hc:after{ content:none; } .hukidashi.right.red .hc:before{ border-left-color: #FD6173; } .hukidashi.right.red .hc:after{ content:none; } .hukidashi.red .hc{ color: #ffffff; } .hukidashi.red .icon img { background-color: #FD6173; border-color: #FD6173; } /* — ピンクの吹き出し — */ .hukidashi.pink .hc{ background-color: #ffccd5; border-color: #ffccd5; } .hukidashi.left.pink .hc:before{ border-right-color: #ffccd5; } .hukidashi.left.pink .hc:after{ content:none; } .hukidashi.right.pink .hc:before{ border-left-color: #ffccd5; } .hukidashi.right.pink .hc:after{ content:none; } .hukidashi.pink .hc{ color: #555555; } .hukidashi.pink .icon img { background-color: #ffccd5; border-color: #ffccd5; } /* — 薄いピンクの吹き出し — */ .hukidashi.lp .hc{ background-color: #FDDFE6; border-color: #FDDFE6; } .hukidashi.left.lp .hc:before{ border-right-color: #FDDFE6; } .hukidashi.left.lp .hc:after{ content:none; } .hukidashi.right.lp .hc:before{ border-left-color: #FDDFE6; } .hukidashi.right.lp .hc:after{ content:none; } .hukidashi.lp .hc{ color: #555555; } .hukidashi.lp .icon img { background-color: #FDDFE6; border-color: #FDDFE6; } /* — オレンジの吹き出し — */ .hukidashi.orange .hc{ background-color: #FED999; border-color: #FED999; } .hukidashi.left.orange .hc:before{ border-right-color: #FED999; } .hukidashi.left.orange .hc:after{ content:none; } .hukidashi.right.orange .hc:before{ border-left-color: #FED999; } .hukidashi.right.orange .hc:after{ content:none; } .hukidashi.orange .hc{ color: #555555; } .hukidashi.orange .icon img { background-color: #FED999; border-color: #FED999; } /* — 黄色の吹き出し — */ .hukidashi.yellow .hc{ background-color: #FEF3BB; border-color: #FEF3BB; } .hukidashi.left.yellow .hc:before{ border-right-color: #FEF3BB; } .hukidashi.left.yellow .hc:after{ content:none; } .hukidashi.right.yellow .hc:before{ border-left-color: #FEF3BB; } .hukidashi.right.yellow .hc:after{ content:none; } .hukidashi.yellow .hc{ color: #555555; } .hukidashi.yellow .icon img { background-color: #FEF3BB; border-color: #FEF3BB; } /* — 青い吹き出し — */ .hukidashi.blue .hc{ background-color: #9CC2F7; border-color: #9CC2F7; } .hukidashi.left.blue .hc:before{ border-right-color: #9CC2F7; } .hukidashi.left.blue .hc:after{ content:none; } .hukidashi.right.blue .hc:before{ border-left-color: #9CC2F7; } .hukidashi.right.blue .hc:after{ content:none; } .hukidashi.blue .hc{ color: #555; } .hukidashi.blue .icon img { background-color: #9CC2F7; border-color: #9CC2F7; } /* — 水色の吹き出し — */ .hukidashi.sky .hc{ background-color: #AFE6FE; border-color: #AFE6FE; } .hukidashi.left.sky .hc:before{ border-right-color: #AFE6FE; } .hukidashi.left.sky .hc:after{ content:none; } .hukidashi.right.sky .hc:before{ border-left-color: #AFE6FE; } .hukidashi.right.sky .hc:after{ content:none; } .hukidashi.sky .hc{ color: #555555; } .hukidashi.sky .icon img { background-color: #AFE6FE; border-color: #AFE6FE; } /* — 緑の吹き出し — */ .hukidashi.green .hc{ background-color: #B2EDA7; border-color: #B2EDA7; } .hukidashi.left.green .hc:before{ border-right-color: #B2EDA7; } .hukidashi.left.green .hc:after{ content:none; } .hukidashi.right.green .hc:before{ border-left-color: #B2EDA7; } .hukidashi.right.green .hc:after{ content:none; } .hukidashi.green .hc{ color: #555555; } .hukidashi.green .icon img { background-color: #B2EDA7; border-color: #B2EDA7; } /* — 黄緑の吹き出し — */ .hukidashi.lg .hc{ background-color: #CFFFCA; border-color: #CFFFCA; } .hukidashi.left.lg .hc:before{ border-right-color: #CFFFCA; } .hukidashi.left.lg .hc:after{ content:none; } .hukidashi.right.lg .hc:before{ border-left-color: #CFFFCA; } .hukidashi.right.lg .hc:after{ content:none; } .hukidashi.lg .hc{ color: #555555; } .hukidashi.lg .icon img { background-color: #CFFFCA; border-color: #CFFFCA; } /* — 紫の吹き出し — */ .hukidashi.purple .hc{ background-color: #E6E6FA; border-color: #E6E6FA; } .hukidashi.left.purple .hc:before{ border-right-color: #E6E6FA; } .hukidashi.left.purple .hc:after{ content:none; } .hukidashi.right.purple .hc:before{ border-left-color: #E6E6FA; } .hukidashi.right.purple .hc:after{ content:none; } .hukidashi.purple .hc{ color: #555555; } .hukidashi.purple .icon img { background-color: #E6E6FA; border-color: #E6E6FA; } /* — グレーの吹き出し — */ .hukidashi.gray .hc{ background-color: #CFCDCD; border-color: #CFCDCD; } .hukidashi.left.gray .hc:before{ border-right-color: #CFCDCD; } .hukidashi.left.gray .hc:after{ content:none; } .hukidashi.right.gray .hc:before{ border-left-color: #CFCDCD; } .hukidashi.right.gray .hc:after{ content:none; } .hukidashi.gray .hc{ color: #555555; } .hukidashi.gray .icon img { background-color: #CFCDCD; border-color: #CFCDCD; } /* — 黒っぽい吹き出し — */ .hukidashi.black .hc{ background-color: #4D4C4C; border-color: #4D4C4C; } .hukidashi.left.black .hc:before{ border-right-color: #4D4C4C; } .hukidashi.left.black .hc:after{ content:none; } .hukidashi.right.black .hc:before{ border-left-color: #4D4C4C; } .hukidashi.right.black .hc:after{ content:none; } .hukidashi.black .hc{ color: #ffffff; } .hukidashi.black .icon img { background-color: #4D4C4C; border-color: #4D4C4C; }

自分でオリジナルふきだしが作りたい場合

以下のCSSコードは、さきほど紹介した青いふきだし用のCSSです。

太字になっている部分を変更すれば、自分でオリジナルのふきだしを作ることができます。

/* --- 青い吹き出し --- */
.hukidashi.blue .hc{
background-color: #9CC2F7;
border-color: #9CC2F7;
}
.hukidashi.left.blue .hc:before{
border-right-color: #9CC2F7;
}
.hukidashi.left.blue .hc:after{
content:none;
}
.hukidashi.right.blue .hc:before{
border-left-color: #9CC2F7;
}
.hukidashi.right.blue .hc:after{
content:none;
}
.hukidashi.blue .hc{
color: #555;
}
.hukidashi.blue .icon img {
background-color: #9CC2F7;
border-color: #9CC2F7;
}
  • #9CC2F7 … ふきだしの基本の色をカラーコードで指定しています。左右とアイコン部分を合わせて、全部で6箇所あります。
  • blue … ショートコードのタイプを指定しています。自分でわかりやすい文字列を指定します(詳しくは後述)。
  • #555 … ふきだしの中の文字の色を指定しています。

blueの部分で指定している文字列は、ショートコードの以下の部分に設定するものです。

[[hukidashi name="名前" icon="画像URL" type="left blue"]ここに文章[/hukidashi]]

CSSで記入するところは全部で7箇所ありますが、全て同じ文字列を記入してください。

ふきだしの色の名前(hotpink・cyaanなど)や、そのふきだしを使って登場させる人の名前(azu・azu1など)に設定しておくとわかりやすくてオススメです。

CSSの指定ができたら、左右どちらもチェックしてみましょう(・∀・)

おまけ:アイコン画像のサイズを変えたい場合

今回、 SANGOのふきだし(iPhone 7 Plusの表示)に合わせて基本コードを作ったので、ふきだしのアイコンサイズが大きすぎる場合は以下を修正してください。

.hukidashi .icon img{
    border-radius:50%;
    width:5em;
    margin:0;
    border: 3px solid #eee;
    background: #eee;
}

基本コードの一番最後のかたまりの部分、width欄の数値を変更すればOKです。

ここの数字を小さくすれば、アイコンも小さくなります。

pxではなくem指定しているので、0.1単位で変更していってください(・∀・)

テーマのショートコードに頼りすぎない

ふきだし追加といえば、プラグインの「Speech Bubble」が有名ですが、なるべくプラグインは減らしたいので…。

少しずつ、自作ショートコードに移行できるよう頑張ります。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした

ブログのトップページへ

コメントはありません

sumi

はじめまして。
とても参考になる記事いつもありがとうございます。

今回、https://azu3.com/hukidashi-css/
の吹き出し作成について拝見させていただいたのですが、
ショートコードのところが見られなくなっているようです。
https://gyazo.com/5f72e4fbaa7b0325303dce57bc004f6d

お手すきのさいに修正いただけるととても助かります。
よろしくお願いします。

あずさん あずさん

ご報告ありがとうございます!近日中に対応させていただきます!ご迷惑おかけして申し訳ありません。

ココア

お世話になっております。コメント失礼します。

sumiさんが書かれている通り、ショートコードのところが見られなくなっています。

お忙しいと思いますが、修正よろしくお願いします。

あずさん あずさん

お待たせいたしました!記事の修正作業が完了しました。ご迷惑をおかけして、申し訳ありませんでした。

ココア

お忙しい中、迅速な対応ありがとうございます!
素敵な吹き出しが作れました!
今後も応援しています^^

sumi

はじめまして。
とても参考になる記事いつもありがとうございます。

今回、https://azu3.com/hukidashi-css/
の吹き出し作成について拝見させていただいたのですが、
ショートコードのところが見られなくなっているようです。
https://gyazo.com/5f72e4fbaa7b0325303dce57bc004f6d

お手すきのさいに修正いただけるととても助かります。
よろしくお願いします。

あずさん あずさん

ご報告ありがとうございます!近日中に対応させていただきます!ご迷惑おかけして申し訳ありません。

ココア

お世話になっております。コメント失礼します。

sumiさんが書かれている通り、ショートコードのところが見られなくなっています。

お忙しいと思いますが、修正よろしくお願いします。

あずさん あずさん

お待たせいたしました!記事の修正作業が完了しました。ご迷惑をおかけして、申し訳ありませんでした。

ココア

お忙しい中、迅速な対応ありがとうございます!
素敵な吹き出しが作れました!
今後も応援しています^^

現在コメントは受け付けておりません。