Home > FC2ブログ > basic_white > basic_whiteテンプレート ヘッダメニューにリンクを任意の横幅で追加設置する方法

basic_whiteテンプレート ヘッダメニューにリンクを任意の横幅で追加設置する方法

 basic_whiteテンプレートのヘッダメニューにリンクを追加設置する方法です。

 初期状態のままだと、画像の関係により狭い横幅で固定されてしまうため、画像を使わずに任意の横幅でリンクを設置します。

1. スタイルシート

 
記事一覧 @ツイッター 特集

 スタイルシートに上記コードを追加します。色を選択すると色が変わります。「横幅を固定しない」にチェックを入れるとメニューの文字数に合わせた横幅になります。

2. HTML

 場所はCtrl+Fキーで『archives.html』を検索。以下の部分を丸ごと変更します。

<p class="archives"><a href="<%url>archives.html">記事一覧</a></p>

↓変更後

<ul id="menu">
<li><a href="./">HOME</a></li>
<li><a href="archives.html">記事一覧</a></li>
</ul>

 以上で完成です。

 HOMEのリンクが不要な場合はHOMEの行を丸ごと削除してください。

ツイッターやプロフィール記事へのリンクを追加

 リンクを追加する時は以下の形式でmenu内に追加します。

<li><a href="URL">リンク名</a></li>

 例えばツイッターへのリンクを追加する時は次のようになります。URLのアカウント名には自分のアカウントを入れてください。

<ul id="menu">
<li><a href="./">HOME</a></li>
<li><a href="https://twitter.com/アカウント名">Twitter</a></li>
<li><a href="archives.html">記事一覧</a></li>
</ul>

 ブログにプロフィール記事を投稿した場合はその記事のURLを貼り付けて追加してください。

<ul id="menu">
<li><a href="./">HOME</a></li>
<li><a href="ブログ記事URL(blog-entry-○○.html)">プロフィール</a></li>
<li><a href="archives.html">記事一覧</a></li>
</ul>

カテゴリページへのリンクを追加

 変数を使ってカテゴリを挿入することも出来ますが、カテゴリの数が多すぎるとメニューの横幅が全体幅をはみ出してしまうので、メニューに表示したいカテゴリを自分で指定することをオススメします。

 自分で指定する場合はカテゴリのURLとカテゴリ名をコピーして貼り付けてください。

<li><a href="カテゴリのURL">カテゴリ名</a></li>

 カテゴリのURLは管理画面のカテゴリ一覧にある件数をクリックすると表示されるURLになります。ブログに表示されているカテゴリのプラグインのリンクからも確認できます。

 以下はニュースとスポーツのカテゴリをメニューに追加した場合の例です(カテゴリのURLはブログによって異なります。URLはご自分のブログで確認してください)。

<ul id="menu">
<li><a href="./">HOME</a></li>
<li><a href="blog-category-0.html">ニュース</a></li>
<li><a href="blog-category-1.html">スポーツ</a></li>

<li><a href="archives.html">記事一覧</a></li>
</ul>

※カテゴリの名前などを変更した場合はその都度テンプレートを修正する必要があります。

メニューの横幅を調整する

 横幅を固定している場合は[1]で追加したスタイルシートの以下の数値を増減させることで調整できます。

#menu li {
  font-size: 80%;
  float: left;
  width: 150px;
  height: 39px;
  overflow:hidden;
  text-align: center;
}

 「150」の数値を増やすと一つ一つの横幅が広がり、減らすと狭まります。数が多い時は数値を小さくしたり、表示するリンク名の文字数を減らして調整してください。

リスト・グリッド表示の切り替えスイッチを非表示にしている場合

 リスト・グリッド表示を固定化させて右上の切り替えスイッチを削除または非表示にしている場合は[1]で追加したスタイルシートにある「101」の数値を「0」に変更してください。

#menu {
  margin-right: 0px;

メニューの数が多くてウインドウを狭めた時に表示されない場合

 スタイルシートにある全体幅の最小幅を調整してください。数値はすべて同じ値だけ増やします。100増やす場合は次のようにします。100では足りない場合は200ずつ増やしてください。

