【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう！

どうも、あず（@yuuki_azusa）です

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

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

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

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

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

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

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

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

注意
このままのコードで使えるのが確認できているのは、「ストーク」と「SANGO」です。

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

あず
これが、今回作った基本形のふきだしです。
旦那
もちろん、アイコン右バージョンも使えます。

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

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

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

あず

SANGOのデフォルトのふきだしの中ではショートコードが使えませんが…

[sanko href="https://azu3.com/" title="あずさんち" site="トップページにとぶよ" target="_blank"]
あず
このふきだしなら、ふきだしの中でもショートコードが使えるよ。

参考

あずさんちトップページにとぶよ

旦那
MEMO
これは便利だね。

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

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

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

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の子テーマダウンロードOPEN CAGE

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

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

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

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

注意
SANGOは子テーマのstyle.cssに記述した内容が反映されない不具合が多発しています。反映されない場合は、「外観」→「カスタマイズ」→「追加CSS」に追記してください。

Jetpack連携により「外観」→「CSS編集」で追加CSSが表示されている方は、テーマを変えてもCSS設定が引き継がれるので、そちらに記載することを推奨します。

MEMO
テーマ変更で記述が消えることがないので、テーマに依存したくないCSS(文字色を変えるものなど)は、追加CSSに記載しておくと手間が省けます(・∀・)
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 #eee;
	background-color: #eee;
	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 #eee;
	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 #eee;
	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 #eee;
	background: #eee;
}

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

左アイコン 
[hukidashi name="名前" icon="画像URL" type="left"]ここに文章[/hukidashi]
右アイコン 
[hukidashi name="名前" icon="画像URL" type=" right"]ここに文章[/hukidashi]
あず
それぞれ左アイコンパターンと
旦那
右アイコンパターンです。

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

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

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

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

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

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

MEMO
このコードも、管理画面から「外観」→「CSS編集」で表示される追加CSSへのコピペ推奨です。

全部使いたい人用に、最後に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コードをコピペして使ってください。

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コードをコピペして使ってください。

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コードをコピペして使ってください。

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コードをコピペして使ってください。

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コードをコピペして使ってください。

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コードをコピペして使ってください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意
ここには、最初に記載してもらったはずの基本コードは含まれていません。

一気にコピーができるのはカラーバージョンのふきだしだけです。

全カラー使う人はOPEN

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

以下の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;
}
  • #9CC2F7 … ふきだしの基本の色をカラーコードで指定しています。左右とアイコン部分を合わせて、全部で6箇所あります。
  • blue … ショートコードのタイプを指定しています。自分でわかりやすい文字列を指定します(詳しくは後述)。
  • #555 … ふきだしの中の文字の色を指定しています。

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

ここの文字を決めています 
[hukidashi name="名前" icon="画像URL" type=" left blue"]ここに文章[/hukidashi]

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

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

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

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

あず
アイコン大きいかな？

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

ふきだし基本コードCSS 
.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のデフォルトのショートコードが使いたい！という方向けに、デフォルトのふきだしをカスタマイズする記事を準備しています。

もうしばらくお待ちください。

私は「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」という本でCSSの勉強をしています。PHPは独学で勉強中。

Amazonでチェック

ああしたい、こう変えたいが手にとるようにわかる CSS基礎
赤間 公太郎, 原 一宣。, 藤川 麻夕子, 山本 和泉
あず
他にも、WordPressのカスタマイズに関して、こんな記事も書いています！参考になれば幸いです。

SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例

2017.09.27

コピペでOK★2番目・4番目・6番目のh2タグの前に広告を自動挿入させる方法

2017.08.08

ふきだしをつくるのに参考にさせていただいたサイトはコチラ。

参考

コピペで吹き出し、アイコン付きの吹き出しをショートコードで作ってみたフロントエンドな日々
参考

CSSで作る！吹き出しデザインのサンプル19選サルワカ

最後まで読んでくれてありがとうございました。あず（@yuuki_azusa）でした

コメントを残す

前の記事

ニンテンドーネットワークIDの登録メールアドレスを忘れてログイ…
:)