こんにちは！ライターの髙橋ユミエ（@nikoniko_writer）です！
WordPressのCSSのカスタマイズを始めると、「記事で一番最初に表示されるタイトルのデザインを、もっと可愛くしてみたい！」と思いませんか？
わたしもカスタマイズを始めて間もなく、「タイトルにオリジナリティを出したい！」と思い、吹き出し風のタイトルの作成に挑戦しました！
今回は他サイトを参考にしながら、吹き出し風タイトルのCSSの書き方を一行ずつ理解し、理解した内容をまとめています。
もし「わたしも作ってみたい！」と思われたかたは、参考にして作成にチャレンジしてみましょう！
WordPressのCSSをカスタマイズして「記事タイトル」を吹き出し風にするコード！
今回は以下のように、記事タイトルを吹き出し風にする方法を解説します！
こちらのデザインは、以下のサルワカさんのサイトを参考にさせていただいてます！
タイトルを吹き出し風にするためのCSSは、以下のとおりです。
コピーして、「追加CSS」に貼り付けましょう！
.article h1 {/*タイトルの背景色*/
position: relative;
padding: 5px;
background: #e0edff;
}
.article h1::after {/*タイトルを吹き出し風にする*/
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
}
追加CSSへコードを貼り付ける方法は、こちらの記事を参考にしてくださいね！
CSSのコードの意味を一行ずつ解説！
ここでは上で紹介したCSSのコード意味を、一行ずつ解説していきます！
CSSの初心者のかたでも、少しずつ理解できるような内容にしてますので、ぜひ参考にしてみてください！
吹き出しの四角い部分から作ってみよう！
まずは、「吹き出しの上の四角い部分」を作るためのコードについて解説していきます。
タイトルの四角い部分を作るためには、以下のようなコードを書きます。
position: relative;
padding: 5px;
background: #e0edff;
}
.article h1 とは？
こちらはタイトルである「h1タグ」のクラスのCSSを設定するという意味です。
単に「h1」と指定してしまうと、ブログトップページのタイトルのデザインも同様のデザインになってしまうので、ご注意ください。
トップページのタイトルを除いた、すべての記事のタイトルをカスタマイズしたい場合は「.article h1」と指定しましょう（この指定方法はCocoonというテーマを使用している場合です）。
position: relativeとは？
「position」と書くと、表示する内容の位置を移動させたいときに、どの要素を基点として移動させるかを指定できます。
「relative」と書くと、今指定している要素を基点とすることができます。
つまりh1タグのCSSに「position: relative」と書くと、h1タグの位置を基点として、表示する内容の位置を指定できるようになります。
今は意味がよくわからないと思いますが、h1タグのCSSに「relative」と書いておくことで、吹き出し風に見せるための▼の位置を指定できるようになると理解しておきましょう。
paddingとbackground
「padding」は、内側のスペースを指定する方法です。
「padding: 5px;」と書くことで、タイトルの文字と枠の間に、上下左右に5pxのスペースが空きます。
「background」は、背景色を指定する書き方です。
「#e0edff;」は色別に付けられた「カラーコード」という番号です。
カラーコードは以下のようなサイトから、簡単に調べてコピーすることができます。
吹き出し風に見せるためのタイトル下の▼を表示させよう！
以下のようなタイトル下の▼の部分を表示するための、CSSの書き方を解説していきます。
▼を表示しているCSSは、以下の部分です。
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
}
::afterとは？
「::after」と書くと、指定している要素のおしりに表示する内容を指定できます。
「::before」と書けば、指定している要素の先頭に表示する内容を指定できます。
h1タグに「::after」と書き、タイトルのおしりに▼を表示する位置を作ります。
position: absolute;とは？
「relativle」と指定した要素（親要素）の位置を基点として、「absolute」と指定した要素（子要素）の表示位置を指定できます。
今回はタイトルが「親要素」になり、タイトル下の▼を表示する部分が「子要素」となるわけです。
これによってタイトルの左上の角を基点として、基点からどのくらいの位置に▼を表示するかを指定できるようになります。
content: ”;とは？
表示したい内容を、シングルコーテーション（”）の間に書きます。
「●」を表示させたい場合は、「content: ‘●’;」と書きます。
今回は▼を表示させたいのですが、実はここには何も書かなくても大丈夫です。
何も書かないので何も表示されないのですが、▼を表示するための場所を確保できます。
topとleftとは？
以下のように、▼の表示位置を指定します。
top: 100%;
left: 30px;
親要素であるタイトルの左上から100%の位置かつ、左から30pxの位置に子要素である▼を表示します。上から100%の位置とは、タイトルの底辺という意味です。
border: 15px solid transparent;とは？
borderを指定すると、要素の周りに枠を設定できます。
今回は、上下と左右に15pxの太さの枠を実線（solid）を引き、線の色は透明（transparent）にします。
border-top: 15px solid #e0edff;とは？
透明の枠のうち、上の部分だけ「#e0edff」の色に塗るという意味です。
これによって、▼が表示されるようになります。
これで吹き出しの完成です！
吹き出しを作るとCSSの基礎の理解が深まる！
吹き出しを作るCSSのコードとにらめっこし、一行ずつ意味を調べていくことで、CSSの基礎の理解が深まりました！
単純な形ですが、いろいろなテクニックがつまっているので、CSSの学習に役立つと思います。
ぜひみなさんもチャレンジしてみてください！
