アメブロカスタマイズの教科書でSEOに強いブログ集客始めよう

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

 

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

 

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

 

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

 

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

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

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

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

 

 

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

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

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

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

 

 

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

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

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

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

 

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

■メニューのHTML

このブログについて
プロフィール
アメブロカスタマイズ
実績・評判
お問い合わせ

■入力完了後のページ

 

 

CSSの編集画面を開く

 

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

 

修正前のページとCSS

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

 

.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を編集して、メニューを作る：パターン１

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

それでは、パターン１の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; /*リンク文字のカラーコードを指定*/
}

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

 

 

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

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

それでは、パターン２の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;
}

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

 

まとめ

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

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

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

 

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

 

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

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

 

以上、鈴木でした。