記事タイトルとは
Cocoonだけに限らず、記事にはタイトルがあります。
タイトルは検索エンジンにも表示されるだけにクリックを誘うインパクトのあるタイトルが理想です。
また、その記事内にもタイトルは大大と表示されます。
この記事のタイトルは、
となります。
これから紹介するのは、Cocoonの記事タイトルのカスタマイズ方法。
冒頭でも解説した通り、記事タイトルは注目される必要があります。
訪問者の視点から見て魅力的なデザインへとカスタマイズしてみましょう。
Webアイコンの設定
Webアイコンを設定する際には、Font Awesome 5を利用します。
Cocoonのデフォルトの設定では、最新のFont Awesomeになっていないため、設定を最新のバージョンへと変更する必要があります。
詳しくは以下のリンクにて解説しています。
ただし、デフォルトの状態（旧バージョン）でも利用できます。
ただし、Font Awesome 4に対応したWebアイコンを利用する場合、そして、バージョン４向けのソースコードを正しく書けば、Webアイコン（Font Awesome 4）はそのまま利用することができます。
今回は、Font Awesome 5向けのアイコン、ソースコードを追加してカスタマイズしていきます。
記事タイトルの各要素
記事タイトルを編集する前に、タイトルに使われている要素を見つけます。
各要素の見つけ方は以下のリンクで詳しく解説しています。
上記の方法を試して要素を見つけ出した結果、記事タイトルに利用されているセレクタは以下の《.article》の《h1》セレクタということが分かりました。
.article h1 {
}たった、これだけです。
サンプル「挟み線」
一つ目のサンプル例は「挟み線」
実際に表示させてみると以下の画像のようになります。
タイトル文字を太い横線で挟んでいます。
シンプルではあるものの、タイトルが少し強調されたような気がします。
.article h1 {
padding:20px 0px 20px 0px;
border-top: 4px solid black;
border-bottom: 4px solid black;
}サンプル「シルバータイトル」
二つ目のサンプル例は「シルバータイトル」
実際に表示させてみると以下の画像のようになります。
タイトル文字を太い点線で挟んでいます。
点線はタイトルが見やすいように薄い灰色に設定しています。
.article h1 {
padding:20px 0px 20px 0px;
border-top: 4px solid black;
border-bottom: 4px solid black;
}サンプル「コンパクト・アイコンタイトル」
四つ目のサンプル例は「コンパクト・アイコンタイトル」
実際に表示させてみると以下の画像のようになります。
タイトル文字を小さくしています。
カラーアイコンを左に沿えるだけでアイコンが目立ち、自然とタイトル文へと誘導されます。
.article h1 {
font-size: 20px;
padding:20px 0px 20px 0px;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.article h1:before{
color: #4682b4;
margin-right:7px;
margin-left: 7px;
font-family: "Font Awesome 5 Free";
content: "\f5da";
font-weight: 900;
}サンプル「コンパクト・下線アイコンタイトル」
四つ目のサンプル例は「コンパクト・下線アイコンタイトル」
実際に表示させてみると以下の画像のようになります。
タイトル文字を小さくしています。
新聞のカラーアイコンを左に沿えて、シンプルに下線だけで表現しました。
.article h1 {
font-size: 20px;
padding: 0px 0px 10px 0px;
border-bottom: 2px solid black;
}
.article h1:before{
color: #008b8b;
margin-left:7px;
margin-right:7px;
font-family: "Font Awesome 5 Free";
content: "\f1ea";
font-weight: 900;
}サンプル「ファースト・カラー」
五つ目のサンプル例は「ファースト・カラー」
実際に表示させてみると以下の画像のようになります。
疑似要素を使って始めの文字だけ、カラーフォントにしています。
ただ、始めにカッコ【】を持ってくるとカッコを含んだ最初の文字がカラーフォントになります。
疑似要素（first-letter）を使う場合はタイトルに気を使う必要がありそうです。
.article h1 {
color: black;
font-size: 20px;
padding: 10px 0px 10px 0px;
border-bottom: 2px dashed black;
}
.article h1::first-letter {
color: red;
font-size: 40px;
}記事タイトルをカスタマイズしてみよう！
Cocoonの記事タイトルのカスタマイズ方法について解説しました。
要素を見つけ出すことができれば、後はスタイルを重ねて指定するだけなので楽にコーティング作業を行うことができます。
もしも、記事タイトルだけでなく、見出し文やサイドバーのカテゴリーをカスタマイズしようとお考えの方は以下のカスタマイズ方法を合わせてお読みください。
コメント