第2弾!ブログ初心者でも簡単にできるSimplicity2のおしゃれ&可愛いカスタマイズ

この記事は約6分で読めます。

[metaslider id=”4553″]

 

Simplicity2でブログをスタートして10ヶ月目になりました!

いろんな方のブログをみていい刺激をうけ、自身のブログのデザインも変更してきました。ブログをスタートして5ヶ月目のときも一度記事を書きましたが、さらにデザインを追加しましたので、ここでカスタマイズ方法をまとめて紹介します!

過去の記事の「続編」になっています。あわせてお読みください。^^

【初心者でもできるカスタマイズ】Simplicityのデザインを変更してみよう!
ブログをはじめて5ヶ月。 ずっとシンプルなブログでしたが、もっと自分のブログを「可愛く」「自分らしく」デザインしたいなーと思い始めて、ついにカスタマイズに挑戦しました。 これが思ったよりも簡単!しかもブログが自由自在に変えられて楽しい! ま...

1. 今回カスタマイズすること

カスタマイズのメリットは自分のブログに愛着が湧くことです!Wordpressの操作にも慣れてきたら、カスタマイズにぜひ挑戦してみてください♪

前回の記事でカスタマイズしたことは、

  • 文字(フォント)を変更
  • 見出しタグを変更(h2のみ)
  • サイドバーの見出しの装飾
  • 記事と記事の間に線を引く

でした。

今回、紹介するカスタマイズは・・・

  • 見出しタグの変更(h3,h4)
  • サイドメニューのカテゴリーにアイコンをつける
  • サイドメニューのカテゴリーをタグにする
  • グローバルメニューにアイコンをつける

になります。

[adsense]

2. 見出しタグの変更(h3,h4)

前回の記事で見出しタグh2のカスタマイズ方法について紹介しました。今回はh3,h4についてです。

◆完成イメージ

◆方法

下記のCSSコードをの「外観」→「CSS編集」にコピペするだけです。

応用 もし色を変更したい方は「#ffcccc」の部分にお好きな色コードを入力してください。

.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編集」にコピペするだけです。

.widget_categories h3:before{
 margin-right:5px;
 font-family:"FontAwesome";
 content:"\f115";
}

ポイント 事前にプラグイン「Font Awesome 4 Menus」のインストールが必要です。

4. サイドメニューのカテゴリーをタグクラウドにする

「タグクラウド」という名前を知らず、カスタマイズを探すのにとても苦労しました!できたときは超感動!カテゴリーをタグにすることで見やすさがぐっと変わります。

超オススメ♪

◆完成イメージ

◆方法

1.  「外観」→「ウィジェット」→「タグクラウド」をクリック。

下の方にスクロールすると、「タグクラウド」という項目があります。

2. 「タグクラウド」から「サイドバーウィジェット」を選択。

3. サイドバーウィジェットに「タグクラウド」が表示されます。

・タイトルの欄に「タイトル名」を入力。ここでは「気になるキーワード」と入力。

・分類「カテゴリー」を選択。

4. 下記のCSSコードをの「外観」→「CSS編集」にコピペします。

.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. 完成です。

[adsense2]

ちょっと応用

①タグの色を変更したい場合 

※現在はピンク色になっています。

色を変更したい場合は、CSSコードの上から4行目の「#F5A9BC」の部分に好きなカラーコードを入力してください。

 

②マウスホバーの色を変更したい場合

※現在はマウスをおくと、濃いピンク色になっています。

色を変更したい場合は、CSSコードの下から8行目の「#FA5882」(マウスホバー時の背景色 )の部分に好きなカラーコードを入力してください。

5. グローバルメニューにアイコンをつける

これもずっとあこがれていたカスタマイズの一つ。アイコンをつけるだけで、メニューの見やすさがぐっと変わりますよ!

◆完成イメージ

このアイコンです。

◆方法

1. 「外観」 →「メニュー」をクリック。

2. 右上の「表示オプション」をクリック。

3. 「CSSクラス」のボックスにチェック。

4. カテゴリー欄に「CSS class(オプション)」が表示されます。

その欄に「Font Awesome」のサイトから好きなアイコンのコード(fa-××××)を入力。

※Font Awesomeについて下の方で詳しく説明しています。ご参考ください。

5. 「メニューを保存」をクリックします。

6. 完成です!

Font Awesomeのコードの見つけ方

例えば、「コーヒー」のアイコンを探したいときは・・・

(1)検索窓の部分に検索したいアイコンを英語で入力します。

(2)アイコンが表示されます。

(3)アイコンの下の英語を「fa-×××」という形にすればコードは完成!

ここでは「fa-coffee」になります。

おまけ

アイコンをクリックすると、以下のような画面になります。

下のほうからもコードが確認できます。

6. まとめ

いかがでしたか?

今回はSimplicity2のカスタマイズ第2弾になります。

第3弾もお楽しみに!

お役に経てば幸いです!

タイトルとURLをコピーしました