• 妊娠・出産・育児
    男の育児休暇取得の流れと、実際に休んで思い知った3つのこと
    2018年03月26日
  • 奈良のこと
    奈良市の新施設「ミ・ナーラ」のテナント情報!イオン系列なの?
    2018年04月19日
  • ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • ブログ運営
    コピペで簡単にできるSANGOのカスタマイズ方法まとめ
    2018年02月09日
  • あずのおすすめ
    人と少し違うオトナなiFace「Sense(センス)」の購入レビュー
    2018年03月26日
  • 妊娠・出産・育児
    ネスタリゾート神戸のイルミネーション「ネスタイルミナ」を動画付きレポ♡
    2018年04月19日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • 妊娠・出産・育児
    お知らせ|「ハロー葉酸サプリ」様に出産後の体験談を寄稿しました
    2018年03月25日
  • あずのおすすめ
    私がモブログをする上で欠かせないおすすめアプリまとめ!
    2017年10月23日
  • 副業・在宅ワーク
    iPadでイラストを描くなら、aibowの極細タッチペンがコスパ最高でオススメ!
    2018年03月26日
ショートコード対応のカラー会話風ふきだし|SANGOコピペカスタマイズ
▼ どこよりもわかりやすいブログの育て方
▼ シンプルライフに憧れるあなたへ


こんにちは
主婦ブロガーのあず(yuuki_azusa )です。



先日、このブログのテーマを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に書いてくださいね。

SANGOの子テーマダウンロード

STORKの子テーマダウンロード

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

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

この記載がないと、ふきだしが表示されなくなります。というか、そうしないとコード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{
    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;
}

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

名前
ここに文章

名前
ここに文章

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

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

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

▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

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

とりあえず、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を追記したら、以下の赤いふきだし用のショートコードが使えるようになります。

左アイコン用
名前
ここに文章
右アイコン用
名前
ここに文章

ピンクのふきだしの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欄にコードを追記したら、以下のショートコードでピンクのふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

薄いピンクのふきだしの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欄にコードを追記したら、以下のショートコードで薄いピンクのふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

オレンジのふきだしの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欄にコードを追記したら、以下のショートコードでオレンジのふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

黄色のふきだしの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欄にコードを追記したら、以下のショートコードで黄色のふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

青いふきだしの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欄にコードを追記したら、以下のショートコードで青いふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

水色のふきだしの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欄にコードを追記したら、以下のショートコードで水色のふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

緑のふきだしの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欄にコードを追記したら、以下のショートコードで緑のふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

きみどりのふきだしの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欄にコードを追記したら、以下のショートコードできみどりのふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

紫のふきだしの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欄にコードを追記したら、以下のショートコードで紫のふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

グレーのふきだしの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欄にコードを追記したら、以下のショートコードでグレーのふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

黒っぽいふきだしの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欄にコードを追記したら、以下のショートコードで黒っぽいふきだしを使うことができます。

左アイコン
名前
ここに文章
右アイコン
名前
ここに文章

全部の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の部分で指定している文字列は、ショートコードの以下の部分に設定するものです。

名前
ここに文章

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のカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

[kanren id=458] 最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメント一覧
  1. sumi より:

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

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

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

コメントを残す