こんにちは。パンダのプログラミング研究所（＠PandaProgramLab）へようこそ！
今回は、ブログカスタマイズの日記の1回目です。
では、スタート！
HTML、CSSの知識は必須
WordPressのブログカスタマイズには、HTMLとCSSの知識が必要不可欠です。
HTML、CSSの基本はこちら↓
HTML、CSSを本格的に学習したい方はこちら↓
Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
prog-8.com
ヘッダーのカスタマイズ
今回は、ヘッダーのカスタマイズをしていきたいと思います。
ヘッダーロゴのカスタマイズ
まず、以前のヘッダーロゴから、テキストに戻してみました。
でも、これだけではシンプルすぎるので、CSSを編集して、フォントの太さを調節しました。
.site-name-text{
font-weight: bold;
}次に、それっぽい背景画像をつけてみました。
これで、ヘッダーロゴのカスタマイズは終わりです。
ヘッダーメニューのカスタマイズ
次は、ヘッダーメニューのカスタマイズをしていきます。
ヘッダーメニューの所に気になる点があるので、そこを修正していきます。
気になる点とは、メニューの副項目を開いたときに、背景色が黒、文字色が白になってしまう所です。メイン項目と副項目のメリハリをつけたいと思いました。
少し試行錯誤した結果、CSSコードは以下のようになりました。
.sub-menu li {
background-color: #f7f7f7;
}
.sub-menu .item-label {
color: #0a0a0a;
}これで、ヘッダーメニューのカスタマイズは終わりです。
まとめ
今回は、ブログのヘッダー部分をカスタマイズしていきました。
バイバイ！
コメント