シーサーブログのヘッダーにメニューを設置する/新デザインシステム

今回は、シーサーブログ新デザインシステムのヘッダー画像下に、

メニューを設置する方法を説明しています。


ヘッダー画像が無い場合でもメニューの設置は可能です。

その場合は、このようなシーサーブログのヘッダーになりますが、

シーサーブログの新デザインシステムのテンプレートのヘッダーにメニューバーを設置した画像クリックで大きく。

ヘッダー画像が無い場合は、

今回の記事の●~●間の作業をやって下さい。



読むのに7~8分かかります。


シーサーブログのヘッダー画像下にメニューを設置する

(新デザインシステム)



今回の作業を行うと、

次のようなシーサーブログのヘッダーに、


メニューを設置する前のシーサーブログ 画像は大きくなります。



メニューを設置出来るようになります。
↓


メニュー設置完了の画面 画像は大きくなります。






まず、シーサーブログにログインして下さい。ログインしたら、

管理画面右上の「マイブログ」から、

該当ブログの「デザイン」⇒「デザイン設定」

そして、ご利用中の「デザインタイトル」をクリックして下さい。


シーサーブログ新デザインシステムの「HTML編集」にコードを追加する


画像では、「シンプルA.ホワイト 右カラム」になっています。


編集するのは、次の2か所です。

  • シーサーブログの「HTML編集」へコード追加
  • シーサーブログの「スタイルシート編集」へコード追加

チェックマークシーサーブログの「HTML編集」へコード追加

ご利用中の「デザインタイトル」をクリックしたら、

「HTML編集」をクリックして下さい。


HTML編集にこのコードを追加する大きい画像をご覧になれます。



上記の「HTML編集」が表示されますので、

16行目~21行目あたりにある、次のコードを探して下さい。

	<header role="banner" class="l-header">
		<div class="header">
			<h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1>
			<p class="description"><% blog.description | nl2br | mark_raw -%></p>
		</div>
	</header>
このコードを見つけたら、

その直下に次のコードを入れます。

<!--メニュー開始-->
<div id="navi-bar">
<ul class="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
</div><!--navi-bar終了-->
<!--メニュー終了-->

上の画像(HTML編集)をクリックして、ご確認いただいて、

同じ様に追加出来たら、あなたのメニュー名を入力していきます。

メニュー1~4までお好きなメニュー名を入れて頂き、

それぞれの#の箇所に、そのURLを入れて下さい。



(例) 私のサイトを例にすると

メニュー1⇒「トップページ」と記入して、

#にはそのURL⇒http://8kk2.net/ と記入します。

メニュー2⇒「プロフィール」と記入して、

#にはそのURL⇒http://8kk2.net/archives/14 と記入します。

<li><a href="http://8kk2.net/">トップページ</a></li>
<li><a href="http://8kk2.net/archives/14">プロフィール</a></li>

こんな感じで、メニュー4まで入力して下さい。




メニュー名の箇所には、

「トップページ」や「カテゴリー名」を入れる方が多いと思いますが、

「個別の記事」や「お問い合わせ」などにして頂いてももちろんOKです。


またメニュー5を追加する事も可能ですが、

それは後ほど説明させて頂きますので、今は4つ記入して下さい。



完了したら、

下へスクロールして「保存」をクリックしましょう。

これで一旦、「HTML編集」での作業は完了です。


チェックマークシーサーブログの「スタイルシート編集」へコード追加

続いて、「スタイルシート編集」へコードを追加します。

「デザイン」⇒「デザイン設定」⇒「デザインタイトル」

「スタイルシート編集」をクリックして、一番下までスクロールします。

次の追加コードをコピーして一番下に張り付けて下さい。


/*メニューの表示場所*/
#navi-bar {
 margin-top:0px;
 padding:0;
}
#navi-bar ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#navi-bar ul.menu li{
  display:inline;
}
  
#navi-bar ul.menu li a{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;}
#banner{margin-bottom:0px;}


/* メニューの位置・サイズなどの調整 */
#navi-bar{max-width:980px;}   /* メニュー全体の幅 */
#navi-bar ul.menu li a{
  width:25%;            /* メニューの幅 */
  line-height:30px;       /* メニューの高さ */
  font-size:14px;         /* メニューの文字サイズ */
}


