hakidas

仕事から趣味まで色々と

はてなブログを始めるにあたって行ったカスタマイズ①(グローバルナビの設置)

色々と吐き出したいのでブログをはじめました。

私は何ごとも形から入りたいので、

まずは、諸先輩方を参考にさせていただいて、

ブログカスタマイズを行います。

上部に固定されるグローバルナビの設置

ブログをはじめるにあたって色々とブログを物色していると

スクロールしてもついてくるグローバルナビ(メニュー)があるブログが

見やすかったです。

というわけで、下記をそのまま参考にして色だけ変えます。

shiromatakumi.hatenablog.com

グローバルナビの色を変える 

基本的に上記を見ればわかる人は色々と加工できるのでしょうけど、

私のような初心者は色々と調べなきゃわかりませんでした。

同じ初心者の参考になればと思い、色を変えるにあたっていじった部分を書きます。

background-color: #be4c13;

はてなブログのヘッダーメニューの設置とカスタマイズ(PC用) - NO TITLE

 CSS内に3箇所あるこのコードの♯部分を好きな色にしてあげれば、

メニューの基本の色が変わります。

 

border-bottom: 2px solid #a24111;

はてなブログのヘッダーメニューの設置とカスタマイズ(PC用) - NO TITLE

メニューのアンダーラインの色を変える場合はこのコードの♯部分を好きな色にします。

  

.header_menu .header_menu_list li a:hover { background-color: #fff; color: #111111; border-bottom: 6px solid #ff4a00; }

はてなブログのヘッダーメニューの設置とカスタマイズ(PC用) - NO TITLE

カーソルを持っていった時の基本の色はbackground-colorを、

文字の色はcolorを、アンダーラインはborder-bottomの♯部分を変更します。

 

カラーコードはこういうとこを参考にしました。

html-color-codes.info

 

おわりに

思った以上に長くなったので何回かに分けて、

当ブログをはじめる際に行ったカスタマイズ内容を書いていこうと思います。

 

コードを全部持ってくると盗作になってしまうと思い、

引用で要素の部分だけを持ってきましたが、

実際のところコードの引用はどこまで許されるんでしょうね。