はてなブログにメニューバーを付けてみよう
どうも、森山のぼくです。
昨日、ちょんちょんっとヘッダー部分にメニューバーを付けてみました。
はてなブログってHTMLのカスタム性が壊滅的なのがあまりよろしくないなぁと思うのですが、
少し機転を利かせれば、結構カスタマイズできますよ～
まぁどこのブログサービスつかってもカスタマイズすごい人たくさんいますよね……へへ。
というわけで、続きから私が行ったメニューバーの作り方をご紹介!!
メニューバーをWEBで簡単に作る。(けど有料！)
今回、いろいろなブログさんを見て作ったのですが
皆さん「CSS MenuMaker」を使って作ることが多い模様。
HTMLとかCSS作れないならこれでいいと思うけど、自分で作っちゃったほうが後々編集するときに便利だし簡単よ。
というか、このCSS MenuMaker。
まさかの、CSS部分は有料(たぶん)
HTMLはコピっとできるんだけど、CSSのコード開こうとすると
「14$ / year」の文字が。
金とんのかい！！！
しょっ商売だから仕方ないですもんね、ね。
そんなわけで有料だったので、そしたら自分で作ったほうが早いと思った。
そこで調べました森山さん。
リストタグで簡単に作れるのにね！
何回も仕事で作ってるのにね！
ラクしたくて///
手打ちで、メニューバーは作れる
ありました、メニューバーのコード載せてくれてるところ！
しかも綺麗！！へへ！！！
へっぽこデザイナーなんて、こんなものです。
コーディング不得意なんだもの。
綺麗なコードつかいたかったんだもの。
しゃーなし。
参考にさせていただきました！
HTMLとCSSこちらからお借りしています。maroom.hateblo.jp
ちょっと解説してみよ～
まるまる使うのは、ちょっとあれかなと思ったのでところどころ変えてます～
言うて、paddingとhoverの色くらい？
タグとかシーエスエスとか、全くわからない！
どこを弄ればどうなるの！
って方のために軽く解説したいなーと思います。
テーブルで横並べ
#menubar ul {
display:table;
width:100%;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
#menubar li {
display: table-cell;
width:25%;
padding:0;
background-color: #000000;
}
これを見て分かる人は分かると思うんだけど、
display:table-cellを使って横並べにしていますね。
この要素を使えばfloatみたいに、クリアフィックス使わなくても崩れないし、めんどくさくない(と思ってる)です。
何言ってるの？って人は、とりあえずめんどくさくないと覚えておいてください。
(というか、テーブル系のタグはテーブルレイアウト真っ只中のあれしか分からないので詳しく解説できないっす。申し訳ない。)
ただの箱に、「テーブルのセル」という役割を付けたので、横並べできる能力が備わった。と適当な感じで覚えてます(ぺろんちょ)
分からない人は、色とか線とか外見のタグ以外は弄らないように注意！(めんどくさくなるよ！)
文字の色を変えてみる
「HOME」とか、リンクになっている文字の色を変えてみましょう。
これを変えるには、
#menubar li a {
display: block;
margin:0 auto;
padding:5px;
border: 1px solid #FFFFFF;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
}
この中のcolor: #FFFFFF;を弄ります。
colorは文字色のタグです。
#FFFFFFを自分の好きな色にしてみよう！
フォトショを持っている人は、好きな色をカラーパレットで作れば簡単にチェックできるぞ！
カラーコードでぐぐれば一覧が出てくるので探してみてもいいかも～
ちなみに、
黒→#000
白→#fff
黒に近い灰色→#111～#999
白に近い灰色→#aaa～#eee
背景色を変えてみる
黒いメニューバーですが、この色も変えてみましょう。
今度は、background-colorを変えます。
#menubar li{
display: table-cell;
width:25%;
padding:0;
background-color: #000000; }
background-color: #000000;を好きな色に変えましょう！
メインカラーを使うとめりはりが出ていいかも～
私は、メインカラーは後述のホバーしたときの色に設定してます！
マウスを置いたときの色を変えてみよう
マウスをリンクに置いたときに、色が変わりますよね。
これは:hoverという擬似クラスを使って色を変えます～
魔法みたい！
#menubar li a:hover{
background-color: #333333; }
ここのbackground-color: #333333;を好きな色に変えてみましょう！
ちなみにこのブログは#ff5e8cにしてます！メインカラーです！
このhoverですが、
背景色のほかに、文字色を追加することでリンクにマウスが乗ったときの文字色も変えることができちゃいます！
color: #好きな色;を追加するだけですいすいっと変更可能！いえい！
マウス置いたら背景が消えるようにしたいーってときは、背景色を、ブログ本体の背景色と同じにしましょう～。
え、ちょ、文字色とか背景色変えたのに何も変わらないんだけど？
ちょくちょくあると思います。
元ある色設定の上から書き加えるので、要素の強さレベルが低かったりしてちゃんと反映されないんですよねー。
classからidにしたり、classを追加したり、出来ればいいんですけど出来ないっすよね。HTML編集できないんだもん。
ということで、森山ははてなブログのカスタマイズにおいては、すぐ諦めます。
反映されないときはとりあえず「!important」を付けて様子をみます。
対策できそうだったらするけど。
「!important」とはなんぞ?
要素のレベルが低いとき。
普通ならば、その要素＋親要素のクラス名ーとかいろいろ組み合わせたりいろいろやって、レベルを上げるわけですが、
そうもいかないとき。
レベルを上げられそうになかったときに使います。
最終手段的な。
この!importantは、レベルをマックスまであげる宣言をしてくれるものです～
普通は、後ろっ側に書かれたCSSを優先するはずなのですが、はてなブログはそうもいかないようないくような、
よく分からない仕組みです。
勉強不足なだけですが……！ね！
まぁ要するに
はてなブログで反映されない～～～ふえぇ～～～ってなったら森山が使う裏技です。
どうしても反映されなかった場合には、使ってみてもいいかも。
上手い対策の仕方ご存知の方がいれば教えてくださればうれしいです。ふへへ
そんなこんなで
そんなこんなで、今回は「maroom」さんのコードをお借りしました。
勝手に解説してしまってすみません……。
森山の備忘録だったりもします。
もしはてなブログにメニューバーを付けたい！という方がいらっしゃいましたら参考にしていただければと思います。
最後に、当ブログに使用しているCSSさらします
少し森山側でカスタマイズを加えたので、当ブログに使用したCSSも置いておきます～。
ちなみに、本文で触れてませんでしたが、メニューバーの幅100％表記なのに、なぜか小さくなってしまうので
#top-editarea {
width: 1050px;
}
を追加しています。
ヘッダーにHTMLを追加した場合、幅が最初から決められてるようで。
小さくなってしまったので、このコードを追加して無理やり幅広めてますー。
(これで合ってるのかなぁ。手探りすぎる。ｗ)
/* メニューバー */ #top-editarea { width: 1050px; } #manubar { width:100%; } #menubar ul { display:table; width:100%; margin: 0; padding: 0; } #menubar li { display: table-cell; width:15%; padding:0; background-color: #000000; } #menubar li a { display: block; margin:0 auto; padding:10px; border: 1px solid #FFFFFF; text-decoration: none; color: #FFFFFF; text-align: center; font-size: 18px; } #menubar li a:hover { background-color: #ff5e8c; } /* メニューバー終わり */
シンタックス・ハイライト？使ってみたんだけど、なんかすげぇ色だよな。
見やすいけどさ！コードっぽいけどさ！ｗ