/* 文字の色・背景・装飾などの調整 */
#navi-bar ul.menu li a{         /* 通常時 */
  color:#FFFFFF;                /* 文字色(白) */
  font-weight:bold;             /* 太字 */
  text-decoration:none;         /* 下線(なし) */
  background-color:#4460AF;     /* 背景色(紺色) */
}
#navi-bar ul.menu li a:hover{  /* マウスポインターを乗せた時 */
  color:#FDF240;               /* 文字色(黄色) */
  font-weight:bold;            /* 太字 */
  text-decoration:none;  /* 下線(なし) */
  background-color:#4460AF;    /* 背景色(紺色) */
}
#navi-bar:after{  /* 横並びにしない */
  content:"";
  display:block;
  clear:both;
}


.l-content {
  margin-top: 30px;
}



「スタイルシート編集」の一番下に貼り付けて下さいね。

サイズや長さを指定するpxや色コードの変更(#4460AFなど)は、

あなたのシーサーブログに合わせて、自由に変えて下さい。



私の記事を実践して、ヘッダー画像を作成&追加してる方は、

次のコードの直下に貼り付けて保存して下さいね。

.l-header{
  height: 300px; /* ヘッダー画像の高さ */
  background-image:url("あなたのヘッダー画像のURLが記載されてる"); /* 背景画像 */  
  background-repeat:no-repeat; /* 背景画像繰り返し */
}


貼り付けて保存したら、シーサーブログを表示させて下さい。

ヘッダーにメニューが表示されたはずです。


ヘッダー画像を表示してない方は、ここで作業は全て終了になります。

お疲れ様でした。




私の記事を実践して、ヘッダー画像を表示させてる方は、

今こんな感じになってると思います。


ヘッダー画像とメニューの間が空き過ぎ 画像は大きくなります。


これでは、ヘッダー画像とメニューの間が空き過ぎですよね?

「スタイルシート編集」の一か所を変更すれば空間が埋まります。

変更する箇所は、

先ほど「スタイルシート編集」の一番下に追加したコードの直前、


ヘッダー画像とメニューの空間を埋めるためにCSSを変更する 画像は大きくなります。

以前追加したこの部分になります。

300pxを260pxに変更して保存して表示してみて下さい。


メニュー設置完了の画面 画像は大きくなります。


空間が埋まり、きれいになりました!!

以上で、メニュー4つの方の設置も終了になります。

お疲れ様でした。


最後に、メニュー5つ設置したい方の説明をして終わりにします。


メニューは5つにしたい方

先ほど「HTML編集」に追加した

<!--メニュー開始-->
<div id="navi-bar">
<ul class="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
</div><!--navi-bar終了-->
<!--メニュー終了-->

こちらのコードへ
<li><a href="#">メニュー5</a></li>
を追加して保存して頂き、

「スタイルシート編集」の一番下に追加したコードの一か所、

/* メニューの位置・サイズなどの調整 */
#navi-bar{max-width:980px;}   /* メニュー全体の幅 */
#navi-bar ul.menu li a{
  width:20%;            /* メニューの幅 */
  line-height:30px;       /* メニューの高さ */
  font-size:14px;         /* メニューの文字サイズ */
}

この部分のwidth:25%;になってるのをwidth:20%;に

変更して保存して下さい。


これは1つのメニューの幅の割合を指定する箇所で、

メニューが4つなら4等分の25%、

メニュー5つなら5等分の20%と指定する箇所になります。


これでメニュー5つの方もヘッダー画像下にメニューが綺麗に表示されてます。

シーサーブログを表示して下さい。


どうですか?・・・上手く表示されてますか??

特に、ヘッダー画像の作成から今回のヘッダー画像下のメニュー設置まで

両方実践して頂いた方・・・ご満足いただけてるなら私も嬉しいです。^^

きっと、素敵なヘッダー画像で彩られた

あなたのオリジナルシーサーブログ(新デザインシステム)

になった事でしょう。



以上で、

新デザインシステムのシーサーブログのヘッダーに

メニューを設置する方法&ヘッダー画像下にメニューを入れる方法の

2つの説明を終えます。


ふ~

読んで頂けてありがとうございました。



カテゴリー:シーサーブログ







サブコンテンツ

当サイトの記事一覧

アーカイブ

このページの先頭へ