株式会社ドリル Home > アメブロカスタマイズ > ヘッダーのカスタマイズ > 【アメブロカスタマイズ】2-4 ヘッダ画像の下にメニューを設置しよう – 見てもらいたいコンテンツをメニューにする

【アメブロカスタマイズ】2-4 ヘッダ画像の下にメニューを設置しよう – 見てもらいたいコンテンツをメニューにする

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

2013 01 08 1911

 

こんにちは、ドリル 鈴木です。
今日は、前回設置したヘッダー画像の下にメニューを設置してみましょう。

 

いつも見てもらいたいページへのリンクをメニューとして設置すれば、わかりやすくなるので、当然見てもらいやすくなります。
特にカテゴリーが多い場合などは効果を発揮します。

 

今回はテキストだけで作成したメニューなので、特別なツールなども要りません。
また、2種類の方法を紹介しているので、自分にあったメニューを選んで下さい。
それでは、スタートです。 

 

カスタマイズを始める前に

今回はHTMLでヘッダーを作成し、CSSを編集して作成したヘッダーをヘッダー画像の下に移動させます。
そうする事によって、オリジナルのメニュー作成ができます。

カテゴリーが多い方や、優先的に見てもらいたいページのある方は、メニューを用意する事によって閲覧者がページを断然探しやすくなります。
若干難しくなって来ていますが、これを理解できればCSSの仕組みを理解出来たとも言えるでしょう。
ぜひ、チャレンジしてみて下さい。 

また、今回はユーザーによって使い分けられる様に2種類のメニューを説明しています。
ページの雰囲気や用途に応じて、使い分けて下さい。
それでは、今回のメニューの完成イメージです。

2013 01 31 1359

 

2013 01 31 1403

 

サイドバーの設定をして「フリースペース」を使用する

メニューのHTMLを記述するには「フリースペース」を使用する必要があります。
それには、最初にサイドバーの配置設定で「使用する機能」に「フリースペース」を登録して下さい。

まずは、サイドバーの「配置設定」を開いて下さい。
「ブログを書く」>サイドバーの「サイドバー」の「配置設置」をクリックします。 

次に、「使用する機能」の白い領域に「フリースペース」を移動させて、「保存」をクリックして下さい。
これで、フリースペースが使える様になりました。 

2013 01 31 1229

 

 

フリースペースにメニューのHTMLを記述する

先程使える様にした「フリースペース」にメニューのHTMLを記述します。

まずは、フリースペースの編集画面を開いて下さい。
「ブログを書く」>サイドバーの「サイドバー」の「フリースペース編集」をクリックします。

次に、開いた編集画面にメニューのHTMLを入力します。
この際、HTMLは改行なしで記述しなければいけません。
途中で改行を入れてしまうと、思い通りに表示されない原因となるので、注意して下さい。 

2013 01 31 1425

 

入力が終わったら、「保存」をクリックして、編集が完了です。 

■メニューのHTML

■入力完了後のページ

2013 01 31 1423

 

 

CSSの編集画面を開く

2013 01 28 1526

 

次に、CSSの編集を行いますので、CSS編集画面を開いて下さい。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。

 

修正前のページとCSS

先に修正前のページとCSSになります。
前回のヘッダー画像が設置された状態になっています。
ここに、今回作成したメニューを追加したいと思います。 

2013 01 31 1325

 

.skinHeaderArea{
    background-image: url(ヘッダー画像のパス);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    height: 300px;
    margin-bottom: 15px;
}

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
}

CSSを編集して、メニューを作る:パターン1

それでは、パターン1のCSSの修正を記述していきましょう。
このパターンでは、メニュー毎の幅を文字に合わせた幅にする事によって、メニュー項目の追加がしやすくなっています。
また、ポップなデザインに仕上がるので、個人の方向けのデザインだと思います。

それでは、パターン1のCSSになります。
修正の際、前回修正した「.skinHeaderArea」の修正が含まれているので、修正箇所に注意して下さい。 

 

