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

 

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

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

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

Sponsored Link

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

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

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

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

でした。

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

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

になります。

スポンサーリンク

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

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

◆完成イメージ

◆方法

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

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

3. サイドメニューのカテゴリーにアイコンをつける

なくてもいいのですが、あるとちょっとだけ嬉しいカスタマイズ(笑)

◆完成イメージ

 サイドメニューのカテゴリーにアイコンをつける

◆方法

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

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

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

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

超オススメ♪

◆完成イメージ

◆方法

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

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

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

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

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

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

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

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

5. 完成です。

ちょっと応用

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

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

色を変更したい場合は、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弾もお楽しみに!

お役に経てば幸いです!

Sponsored Link

にほんブログ村 海外生活ブログ アメリカ情報へにほんブログ村 海外生活ブログ 海外移住へにほんブログ村 恋愛ブログ 国際結婚へ

Sponsored Link