#container { min-width: 900px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 900px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 902? "900px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
}

#header h1,
#header p {
  min-width: 885px;
  max-width: 1185px;
  width:expression(document.body.clientWidth < 902? "900px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
  margin: 0 auto;
}

※横幅を変更した時にexpressionの行を削除している場合は802と800の数値は無視しても構いません。

文字サイズなどの変更

 文字サイズは追加したスタイルシートにある「80%;」の数値を増減させて調整してください。

#menu li {
  font-size: 80%;

 カーソルが重なった時の色などは以下の部分で変更できます。

#menu a:hover {
  background: #99d3ee;
  border-color: #88c3dd;
  color: #ffffff;
}

 その他の色などは追加したスタイルシート内にある「#○○○○○○」の部分を適当に変更してください。

メニューの縦位置を調整する

 ヘッダーの下線の上にメニューの位置をずらす場合はheaderのmarginを「-40」から「-43」に、「#headermenu」を「body(半角スペース)#headermenu」としてheightを「39」から「42」に変更してください。両方とも同じ数値だけ増減させます。場所はCtrl+Fキーで『#header {』を検索。

#header {
  overflow: hidden;
  margin-bottom: -43px;
  padding: 20px 0 80px 0;
  text-align: left;
}
body #headermenu {
  height: 42px;
  margin: 0 auto;
}

 数値をマイナス側に減らすほどメニューが上に移動します。また、減らした数値だけ#headermenuのheightを増やしてください。

メニューのリンクに画像を使用する

 追加したメニューリンクの「<a href~>リンク名</a>」の部分を変更します。

テキストの前に画像を挿入

 例えばtwitterの文字の前にアイコンを入れる場合はテキスト部分の前にimg要素を挿入してください。アドレス部分は自分で用意した画像URLと差し替えます。

<li><a href="省略"><img src="http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic_white-twicon1b.png" alt="" /> twitter</a></li>

 そしてスタイルシートに以下のコードを追加してください。

#menu li img {vertical-align: middle; margin: 0 3px 0 0;}/* メニュー画像調整 */

 以上で完成です。アイコン画像は背景色が透明のgifかpngで作成すると違和感なく挿入できます。


 背景色も変更する場合はa要素に「class="menu1"」のようなクラスを追加して、

<li><a class="menu1" href="省略"><img src="省略" alt="" /> twitter</a></li>

 スタイルシートに以下のコードを加えて背景色を指定してください。「class="menu1"」を加えたメニューだけ色が変わります。2番目の#ffffffはカーソルが重なった時の色です。

#menu li .menu1 {background: #f9f9f9;}/* メニュー背景色1 */
#menu li .menu1:hover {background: #ffffff;}

 他のメニューで別の色を使用する時はa要素に「class="menu2"」を追加して、スタイルシートに以下のコードを加えて背景色を指定してください。「class="menu2"」を加えたメニューだけ灰色になります。

<li><a class="menu2" href="省略"><img src="省略" alt="" /> テキスト</a></li>

#menu li .menu2 {background: #eeeeee;}/* メニュー背景色2 */
#menu li .menu2:hover {background: #ffffff;}

 更に色を増やす場合は同様にして数値を増やしていきます。


リンク全体を画像にする

 リンク全体を画像にする場合はテキストを削除してimg要素を入れてください。アドレス部分は自分で用意した画像URLと差し替えます。

<li><a href="省略"><img src="http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic_white-twicon1.png" alt="" /></a></li>

 以上で完成です。画像のサイズは[1]で追加したスタイルシートの「width: 150px;」の数値-1が横幅、39pxが高さになります。初期状態の場合は横幅149px高さ39pxの画像を用意してください。画像がはみ出て崩れてしまう時は横幅と高さ「width="149" height="39"」をimg要素に追加してください。

<img src="省略" alt="" width="149" height="39" />


 imgではなく背景画像として表示する場合はメニューのa要素に「class="menu1"」のようなクラスを追加して、