.skinHeaderArea{
    background-image: url(ヘッダー画像のパス);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    height: 300px;
}

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
    position: relative;
    padding-top: 55px; /*メニューの高さに合わせて指定*/
}
ul#headerMenu {
    width: 980px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #C00; /*背景色のカラーコード*/
    margin: 0;
}
ul#headerMenu li {
    display: inline;
    font-size: 115%;
    font-weight: bold;
    line-height: 40px;
    border-right: #FFF 1px solid; /*右側の区切り線を指定*/
    padding: 8px 10px;
    margin: 0;
}
ul#headerMenu li a {
    color: #FFF; /*リンク文字のカラーコードを指定*/
}

設定後のページは以下の様になります。
メニューが左寄せになっているのが、確認出来ると思います。

 2013 01 31 1405

 

CSSを編集して、メニューを作る:パターン2

次に、パターン2のCSSの修正を記述していきましょう。
このパターンでは、メニュー毎の幅を均等にして、きっちりとした見た目にしています。
追加は難しいのですが、堅いイメージが作られるので、BtoBの方向けのデザインだと言えます。

それでは、パターン2のCSSになります。
こちらも、前回修正した「.skinHeaderArea」の修正が含まれているので、修正箇所に注意して下さい。

 

.skinHeaderArea{
    background-image: url(ヘッダー画像のパス);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    height: 300px;
}

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
    position: relative;
    padding-top: 55px;
}


ul#headerMenu {
    width: 980px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #FFF;
    margin: 0;
}
ul#headerMenu li {
    font-size: 115%;
    font-weight: bold;
    line-height: 40px;
    float: left;
    text-align: center;
    background-color: #C00;
    padding: 0;
}
ul#headerMenu li.menu1 {
    width: 196px;
    margin-right: 1px;
}
ul#headerMenu li.menu2 {
    width: 195px;
    margin-right: 1px;
}
ul#headerMenu li.menu3 {
    width: 195px;
    margin-right: 1px;
}
ul#headerMenu li.menu4 {
    width: 195px;
    margin-right: 1px;
}
ul#headerMenu li.menu5 {
    width: 195px;
}
ul#headerMenu li a {
    width: 100%;
    display: block;
    height: 40px;
    color: #FFF;
}

設定後のページは以下の様になります。
メニューが均等な幅で配置され、ボタンの様になっている事がわかります。
また、パターン2では幅の合計(マージン、パディング含めて)が「980px」になる様に計算する必要があります
メニューを増やす場合や減らす場合はそこをしっかり計算しないと思った通りに表示されない事があるので、注意して下さい。 

2013 01 31 1406

 

まとめ

 以上でメニューの設置が完了しました。

新しいCSSのプロパティで「position」が登場しています。
これはブログ内のレイアウトを修正する場合に重要となってくるプロパティなので、必ず覚えて下さい

また、メニューの高さに合わせて「.skinContentsArea」の「padding-top」は修正する必要があります。
今回はメニューの高さ「40px」にマージン「15px」を足した「55px」を設定しています。
こちらも、みなさんのメニューの高さに合わせて修正する様にして下さい。

 

慣れてしまえば、決してむずかしいことではありません。
また、理解すると、とても応用の効く内容なので、必ず覚えておいて下さい。
ポイントは「relative」と「absolute」の設定です。

 

予想通りに表示されたでしょうか?
もし、違っていたらCSSの設定が抜けている可能性があります。
また、そもそも表示されない場合は「フリースペース」の設定ができていない可能性があるので、今一度確認してみて下さい。
(慣れた自分たちでもたまに忘れてしまいますので。。。) 
 

わかりにくい所があれば、ぜひ気軽にコメントで質問して下さい。

 

以上、鈴木でした。

【アメブロカスタマイズ】2-4 ヘッダ画像の下にメニューを設置しよう – 見てもらいたいコンテンツをメニューにする” への17件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です