2018.04.16今回は、WordPressテーマ「Simplicity2」のカスタマイズ方法です。グローバルナビ(メニューバー)を次のようなデザインにしていきます。上下をラインではさむデザインで、各項目の横にはアイコンが入っています。マウスのポインタを乗せると文字の色が変わり、アンダーラインが出るようになっています。今回はこのカスタマイズ方法を紹介します。Awesomeのアイコンの色を変更するまとめSimplicity2の設定をするまずはSimplicity2の設定をしていきます。スキンを変更する1.ダッシュボード画面から、外観→カスタマイズとすすみます。2.スキンを選択します。3.スキンの一覧が出ますので「オレンジメニュー(サブメニューなし)」を選択します。グローバルナビの背景色を変更するつづいて、グローバルナビの背景色を設定します。1.カスタマイズの画面に戻り、「色」をクリックします。2.色の項目の中ほどにある「グローバルナビ色」の「色を選択」をクリックします。3.背景に使いたい色を選びます。このブログでは「白」を選択しています。「#ffffff」で白になります。色を選ぶ時は「WEB色見本」を参考にすると便利です。文字色を決めるつづいて、ナビの文字色を決めます。1.「グローバルナビリンク色」の「色を選択」をクリックします。2.好みの文字色を選びます。このブログでは、濃いグレー「#4e3e3e」を選んでいます。グローバルナビの表示を横幅いっぱいにするグローバルナビが横幅いっぱいに表示されるようにします。1.カスタマイズの画面から「ヘッダー」を選択します。2.「グローバルナビを横幅いっぱいにする」にチェックを入れます。CSSを追加するここからはCSSのコードをコピペしていく作業です。つづいて、CSSにコードを追加します。コードを貼る場所コードを貼る場所は、Simplicity2の子テーマの「style.css」になります。「style.css」は、WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」にすすむとあります。コードは、特別な理由がない限り、後ろに追加していけばOKです。上下にラインを入れるまずはグローバルナビの上下にラインを入れるコードです。次のコードを子テーマの「style.css」にコピペします。#5FB3F5;}「border-top」が上のライン、「border-bottom」が下のラインにあたります。このブログでは、上下とも同じ設定にしています。「1px」がラインの太さです。数字を大きくすると線が太くなります。「#5FB3F5」がラインのカラーです。このブログではブルー系にしています。ポインタを乗せたときの色を変更するつづいて、ポインタを乗せたときの下のラインと文字色を変更します。次のコードを子テーマの「style.css」にコピペします。background-color:white;}最初の「color」のところにある「#5FB3F5」が、ポインタを乗せたときの文字色になります。次の「background」のところにある「#5FB3F5」が、ポインタを乗せたときに出るラインの色です。このブログではどちらも上下のラインの色に合わせていますが、お好みに応じて設定してみてくださいね。色がうまく反映されない時は、Simplicity2の「カスタマイズ」→「色」→「グローバルナビリンクホバー色」を変更してみてください。その設定をすると反映される場合があります。各項目のアイコンを設定するつづいて、グローバルナビの文字の前にアイコンを設定する方法です。Awesome」に対応しているので、簡単に設定することができます。Awesome」がデフォルトで使えるようになっています。Awesome」とは、手軽に使えるアイコンフォントのことで、たとえば手紙なら「」、電車なら...yuzuyu3.comが、このままだとアイコンの色がデフォルトのままになりますので、好きな色になるようにしていきます。Awesome4.7.0のアイコンの色を変更するには、次の手順で作業します。Awesomeのコードに名前(クラス名)をつけるCSSにコードを加えるこの2つを順に行っていきます。Awesomeの色を変えるには、まずアイコンのコードに名前をつけます。名前は何でもOKですが、必ず半角スペースをあけて入れるようにします。今回は「topicon」という名前をつけてみました。CSSにコードを追加するつづいて、CSSにコードを追加します。次のコードを子テーマのstyle.cssにコピペします。#5FB3F5}先ほどつけた名前に対して、色を変更しますよという指定です(「topicon」以外の名前をつけた方は、その名前にしてください)。ここでは、上下のラインと同じ色「#5FB3F5」を指定していますが、お好みの色にしてみてくださいね。アイコンごとに違う名前をつけて、CSSで1つ1つ指定すれば、それぞれ違う色にすることもできます。まとめ今回はSimplicity2のグローバルナビのカスタマイズ方法でした。グローバルナビの見栄えが変わると、サイト全体の印象もガラッと変わります。興味のある方はぜひチャレンジしてみてくださいね。Simplicity関連では、こんな記事もありますよ!どれもかんたん!Simplicity2カスタマイズまとめこのブログではWordPressテーマ「Simplicity2」のカスタマイズをいろいろと紹介しています。Simplicity2はデフォルトのままでも美しいデザインですが、少しカスタマイズをするだ...yuzuyu3.com【Simplicity2】記事やサイドバーの枠線を消す、色を変えるカスタマイズ今回は、WordPressテーマ「Simplicity2」の枠線部分のカスタマイズ方法です。Simplicity2は、デフォルトだと記事のまわりに枠線が入ります。この枠線を消し...yuzuyu3.comSimplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。消したのはこの部分です。いうわけで、その方法を書いてみます。カスタマイズTwitterFacebookはてブPocketLINEコピーゆずゆをフォローするこの記事を書いた人ゆずゆ読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。