WordPressテーマ「スワロー」の吹き出しをカスタマイズ♪【 CSSのみ】

吹き出しにみんな専用のカラーがあるけどどうやってるのかなぁ？

あ、たしかに！カラーがわかれていると見やすいね♪

かがみに聞いたらCSSでカスタマイズできるみたいっ

こんにちは、かがみ（@cony_tas）です！

WordPressのテーマ「スワロー」には、デフォルトで3種類の吹き出しと5種類のアイコン周りのボーダーカラーが用意されています。

でも吹き出しやボーダーの色を好きなものにカスタマイズしたい時ってありますよね。

そこで今回はCSSでキャラごとに好きなカラーを設定する方法をご紹介します。

本記事で紹介するCSSコードを参考にしていただければ簡単にカスタマイズが可能なので、やってみましょう♪

記事でわかること

・スワローの吹き出しをカスタマイズする方法

記事の信頼性

筆者のかがみ（@cony_tas）はブログ立ち上げ時からスワローをカスタマイズして使用しています。

CONTENTS［ hide ］

01｜ WordPressテーマ「スワロー」の吹き出しをカスタマイズ♪
・スワローの吹き出しは3種類ある
・キャラ専用のクラス名をショートコードに追加する
・テーマエディターでカスタマイズする
・おまけのアニメーション
02｜最後に：WordPressテーマ「スワロー」の吹き出しをカスタマイズ♪

WordPressテーマ「スワロー」の吹き出しをカスタマイズ♪

WordPressテーマ「スワロー」は、シンプルで美しく、無駄なものをそぎ落とした洗練されたWordPressテーマです。

ショートコードも豊富に用意されていますが、今回は吹き出しをカスタマイズしてみましょう！

スワローの吹き出しは3種類ある

スワローは、以下の3種類の吹き出しをデフォルトで使用できます。

ノーマルな吹き出しです♪

[voice icon="アイコン画像のURL" name="アイコン名" type="l"]
ノーマルな吹き出しです♪
[/voice]

Facebook風は、typeにfbを付けますっ

[voice icon="アイコン画像のURL" name="アイコン名" type="r fb"]
Facebook風は、typeにfbを付けますっ
[/voice]

LINE風は、typeにlineを付けてね♪

[voice icon="アイコン画像のURL" name="アイコン名" type="l line"]
LINE風は、typeにlineを付けてね♪
[/voice]

上記の3種類でも十分キャラごとに使い分けできますが、もうちょっとアイコン枠や吹き出しカラーを好きなものに調整したい時もあると思います。

そこでノーマル吹き出しをベースにして、キャラごとにカラーをカスタマイズしてみます。

キャラ専用のクラス名をショートコードに追加する

それでは、デモで当ブログキャラ「モチ」専用のCSSを追加していきますね。

まずは吹き出しショートコードのtypeにキャラのローマ字などでクラス名を追加してください。ここでは「mochi」と入力します。

[voice icon="アイコン画像のURL" name="アイコン名" type="r mochi"]
吹き出しテキスト
[/voice]

次にCSSを追加していきますが、CSSをカスタマイズする前にスワローの子テーマはインストールしていますか？

親テーマに直接CSSを追加してしまうと、テーマのアップデートがあった際にカスタマイズ内容がリセットされてしまうので、まだ子テーマをインストールしていなければ「OPENCAGE公式サイト」からダウンロードしてきましょう！

>> 子テーマのダウンロード・導入方法

テーマエディターでカスタマイズする

次にキャラ専用のCSSをカスタマイズします。
WordPressの管理画面を開き、下の画像のように「style.css」編集画面に移動してください。

子テーマをインストール・有効化していれば、「編集するテーマを選択」の部分が「swallow_custom」になっているので、スタイルシート（style.css）を選択します。

ここに先ほど追加したキャラ専用クラス名「mochi」のCSSを記述すると吹き出しをカスタマイズできます。

下記のCSSはデモで「mochi」になっていますが、あなたの好きなクラス名とborderの色・backgroundの色を設定してくださいね！

.voice.mochi .icon img {
    border: 2px solid #fdeeb5;
}
.voice.mochi .voicecomment {
    border: none;
    background: #fbf5dc;
}

CSSを追加したら、記事内の吹き出しを確認してみてください。
下のようにアイコン周りのボーダー色と吹き出しの色が変わっていたら成功です！
※もし吹き出しが変わらない場合はブラウザのキャッシュをクリアします。

やった～、モチ専用のカラーになったよっ

クラス名「usagi」で、ピンク色にしてもらったの……♪

私はクラス名「sakura」で、ウサギさんよりほんのり赤ピンク色～♪

おまけのアニメーション

おまけでアイコンにアニメーションを追加する方法をご紹介します！

下記のように、ショートコードのtypeにアニメーション用のクラス名を追加してください。

ここでは跳ねるアニメーションを追加してみるので、「bounce」と付けます。

[voice icon="アイコン画像のURL" name="アイコン名" type="r mochi bounce"]
吹き出しテキスト
[/voice]

次に下記のCSSを追加します。

.voice.bounce .icon img {
    animation: bounce 4000ms linear 0ms infinite normal both;
}
@keyframes bounce {
    0% { transform: translateY( 0 ) scale( 1, 1 ); }
    5% { transform: translateY( -30px ) scale( 1, 1 ); }
    7% { transform: translateY( -35px ) scale( 1, 1 ); }
    10% { transform: translateY( 0 ) scale( 1, 1 ); }
    12% { transform: translateY( -10px ) scale( 1.2, 1 ); }
    15% { transform: translateY( 0 ) scale( 1, 1 ); }
    17% { transform: translateY( -5px ) scale( 1.1, 1 ); }
    20% { transform: translateY( 0 ) scale( 1, 1 ); }
    100% { transform: translateY( 0 ) scale( 1, 1 ); }
}