WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、メニューの背景色とか変更。プロフィールも追加してみたり。

公開日：2015/03/04 最終更新日：2015/03/04

ℹ️本記事にはPRが含まれています。

SiSO-LAB WordPressで初心者がブログを作るよ

無料テンプレートのGush2、あれこれいじりやすくていいですよね！記事の元ネタにしている新ブログは既に運用開始していますが、カスタマイズした記録をちゃんと保管したおいたので、WordPressやGush2にどんな変更をしたのか、順を追って説明しています。

本記事は、WordPress V4.1と無料テーマのGush2 V1.1.1にて動作確認を行っています。

ナビゲーションバーの背景色を青に変更

前記事でナビゲーションバーのメニュー項目表示の不具合？について修正方法を書きましたが、いじっていたらなんとなく青色の方が良くなってきたので、ナビゲーションバーの背景色を青色に変更してみました。

変更ファイルは、いつものstyle.cssです。418行目に「.togmenu」という一連の定義があります。


.togmenu {
     display: none;
     color: #fff;
     background: #444;
}

.menubtn {
     padding: 8px;
     color: #fff;
     background: #444;
     text-align: right;
}

nav#menu ul {
     overflow: hidden;
     margin-bottom: 24px; background: #444;
}

現在は「#444」ということで暗い灰色が設定されています。これを「#45C」という、やや暗めの青色に変更します。このコードの下の方にある「」は、前回修正したところです。


.togmenu {
     display: none;
     color: #fff;
     background: #45c;
}

.menubtn {
     padding: 8px;
     color: #fff;
     background: #45c;
     text-align: right;
}

nav#menu ul {
     overflow: hidden;
     margin-bottom: 24px; background: #45c;
}

それでは、レスポンシブデザインということで３つの表示サイズで動作確認をしてみました。

まずは表示サイズ大です。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、ナビゲーション背景色変更

続いて表示サイズ中です。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、ナビゲーション背景色変更

表示サイズ中で「NAVI」リンクをいじってみました。ちゃんと新たに表示されている部分も青色になっています。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、ナビゲーション背景色変更

最後は表示サイズ小です。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、ナビゲーション背景色変更

表示サイズ小でもちゃんと「NAVI」表示が動作していることを確認しました。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、ナビゲーション背景色変更

ついでにプロフィールを追加したり

サイト運営者がどういう人なのか知ってもらうためにプロフィール（プロファイル？どっちなのかな？）を追加しました。

プロフィールは固定ページがいいかな？

プロフィール内にどんな情報を書くべきかいつも悩むところですが、とりあえずサイトに関する想いとか書いてみることにしました。こういうページは、WordPressの場合、固定ページで書くのが良いかと思います。というわけで、WordPressをインストールした時から自動的に作られていたサンプルページをちょちょっと編集してみました。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、プロフィール追加