Simplicity２でブログをスタートして10ヶ月目になりました！
いろんな方のブログをみていい刺激をうけ、自身のブログのデザインも変更してきました。ブログをスタートして5ヶ月目のときも一度記事を書きましたが、さらにデザインを追加しましたので、ここでカスタマイズ方法をまとめて紹介します！
過去の記事の「続編」になっています。あわせてお読みください。＾＾
目次
1. 今回カスタマイズすること
カスタマイズのメリットは自分のブログに愛着が湧くことです！Wordpressの操作にも慣れてきたら、カスタマイズにぜひ挑戦してみてください♪
前回の記事でカスタマイズしたことは、
- 文字（フォント）を変更
- 見出しタグを変更(h2のみ)
- サイドバーの見出しの装飾
- 記事と記事の間に線を引く
でした。
今回、紹介するカスタマイズは・・・
- 見出しタグの変更(h3,h4)
- サイドメニューのカテゴリーにアイコンをつける
- サイドメニューのカテゴリーをタグにする
- グローバルメニューにアイコンをつける
になります。
2. 見出しタグの変更(h3,h4)
前回の記事で見出しタグh2のカスタマイズ方法について紹介しました。今回はh3,h4についてです。
◆完成イメージ
◆方法
下記のCSSコードをの「外観」→「CSS編集」にコピペするだけです。
応用 もし色を変更したい方は「#ffcccc」の部分にお好きな色コードを入力してください。
|
1 2 3 4 5 6 7 8 |
.entry-content h3{ color: #00000;/*文字色*/ padding: 0.5em 0;/*上下の余白*/ border-top: solid 5px #ffcccc;/*上線*/ border-bottom: solid 5px #ffcccc;/*下線*/} .entry-content h4{ color: #00000;/*文字色*/ padding: 0.5em 0;/*上下の余白*/ border-bottom: dashed 5px #ffcccc;/*下線*/} |
3. サイドメニューのカテゴリーにアイコンをつける
なくてもいいのですが、あるとちょっとだけ嬉しいカスタマイズ（笑）
◆完成イメージ
◆方法
下記のCSSコードをの「外観」→「CSS編集」にコピペするだけです。
|
1 2 3 4 5 |
.widget_categories h3:before{ margin-right:5px; font-family:"FontAwesome"; content:"\f115"; } |
ポイント 事前にプラグイン「Font Awesome 4 Menus」のインストールが必要です。
4. サイドメニューのカテゴリーをタグクラウドにする
「タグクラウド」という名前を知らず、カスタマイズを探すのにとても苦労しました！できたときは超感動！カテゴリーをタグにすることで見やすさがぐっと変わります。
超オススメ♪
◆完成イメージ
◆方法
1. 「外観」→「ウィジェット」→「タグクラウド」をクリック。
下の方にスクロールすると、「タグクラウド」という項目があります。
2. 「タグクラウド」から「サイドバーウィジェット」を選択。
3. サイドバーウィジェットに「タグクラウド」が表示されます。
・タイトルの欄に「タイトル名」を入力。ここでは「気になるキーワード」と入力。
・分類「カテゴリー」を選択。
4. 下記のCSSコードをの「外観」→「CSS編集」にコピペします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.tagcloud a { font-size: 14px !important; /* 文字のサイズ */ line-height: 1em; background: #F5A9BC; /* 背景色 */ color: #ffffff !important;/* 文字色 */ display: inline-block; white-space: nowrap; padding: 8px 8px; /* 文字周りの余白 */ margin-top: 3px; /* タグ同士の余白 */ border-radius: 4px; /* 角を少し丸く */ text-decoration: none; } .tagcloud a:hover { background: #FA5882; /* マウスホバー時の背景色 */ color: #FFFFFF; /* マウスホバー時の文字色*/ } .tagcloud a:before { font-family: "FontAwesome"; content: "\f02b"; /* 絵文字のコード */ padding-right: 4px; } |
ポイント 事前にプラグイン「Font Awesome 4 Menus」のインストールが必要です。
5. 完成です。
①タグの色を変更したい場合
※現在はピンク色になっています。
色を変更したい場合は、CSSコードの上から４行目の「#F5A9BC」の部分に好きなカラーコードを入力してください。
②マウスホバーの色を変更したい場合
※現在はマウスをおくと、濃いピンク色になっています。
色を変更したい場合は、CSSコードの下から８行目の「#FA5882」（マウスホバー時の背景色 ）の部分に好きなカラーコードを入力してください。
5. グローバルメニューにアイコンをつける
これもずっとあこがれていたカスタマイズの一つ。アイコンをつけるだけで、メニューの見やすさがぐっと変わりますよ！
◆完成イメージ
このアイコンです。
◆方法
1. 「外観」 →「メニュー」をクリック。
2. 右上の「表示オプション」をクリック。
3. 「CSSクラス」のボックスにチェック。
4. カテゴリー欄に「CSS class（オプション）」が表示されます。
その欄に「Font Awesome」のサイトから好きなアイコンのコード（fa-××××）を入力。
※Font Awesomeについて下の方で詳しく説明しています。ご参考ください。
5. 「メニューを保存」をクリックします。
6. 完成です！
Font Awesomeのコードの見つけ方
例えば、「コーヒー」のアイコンを探したいときは・・・
（１）検索窓の部分に検索したいアイコンを英語で入力します。
（２）アイコンが表示されます。
（３）アイコンの下の英語を「fa-×××」という形にすればコードは完成！
ここでは「fa-coffee」になります。
おまけ
アイコンをクリックすると、以下のような画面になります。
下のほうからもコードが確認できます。
6. まとめ
いかがでしたか？
今回はSimplicity2のカスタマイズ第２弾になります。
第３弾もお楽しみに！
お役に経てば幸いです！