当ブログのカスタム、第何弾でしょうか・・・かお

アメブロカスタムの定番の中に入りますね、メニューバー

 

 

カスタムしてみました。

 

 

 

ヘッダー上部に置きました。

 

 

 

 

 

アメブロ用メニューバーの設置方法を解説してある記事はたくさんありますが、ヘッダー下部に設置する方法が多いかと思います。

 

 

 

ヘッダー下部には、「ブログトップ」「記事一覧」などのメニューがすでにありますので、メニューバー続きになり、私にとっては今ひとつ。。。

 

 

 

「ブログトップ」などのメニューを表示させず、カスタムしたメニューバーをヘッダー下部に表示させるというレイアウトもできるようですが、私が選んだレイアウトは、カスタムしたメニューバーをヘッダー上部に設置することにしました。

 

 

 

参考にさせていただいたブログ記事です。


 

 

 

解説されている設定方法自体は、ヘッダー下部に配置する方法ですが、ちゃんと上部に配置したい場合はどこを変えたらよいかのヒントがあります。

 

 

/* グローバルナビゲーションメニュー */のところの

top: -165px; /*ナビゲーションの縦位置の調整*/

 

 

/* ヘッダー背景*/のところの

skin-bgHeader {
margin-bottom: 50px; /*ヘッダー下にナビの場所を用意*/
}

 

 

bijyosiさんのブログ記事内に解説されている上記の部分をヘッダー上部用に調整すると配置できました。

 

 

 

メニューバーの具体的な設置方法は、リブログしましたbijyosiさんのブログをご覧くださいね。

設定方法の一部始終が解説されています。

 

 

 

「グローバルナビゲーションメニュー」というところが「メニューバー」のデザイン設定部分。

 

 

 

私は「背景色」やメニューの数を4つにしたかったので「width: 20%;」のところを「width: 25%;」(100%を何分割するかによってwidthを設定します)にしてみました。

 

 

 

とってもわかりやすい記事でしたので、オススメです。

 

 

 

 

 

それから、設定を変えたのに表示が変わらないという方。

 

 

【Ctrl】+【F5】を押してみてください

 

 

ブラウザは前に表示した内容を記憶して表示させることで、表示速度を早くしています。

記憶している古い表示内容をクリアして再表示させるショートカットキーが【Ctrl】+【F5】です。

 

 

 

 

 

配置しやすいのは調整が簡単なヘッダー下部になるから、ヘッダー下部への配置を説明してある記事が多いってこともやってみてわかりました。

カスタム自体に不安のある方は、最初は解説の例どおりにやってみて、うまく表示できたら色などを自分用にカスタムするのがよいかと思います。

「自分でやるのは不安」という方は、Happy Cloverにお手伝いさせてくださいね音譜

 

 

 

 

 

「Happy Clover」ってはてなマーク

 

 

「Happy Clover」の

「パソコン操作個別レッスン」

 

 

つながってくださる方、募集中 ビックリマーク
よろしくお願いしますぺこり音譜