<li><a class="menu1" href="URL">リンク名</a></li>

 スタイルシートに以下のコードを加えて背景画像を指定してください。アドレス部分は自分で用意した画像URLと差し替えます。

#menu li .menu1, #menu li .menu1:hover {/* メニュー画像調整 */
  text-indent: -500px; overflow: hidden;
  background: #e9faff url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/basic_white-twicon1.png) top center no-repeat;
}

 「#e9faff」の部分は透過部分の背景色です。必要に応じて変更・削除してください。白色にする場合は「#ffffff」にします。

 他のメニューで別の画像を使用する時はa要素に「class="menu2"」を追加して、スタイルシートに以下のコードを加えて背景画像を指定してください。

<li><a class="menu2" href="省略">テキスト</a></li>

#menu li .menu2, #menu li .menu2:hover {/* メニュー画像調整2 */
  text-indent: -500px; overflow: hidden;
  background: #e9faff url(別の画像アドレス) top center no-repeat;
}

 更に画像を増やす場合は同様にして数値を増やしていきます。

関連記事
スポンサー リンク
コメント
#225 : No title
ありがとうございます。非常に助かります。
このページがあるとは知らずに他ページにコメントしてしまい、申し訳ござませんでした^^;
#248 : No title
mayさん、こんにちは。

ヘッダーメニューの位置調整についてお尋ねさせていただきます。
ヘッダーメニューを引き上げて、ヘッダー背景のグレーの部分に重ならないようにするにはどうすればよいのでしょうか?
ちょうどmayさんのブログのような感じになります。
ご回答いただけると助かります。
よろしくお願いします。
#252 : Re248: ヘッダーメニューの位置
コンバンハ。
ヘッダー背景のグレーの部分というのはヘッダーの下線のことでしょうか?
それであればスタイルシートの「margin-bottom: -40px;」を「margin-bottom: -43px;」にすることでメニュー部分を上方に移動できます。
この記事に「メニューの縦位置を調整する」として方法を掲載いたしました。
#255 : No title
mayさん、ご回答ありがとうございます。
縦位置の調整ですがメニューを上に移動させると点線がヘッダーの背景に重なってしまうのですが、これを防ぐことはできませんでしょうか?
お手数おかけしまして申し訳ございません。
ご面倒であればお考えいただかなくても結構です。
#257 : Re255: 点線
コンバンハ。
「-43」に変更した部分のすぐ下にある「#headermenu」を「body #headermenu」に、「height: 39px;」の数値を「42」などに増やすとメイン部分が下がって点線がかからなくなるかと思います。
body #headermenu {
height: 42px;
margin: 0 auto;
}
#258 : No title
mayさん、再度のご回答ありがとうございます。
おかげで思い通りのレイアウトが実現できました。
重ね重ね感謝いたします。
#260 : No title
こんにちは。場違いな質問でしたらごめんなさい。
このメニューの場所に画像アイコンなどを使用し、並べたいと思うのですが、下にずれるなどしてどうもうまくいきません。どうしたらうまく並べられますでしょうか??;;
お忙しい中申し訳ありません。ご回答いただけたら幸いです。
#264 : Re260: 画像アイコン
コンバンハ。
このページにメニューのリンクに画像を使用する方法を追加しました。
画像をa要素の中に入れると崩れずに並べられるかと思います。
画像アイコンをメニューテキストの左に置いて「(画像)ツイッター」にのようにするのか、メニューのリンク全体を画像にするかなど具体的な説明があると助かります。
すべてのケースを想定するのは困難なため、ご了承くださいませ。
#271 : No title
自分のブログを作る上で大変参考になりました。
ありがとうございました。
#336 : No title
とても解りやすかったです。
#337 : ドロップダウン
こんにちは。
いつも参考にさせていただいております。
質問なのですが、ヘッダーメニューにドロップダウンを設置させる方法はありますでしょうか?
自力でやってみたのですが、上手くいきませんでした;;
忙しいとは思いますが、ご回答いただけましたら幸いです。よろしくお願いします。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered