弊サイトはWordpressのテーマに「Cocoon」を利用しています。当初はテンプレートのスキンを利用していましたが、どうにも違和感が…。週末にスキンを「なし」に戻し、CSSでデザインを修正してみました。
まずカスタマイズしたいと思ったのが『見出し』(ｈタグ)のデザイン。先頭にピンポイントで目立つようアイコンを入れてみます。
ちなみに記号・アイコンというのは見出しの・とか、Profileの・のこと。CocoonではWebアイコンフォントの「Font Awesome」が簡単に利用できるようになっています。
Cocoonテーマの設定を確認する
デフォルトのままで問題無いはずですが、「Font Awesome」のバージョンを確認ます。
[ダッシュボード]→[Cocoon設定]→[全体]タブを開き、
そのまま下にスクロールし、[サイトアイコンフォント]が[Font Awesome 4]が選択されていることを確認します。
既に何らかのスキンを適用済みの場合は、アイコンが重複して表示される可能性があるためご注意ください。
Cocoon子テーマ Style.CSSを編集する
Cocoonの子テーマの「Style.css」を編集します。
※Cocoon子テーマの適用方法は公式サイトをご確認ください。
[外観]→[テーマエディター]を開き、
編集するテーマを選択で[Cocoon Child]を選択、
テーマファイル欄の[スタイルシート(style.css)]をクリックします。
[大]見出し h2タグのCSSを追記
まずはCSSの記述をそのまま載せておきます。結果は↑のようになります。
基本デザイン部分は参考程度にご覧ください。
.article h2 { /*基本デザイン*/
font-size: 28px; /*フォントサイズ*/
padding: 10px 10px 10px; /*余白*/
border-bottom: solid 2px #878787; /*一重下線、太さ、色*/
background-color: #ffffff; /*背景*/
}
.article h2::before { /*h2の先頭*/
font-family:"FontAwesome"; /*フォント指定*/
content:"\f1b2"; /*記号*/
margin-right:9px; /*記号右側の余白*/
}今回の重要部分は .article h2::before { 以降の部分です。
font-family:を “FontAwesome”; とWebアイコンフォントを指定します。
content:で “\f1b2”; と表示するアイコンを指定します。
・・・でアイコンを指定ってどうやって調べるの？という話を次項で解説します。
FontAwesomeのアイコンの探し方は？
こちらのサイトがすごく便利です。（正直公式サイトでも見てもよくわかりません。）
スクロールで一覧を見ることもでき、検索でフィルタするこも可能です。私の使っているアイコンは「cube」でヒットします。サイドバーで使っているInstagram、Twitteアイコンもキーワード「Insta / tw」でフィルタして出てきます。
ここで出てきた「\f1b2」が先ほどの content:の “\f1b2”; に該当します。自分で好みのアイコンを探してください。
あとは記事の本文で見出しを指定するだけ。必ずアイコンが出てきます。
参考にh3タグのCSSも記載しておきます
こちらのソースで↑の表示になります。
.article h3{
font-size: 22px;
background: #fafafa;
padding: 10px 10px 10px;
}
.article h3::before {
font-family:"FontAwesome";
content:"\f1b3";
margin-right:9px;
}指定しているのは背景とアイコン、余白のみで、周囲の枠はWordpressの標準のデザインが表示されています。
h4タグだとこんな感じ
ほとんど使いませんが、念のため指定だけしておきました。
.article h4{
font-size: 18px;
background: #fafafa;
padding: 10px 10px 10px;
}
.article h4::before {
font-family:"FontAwesome";
content:"\f101";
margin-right:9px;
}番外編 本文にアイコンを表示するには？
カスタムhtmlで記述することが可能です。
<span class="fa fa-cube" aria-hidden="true"></span>
<span class="fa fa-cubes" aria-hidden="true"></span>
<span class="fa fa-twitter-square" aria-hidden="true"></span>
<span class="fa fa-instagram" aria-hidden="true"></span>「span class= ”fa 」の後に、先ほどのサイトで検索した際にでてきたアイコンの名称を入れると表示できます。
という訳で、簡単に見出し(hタグ)にアイコンを表示させることができました。
アイコンを画像(jpg,gif)で表示させる方法もありますが、いちいち画像を読み込ませるのも、なんかちょっと嫌ですよね。WordpressでCocoonテーマを利用している方は「Font Awesome」を上手に利用し、自分なりのカスタマイズに挑戦してみてください。
サイドバーのウイジェットやInsta,Twitterの「follow Me!」もデザインを編集できるので、また機会があれば紹介させていただきます。
コメント