XeoryのBaseを使っているのですが、やはりちょいちょいと気になる部分が出てきました。
前回はサイトタイトルに個性を出しましたね。
今回はトップページをカラフルにする方法をお教えします。
グローバルメニューの背景色を変える
デフォルトのグローバルメニューでかなりシンプルです。
Xerox Base自体が白いのでデフォルトのままだと本当に真っ白・・・
少し見にくいくらいです。
ということで、グローバルメニュー自体に色をつけ、
サイト内にラインを入れるようなメリハリをつける事にしました。
ワプ子さんのページを参考に行いました
http://wpwith.net/2016/11/29/post-202/
[browser-shot url=“http://wpwith.net/2016/11/29/post-202/” width=“600” height=“450”]
色を決める
グローバルメニューの色を先に決め、色コードをメモしましょう。
私は色見本と配色サイトから
[browser-shot url=“http://www.color-sample.com” width=“600” height=“450”]
E37E8Dのサンゴピンクを選びました。
http://www.color-sample.com/colors/e37e8d/
[browser-shot url=“http://www.color-sample.com/colors/e37e8d/” width=“600” height=“450”]
スタイルシートを編集する
スタイルシートからコード変更を行います。
ただし、Xeory Baseは初期設定で色を選択しているので、
その選択した色のコードを編集してくださいね。
「初期設定」で選択できる色はデフォルト以外に、緑、赤、オレンジ、ピンクがあります。
スタイルシートでは各色に対して、以下のようにコードが書かれています。
緑の場合：カラースキーム01 body.color01
赤の場合：カラースキーム02 body.color02
オレンジの場合：カラースキーム03 body.color03
ピンクの場合：カラースキーム04 body.color04
私は「ピンク」を初期設定で選んでいるため、
カラースキーム04 body.color04の部分のコードを編集しします。
スタイルシートの半分より下に、カラースキーム04の詳細を設定している箇所があります。
グローバルメニューの変更を行うので#gnaviのコードを探してくださいね。
背景の色を変えるのでbackgroundの色を#fffから#E37E8Dに変更します。
デフォルト
body.color04 #gnav {
background: #fff;
border-top: 1px #ededed solid;
border-bottom: 1px #ededed solid;
}
body.color04 #gnav li.current-menu-item a {
border-top: 1px #F6706F solid;
}
body.color04 #gnav li a {
border-top: 1px #ededed solid;
color: #2B2D2D;
background: #fff;
}
編集後
body.color04 #gnav {
background: #E37E8D;
border-top: 1px #ededed solid;
border-bottom: 1px #ededed solid;
}
body.color04 #gnav li.current-menu-item a {
border-top: 1px #F6706F solid;
}
body.color04 #gnav li a {
border-top: 1px #ededed solid;
color: #2B2D2D;
background: #E37E8D;
}
これでグローバルメニューはサンゴピンク色になりました♡
フッターも同じ要領で変えられます
ついでに運営者情報などを載せているフッターの色も同じ色に変えました。
同じく背景の色を変えるのでbackgroundの色を#fffから#E37E8Dに変更します。
デフォルト
body.color04 .footer-01 {
background: #fff;
border-top: 1px #ededed solid;
}
編集後
body.color04 .footer-01 {
background: #E37E8D;
border-top: 1px #ededed solid;
}
ヘッダーとフッターに色つきのボーダーを追加
本当に真っ白なトップなのでトップの上と下にもボーダーを入れる事にしました。
またしてもサンゴピンク色#E37E8Dにして統一感を出しました。
作者さんの名前がわからない・・・
こちらのサイトを参考にさせてもらいました
http://wordpress999.info/xeory-base-topfooter.html
[browser-shot url=“http://wordpress999.info/xeory-base-topfooter.html” width=“600” height=“450”]
またしてもスタイルシートの中からheaderのタグを探し、以下のタグを追加します。
border-top: 10px solid #E37E8D;
デフォルト
/* —————————————-
- header
—————————————- */
header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
}
編集後
/* —————————————-
- header
—————————————- */
header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
border-top: 10px solid #E37E8D;
}
フッターも同じ要領で行います。
ヘッダー同様にスタイルシートの中からfooter-02を探し、以下のタグを追加します。
border-bottom: 10px solid #E37E8D;
デフォルト
.footer-02 {
background: #fff;
border-top: 1px #efefef solid;
}
編集後
.footer-02 {
background: #fff;
border-top: 1px #efefef solid;
border-bottom: 10px solid #E37E8D;
}
これでボーダーがつきました。
だいぶトップページにメリハリが出ましたね！
次回はヘッダーのSNS表示、各記事のSNS表示と自己紹介を消す
＆スマホのトップページ表示のグローバルメニューの変更をお教えしたいと思います。
他の方のweb作成方法も載っています
ぜひ参考にしてみてください⇩
※ファイルを編集する場合には、事前にバックアップをとっておくことをお勧めします。
ファイルの改変は全て自己責任でお願いいたします。
