FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

横メニューバーをブログタイトル下に表示する

グローバルナビゲーションとして、ブログタイトル下に横メニューバーを表示するカスタマイズを紹介します。

キイタ？オクサンアラヤダワァを運営するちゃんさんの「横メニューの設置」を参考にさせていただきました。

次の記述をHTMLに追加します。
赤い箇所は各自希望のURL、リンク名に変えてください。
ここでは例として７件のメニュー項目がありますが、希望にあわせて増減してください。

<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>

当サイトが提供する共有テンプレートの場合、上記記述を挿入する箇所は次のようになります。

【standardシリーズの場合】

～

<tr><td id="main_body">



<table style="margin: 1em; clear:left" border="0" cellspacing="0">
～

standardシリーズの場合、「; clear:left」も追加してください。

【lightframeシリーズの場合】

～
</div>




<div id="center-left">
<div id="center">

～

次にスタイルシートの末尾に次の記述を追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

色や大きさ等の各パラメータはお好みにあわせて設定してください。

lightframeシリーズの場合は、/* 上の間隔 */が0pxでも余計な間隔が出来てしまいます。
次の箇所も設定して調整してください。

#header_outline {
margin-bottom:20px; /* ヘッダ下間隔 */
}

【2009/08/13 追記】
メニューを幅一杯まで使おうとして崩れている方を時々見かけます。
IEだけでなく、Firefoxでも確認することを強く推奨します。

関連記事

[ 2009/03/29 11:48 ] カスタマイズ共通カスタマイズ | TB(4) | CM(219)

≪ 公式カテゴリ（カスタマイズ向け）のツリー化 | HOME | 角を丸くする (lightframeシリーズ) ≫

[ 3782 ]

トラバありがとうございました＾＾
今いたおさんタグを入れてみたらとてもおしゃれなメニューバーが

随分前にカスタマイズしたテンプレート(もちろんいたおさんテンプレです♪)に組み込んであったのでそれを記事にしたんですが、中央寄せ・テキストリンクのみなんでシンプル過ぎちゃいました

と言うか私自身に装飾するスキルが無く…(泣)

まだまだ要・勉強の初心者です(^^;)

[ 2009/03/29 13:24 ] [ 編集 ]

[ 3785 ]

どうもありがとうございました
ちゃんさんにも記事にしていただいたみたいで、迷惑をおかけしました

[ 2009/03/29 17:10 ] [ 編集 ]

[ 3786 ] > ちゃんさん、みやきんさん

私もちゃんさんから教わることは多いです。ちゃんさんのスキルは凄いですよ。
こちらこそトラバありがとうございました＾＾

みやきんさん、無事設置できたようですね。あとはリンクを好きなよう設定してください。

[ 2009/03/29 19:06 ] [ 編集 ]

[ 3788 ]

はい
どうもありがとうございました

[ 2009/03/29 19:44 ] [ 編集 ]

[ 3792 ]

初めまして。こちらのテンプレートを使用させて頂いているのですが
ひとつ質問させてもらいたいことがあります

プラグインの中の文字の行と行の間が近く少し見難い気がするのですが
この間を記事と同じくらいのものにするにはどうすればいいのでしょうか？

お忙しい中申し訳ありませんが、ご指導頂ければ幸いです。

[ 2009/03/30 09:38 ] [ 編集 ]

[ 3793 ] ▼tknbさん

こちらの方法で出来ます。

【記事の行間を変える】
http://10plate.blog44.fc2.com/blog-entry-135.html

記事本文への方法ですが、プラグインにも有効です。
(コメント欄参照)

[ 2009/03/30 11:49 ] [ 編集 ]

[ 3794 ]

返信ありがとうございました。無事に変更できました。
既存の記事を見落としてしまっていて申し訳ありません（汗）
お手数をおかけしました。今後もこのテンプレートを愛用させてもらいます。

[ 2009/03/30 14:58 ] [ 編集 ]

[ 3797 ] > ちゃんさん、tknbさん

ちゃんさん、いつもありがとうございます。
m(__)m

tknbさん、またなにか希望があったら教えてくださいね。

[ 2009/03/30 23:59 ] [ 編集 ]

[ 3807 ] > かどりんさん

設置のバランスが絶妙で素晴らしいですね。

かどりんさんのサイトを見れば横メニューを導入する方が増えそうです＾＾

[ 2009/03/31 22:03 ] [ 編集 ]

[ 3814 ]

どうも始めまして。
テンプレートをお借りしている者です。
いつも助かっています。いやホントに^^

質問なのですが、
この横メニューをページの中央に配置することは可能でしょうか。
可能でしたら教えていただけたら嬉しいです。

[ 2009/04/02 19:29 ] [ 編集 ]

[ 3816 ] > (´･ω･｀)さん

この記事を参考にすれば中央寄せも必要ないと思うのですが、どうでしょう。

横メニューバーを幅一杯に表示する
http://10plate.blog44.fc2.com/blog-entry-178.html

[ 2009/04/03 02:06 ] [ 編集 ]

[ 3833 ] ほしかったんです！メニューバー

そのまま貼り付けて
メニューバーをつくりました
ありがとうございます

勝手にリンクはりました
迷惑でしたらいってください
はずしますので＾＾

[ 2009/04/05 19:19 ] [ 編集 ]

[ 3834 ] > ASPさん

リンクありがとうございます＾＾
当サイトはリンクフリーなので遠慮なく好きなだけリンクしてください。

Firefoxでみるとメニューバーが折り返されているので、もう少し短くするとよいかもしれません。

よろしければこの記事も参考にしてください。

横メニューバーを幅一杯に表示する
http://10plate.blog44.fc2.com/blog-entry-178.html

[ 2009/04/05 19:53 ] [ 編集 ]

[ 3836 ] ありがとうございます

Firefoxでみると違うんですか＾＾；
ありがとうございます

早速「横メニューバーを幅一杯に表示する」を
やってみました
また、メニューボタンの幅も
74pxと2px減らしてみました

これからもよろしくお願いします

[ 2009/04/05 20:47 ] [ 編集 ]

[ 3838 ] > ASPさん

申しわけありません；
メニューボタンの幅を減らすのは逆効果でした
m(__)m

「飲料アルコール」という文言が横幅を取りすぎるために、このメニューボタンだけが折り返されてしまっていたのです。

メニューボタンの幅77pxに戻し、77pxに収まるように「飲料アルコール」の文言を小さくする必要があります。
(78pxにすると全体が長過ぎて折り返されてしまいます)

幅77pxに戻し「アルコール」を半角カナにしてみてください。
何度もすみませんm(__)m

[ 2009/04/05 21:52 ] [ 編集 ]

[ 3844 ] ありがとうございます

ご丁寧なご指導、感謝します
こちらこそ何度もありがとうございます

幅を77pxにして、アルコールを酒類に変更し
文字数を減らしてみました

ありがとうございますm(__)m

[ 2009/04/06 07:06 ] [ 編集 ]

[ 3850 ] > ASPさん

綺麗に表示されましたね＾＾
私の間違いでお手数かけてしまい申しわけありませんでした。

[ 2009/04/06 23:43 ] [ 編集 ]

[ 3866 ]

このテンプレート、いつも愛用させてもらってます。

この、メニューバーに外枠をつけたいのですが、どうすればいいですか？

[ 2009/04/08 23:56 ] [ 編集 ]

[ 3872 ] > uiryさん

後日記事にしたいと思います。
もうしばらくお待ちください。

[ 2009/04/09 02:37 ] [ 編集 ]

[ 3910 ]

すいません。質問です。
メニューバーのフォントの変更はどうすればいいですか？

[ 2009/04/14 18:55 ] [ 編集 ]

[ 3913 ] > あめだまさん

スタイルシートに一行追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
～
font-family: 'HGS教科書体' ;
}

こちらの記事も参考にしてください。
字体（フォント）を変える
http://10plate.blog44.fc2.com/blog-entry-68.html

[ 2009/04/15 02:00 ] [ 編集 ]

[ 3919 ]

ありがとうございました。
変更することができました＾＾

[ 2009/04/16 23:07 ] [ 編集 ]

[ 4371 ] はじめまして

こんにちは。

質問させてください。

たとえば、7件のメニューを設置したとします。
そのときに、背景をカラーでは無くて、画像にする方法を教えてほしいです。
さらに、この背景画像は、7件のメニューそれぞれ別の画像にしたいと思ってます。

これは、可能なのでしょうか？

[ 2009/05/21 21:30 ] [ 編集 ]

[ 4376 ] > KENさん

ロールオーバーでは無く、ただ画像の背景にしたいのでしょうか。であれば


<ul id="menu_bar">
<li style="background-image:url(背景画像URL)"><a href="～">～</a></li>
～

と、それぞれの<li>に赤い部分の背景画像指定をするとできます。

[ 2009/05/21 23:10 ] [ 編集 ]

[ 4392 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/05/22 22:20 ] [ 編集 ]

[ 4393 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/05/22 22:25 ] [ 編集 ]

[ 4666 ] お願いがあります

申し訳ないのですが
僕のブログに合うメニューバーを画像とか使って
作成していただけませんか？
できれば下のサイト様のような感じがいいです
ttp://xzzx.blog98.fc2.com/

気が向いたらでいいですので
よろしくお願いします

[ 2009/06/14 22:53 ] [ 編集 ]

[ 4668 ] > water7@管理人さん

私が作成しなくても沢山の素材が無料で配布されていますよ。メニューバーや素材等で検索して、お好みのものを選んでください。

あとはスタイルシートで背景画像を設定するだけです。

ul#menu_bar {
background-image: url("http://～"); /* 全体 */
}

#menu_bar li a {
background-image: url("http://～"); /* 各メニュー */
}

#menu_bar li a:hover {
background-image: url("http://～"); /* マウスが乗ったとき */
}

[ 2009/06/15 02:14 ] [ 編集 ]

[ 4688 ]

上の記述をどこに追加したらよいのでしょうか？？

すごく初歩的な質問ですいません、、、、
わからないことだらけなもんで、、、、、

[ 2009/06/19 22:39 ] [ 編集 ]

[ 4690 ] > Dr.Z@愛さん

コメント[4668]の記述ならば、スタイルシートの末尾に加えてください。

http://～
の部分は画像のURLにしてください。

上手くいかないようならURLを教えてくださいね。

[ 2009/06/20 00:17 ] [ 編集 ]

[ 4691 ]

あっ

すいません

勘違いをさせてしまいました、、、、

この記事の一番上のやつです、、、

すみません

[ 2009/06/20 10:36 ] [ 編集 ]

[ 4703 ]

メニューの上にマウスを乗せると更にルートが出てくるメニューの作り方を教えてください

perfectゲームラボさんみたいなやつです

[ 2009/06/21 19:55 ] [ 編集 ]

[ 4705 ] > Dr.Z@愛さん、YONEさん

> Dr.Z@愛さん
テンプレートは何をお使いですか？URLを教えてください。

> YONEさん
近日中に記事にするのでもう少しお待ちください。

[ 2009/06/22 00:49 ] [ 編集 ]

[ 4711 ]

返事遅れてすいません

これです

http://jokerz000.blog121.fc2.com/

[ 2009/06/23 22:16 ] [ 編集 ]

[ 4714 ] > Dr.Z@愛さん

それは私が作成したテンプレートではないので確かなことは解りませんが、HTMLの比較的上のほうに、いかのような箇所があるはずです。

</div>

<div id="container">

<div id="wrap">

<div id="primary">

<div id="main">

<div class="content">

このどれかの下に挿入すれば良いと思います。
もしいずれも上手くいかなければ、ユーザーフォーラムに問い合わせてみてください。

FC2ユーザーフォーラム
http://blog.fc2.com/forum/

[ 2009/06/24 01:56 ] [ 編集 ]

[ 4717 ]

いろいろと教えていただきありがとうございます

今後もわからないことがあると思うのでそのときはまた

よろしくお願いします

[ 2009/06/24 20:02 ] [ 編集 ]

[ 4718 ]

連米すいません

こんなふうになったんですが

TOP絵(?)の下が開いてるんですよ

ちゃんとスタイルシートの設定はしたんですが、、、、

[ 2009/06/24 21:26 ] [ 編集 ]

[ 4721 ] > Dr.Z@愛さん

ではスタイルシートの末尾に以下を加えてみてください。

#header {
margin-bottom:5px;
}

5pxの数値をいろいろ変えてみてください。

[ 2009/06/24 23:11 ] [ 編集 ]

[ 4727 ] こんにちは

少し前に、それぞれの設置ボタンの背景をカラーでは無くて画像にする方法を質問したKen改めKonです（＾＾；

実は、当時、この方法が出来なくて、諦めてたのですが、やはりやってみたく思い、再び書き込みさせていただきました。

私が目指したいメニューボタンの設置方法は下記のような感じです。

１、7つのボタンを設置します。
２、背景は、カラーでは無くて画像にしたい。
３、7つのうち1つだけを目立たせるために、別の背景にしたい。
４、ロールオーバーにしたい。

過去に質問させていただいた時にいただいた回答では、


<ul id="menu_bar">
<li style="background-image:url(背景画像URL)"><a href="～">～</a></li>
～

と、それぞれの<li>に部分を変更すればいいとのこと。
この際、スタイルシートの変更は不要なのでしょうか？

使用させていただいてるテンプレはlightframe_whiteです。
度々申し訳ありませんが、よろしくお願いします。

[ 2009/06/25 16:15 ] [ 編集 ]

[ 4728 ]

ありがとうございます

これで出来てますよね！！！？

[ 2009/06/25 21:25 ] [ 編集 ]

[ 4730 ] > Ｋonさん、Dr.Z@愛さん

> Ｋonさん
画像をロールオーバーさせるとなると、またちょっと変わってきます。記事にするのでもう少しお待ちください。

> Dr.Z@愛さん
出来ましたね＾＾

[ 2009/06/26 01:11 ] [ 編集 ]

[ 4736 ]

ありがとうございます！！！

[ 2009/06/28 10:25 ] [ 編集 ]

[ 4867 ]

standard_monotone
[standard_ver.08]
を使っています。

standardシリーズを参考にしてみて、メインボディの所を見たのですが、
<tr><td id="main_body">などの記述がありませんでした。
それとスタイルシートの方は末尾なので
/*********************************************************/
の下にペーストをするのでよろしいでしょうか？
返答お願いしますm(_ _)m

[ 2009/07/08 17:26 ] [ 編集 ]

[ 4871 ]

うまくできました！！

[ 2009/07/08 21:53 ] [ 編集 ]

[ 5612 ] 質問です

#header_outline {
margin-bottom:20px; /* ヘッダ下間隔 */
}

これはどこに記入するのですか？
よろしくお願いします。
lightframe_monotoneを使用しております。

[ 2009/08/24 12:00 ] [ 編集 ]

[ 5613 ] ＞haji540

スタイルシートに設定すれば可能です。メイン部分が

<ul id="menu_bar">
で、ご指摘の部分はスタイルシートですね

[ 2009/08/24 14:04 ] [ 編集 ]

[ 5614 ] ▼haji540さん

記入や設定をするのではありません。
スタイルシートに

#header_outline {
margin-bottom:20px; /* ヘッダ下間隔 */
}

と記載されている箇所がありますので、この赤文字の部分の数値を調整すると言う意味です。

[ 2009/08/24 14:15 ] [ 編集 ]

[ 5618 ] > haji540さん、通りすがりさん、ちゃんさん

> haji540さん
通りすがりさんやちゃんさんが教えてくれた通り、それはスタイルシートにあります。

> 通りすがりさん、ちゃんさん
フォローしてくれてありがとうございます m(__)m

[ 2009/08/24 19:02 ] [ 編集 ]

[ 5760 ]

横メニューバーにUPlpderをリンクさせたいのですが、どのようにすれば、うまくいきますか？
UPloder↓
http://ux.getuploader.com/pawerdamer6325_k_b@yahoo.co.jp/

[ 2009/09/02 14:24 ] [ 編集 ]

[ 5765 ] >ZEROさん

以下のような感じで横メニューに入れることは可能かと思えます。

<li><a href="http://ux.getuploader.com/pawerdamer6325_k_b@yahoo.co.jp/" target="_blank">UPlpder</a></li>

[ 2009/09/02 15:36 ] [ 編集 ]

[ 5786 ] > ZEROさん、通行人さん

> ZEROさん
通行人さんが教えてくれたタグをメニューバーの中に加えればできますよ。

> 通行人さん
ありがとうございます＾＾

[ 2009/09/02 20:30 ] [ 編集 ]

[ 5806 ]

出来ました！！
有り難うございます。

[ 2009/09/03 21:43 ] [ 編集 ]

[ 5808 ] > ZEROさん

解決して良かったです＾＾

[ 2009/09/03 22:27 ] [ 編集 ]

[ 5819 ]

トップの下ではなく、トップの画像を挟んでメニューバーを作る事は出来ないのですか？

[ 2009/09/04 15:30 ] [ 編集 ]

[ 5828 ] > ZEROさん

どのようにしたいのか例となるサイトはありますか？

[ 2009/09/04 20:52 ] [ 編集 ]

[ 5831 ]

http://yuiyahy009.blog24.fc2.com/blog-entry-191.html
↑このサイトですね。

[ 2009/09/04 22:57 ] [ 編集 ]

[ 5833 ] > ZEROさん

後日記事に掲載しますが、少し時間がかかるかもしれません。気を長くしてお待ちください。

[ 2009/09/04 23:23 ] [ 編集 ]

[ 5844 ]

分かりました。

[ 2009/09/05 09:18 ] [ 編集 ]

[ 5846 ] ▼ZEROさん

【裏技shop DD】
http://shopdd.blog51.fc2.com/
さんで紹介されています。

追記：
最近この方法で設置されているブログをいくつか見掛けましたが、裏技shopDDの管理人様に許可を頂いた上でソースをお借りしているようです。
紹介されているわけではありませんでした。
すみませんm(__)m

[ 2009/09/05 15:59 ] [ 編集 ]

[ 5857 ] > ZEROさん、ちゃんさん

> ZEROさん
私は見つけられなかったのですが、【裏技shop DD】さんが紹介しているそうなのでそちらに聞いてみてください。

> ちゃんさん
いつもありがとうございます＾＾

[ 2009/09/05 19:48 ] [ 編集 ]

[ 5985 ]

分かりました。
探してみたのですがどこら辺にありますか・・・？

[ 2009/09/11 11:54 ] [ 編集 ]

[ 5990 ] > ZEROさん

どうやらこのメニューを使っている人は、裏技shopDDの管理人様に許可を頂いた上でソースをお借りしているようです。

紹介されているわけではないようなので、直接裏技shopDDの管理人様に問い合わせてください。

[ 2009/09/11 18:54 ] [ 編集 ]

[ 5995 ]

了解です。
質問してみます。

[ 2009/09/11 22:40 ] [ 編集 ]

[ 5999 ] > ZEROさん

考案者のことを考えると安易に私が作成方法を公開する事もできないのでご了承ください。
m(__)m

[ 2009/09/12 00:01 ] [ 編集 ]

[ 6007 ]

いたおさんのテンプレートは使用していないのですが、質問させていただきます。申し訳ございません。
僕のブログにこのメニューを設置したところ、中央に表示されず、左側に寄って表示されてしまいます。
いろいろカスタマイズをしてみたのですが、やはり左側に表示されます。
解決法をご指導ください<(_ _)>

追記：メニューの位置は自分で変えたので、バグではありません。

[ 2009/09/12 13:30 ] [ 編集 ]

[ 6008 ] > shimさん

こちらの記事を参考にしてください。

メニューバーの中央寄せ
http://10plate.blog44.fc2.com/blog-entry-243.html

[ 2009/09/12 14:09 ] [ 編集 ]

[ 6009 ]

>ZENOさん
ヘッダーの上にメニューバーのHTMLを持っていってください。
さすがに裏技shop DDの管理人DDさんはやさしいですがメニューバーなど自作です。

[ 2009/09/12 14:52 ] [ 編集 ]

[ 6010 ]

こういう事ですか？
http://dragun00modification.blog58.fc2.com/

[ 2009/09/12 16:05 ] [ 編集 ]

[ 6012 ] [ 6008 ] > いたおさん

おかげ様で、中央に表示することができました＾＾
これからも、いたおさんの記事を参考にしたいと思います(´▽｀*)

[ 2009/09/12 16:26 ] [ 編集 ]

[ 6016 ] > Yuiyaさん、ZEROさん、shimさん

> Yuiyaさん、ZEROさん
例のメニューバーの設置にはある程度HTMLやCSSの知識がないと難しいかもしれません。

> shimさん
解決して良かったです＾＾

[ 2009/09/12 18:13 ] [ 編集 ]

[ 6020 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/09/12 20:39 ] [ 編集 ]

[ 6022 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/09/12 21:16 ] [ 編集 ]

[ 6033 ]

横メニューバーをヘッダの上に入れるとうまい具合にTOPのすぐ上に来たのですが、その下に入れたメニューバーはTOP画像から少し距離があります。
どのようにしたら縮められますか？

[ 2009/09/13 10:47 ] [ 編集 ]

[ 6036 ] > ZEROさん

スタイルシートの末尾に加えてください。

#header_outline {
margin-bottom:0px;
}

[ 2009/09/13 18:24 ] [ 編集 ]

[ 6039 ]

度々すみません。
TOP画像がやや左に寄っているのですが、中央の方に寄せれないでしょうか？

[ 2009/09/13 20:27 ] [ 編集 ]

[ 6041 ] > ZEROさん

スタイルシートの末尾に加えてください。

h1 {
text-align:left;
}

[ 2009/09/13 21:53 ] [ 編集 ]

[ 6058 ]

分かりました。

[ 2009/09/14 22:14 ] [ 編集 ]

[ 6333 ]

今回メニューバーの導入をしてみました。
GoogleChromeと、IEで見ると正常なのですが、なぜかFireFoxで見るとこうなってしまいます。
http://blog-imgs-26.fc2.com/p/s/p/pspdsurawaza/WS000000_20091003113052.jpg
どうすればFireFoxでも正常に表示されるのでしょうか？

[ 2009/10/03 11:32 ] [ 編集 ]

[ 6336 ]

>naomochiさん
確かにFireFoxだと一見駄目なように見えますが、ブラウザを一度閉じたりしてから見ると正常に表示されますよ。

[ 2009/10/03 16:09 ] [ 編集 ]

[ 6337 ]

出来ました！
ご回答有難う御座いましたm(_ _)m

[ 2009/10/03 18:31 ] [ 編集 ]

[ 6342 ] > naomochiさん、6336さん

> naomochiさん
解決して良かったです＾＾

> 6336さん
ありがとうございます＾＾

[ 2009/10/03 23:52 ] [ 編集 ]

[ 6587 ]

このブログと同じようにすることはできませんか？

[ 2009/10/21 18:01 ] [ 編集 ]

[ 6594 ] > ゴミ袋マンさん

ちょっとよく解らず申しわけないのですが、このブログの何と同じ様にしたいのでしょうか？

[ 2009/10/21 21:55 ] [ 編集 ]

[ 6663 ]

TOP画とメニューバーとの隙間を縮めることは可能でしょうか?

#header {
margin-bottom:5px;
}

これをスタイルシートの中に入れたんですが効果ないです・・・

[ 2009/10/26 16:14 ] [ 編集 ]

[ 6682 ] > キ～マン♂GOLDさん

#headerではなく、#header_outlineとしてください。

#header_outline {
margin-bottom:5px;
}

[ 2009/10/27 20:24 ] [ 編集 ]

[ 6714 ]

うまくできました!
ありがとうございます

[ 2009/10/29 21:45 ] [ 編集 ]

[ 6718 ] > キ～マン♂GOLDさん

うまく出来て良かったです＾＾

[ 2009/10/29 23:55 ] [ 編集 ]

[ 6733 ]

上の通りにHTMLを更新して確認すると、表示されません・・・

しかし、プレビュー表示ではきちんと表示されています。

横メニューバーだけでなくアクセス解析用HTMLタグのアイコンも同じような結果になっています・・・

どうすればいいのでしょうか？

[ 2009/10/31 07:34 ] [ 編集 ]

[ 6735 ]

いつもお世話になっています

上のメニューバーと下のタイトル画像の差を無くしたいのですが、
ul#menu_bar {
font-size: 85%; /* 文字サイズ */
height:40px; /* 高さ */
background-color: #FFA500; /* 背景色 */
padding-left: 0px;
margin-left:-1px;
margin-top: -2px; /* 上の間隔 */
margin-bottom :-1px; /* 下の間隔 */
}

の下の間隔というところをいじっても反応がありません。
上の間隔は反応します(なので下のメニューバーとタイトル画像の間には間隔がありません)

どうしたら上のメニューバーとの差がなくなるでしょうか?

よろしくお願いします

[ 2009/10/31 14:00 ] [ 編集 ]

[ 6738 ]

いつもご無沙汰しております。
私のサイトのメニューバーを変えたいのですがうまくいきません^^;

HTML　CSS　をどのように編集すればいいのか・・・

C:UsersayanoDownloadsindex.html

↑のメニューバーです。
説明不足であればご指摘いただければ追加分しますので。

いつも丁寧な回答、誠に有難うございます。

[ 2009/10/31 18:44 ] [ 編集 ]

[ 6743 ] > AquaTimez0224さん、tomoさん、東城＠さん

> AquaTimez0224さん
カスタマイズしたテンプレートと実装しているテンプレートが同じものか確認してください。

> tomoさん
tableの内側にあるjavascript群を外側に出してみてください。念のためバックアップをとってカスタマイズしてください。

> 東城＠さん
理解が悪く申しわけありません。これは何でしょうか？URLでもなさそうですが・・・東城＠さんのCドライブにあるファイルなのでしょうか？
C:UsersayanoDownloadsindex.html

[ 2009/11/01 00:34 ] [ 編集 ]

[ 6749 ]

あ～　すみません　URL間違ってますｗｗ

いたおさんの仰るとうり、Cドライブのファイルです。

このメニューバーです＾＾；↓

http://loda.jp/toujyou117/?id=14

[ 2009/11/01 13:40 ] [ 編集 ]

[ 6751 ]

前よりましになった気がします
少しあいている気がしますが気にしないことにしました

丁寧な回答ありがとうございました

[ 2009/11/01 19:02 ] [ 編集 ]

[ 6755 ]

あのー質問ですがどうやってメニューバーを区切れるんですか
↓のメニューバーのように
http://pspthemes86.blog72.fc2.com/
勝手に公開しちゃっていいのかな？

[ 2009/11/02 21:04 ] [ 編集 ]

[ 6759 ] > 東城＠さん、tomoさん、夜露死苦さん

> 東城＠さん
レンタルアップローダーのメニューバーを変えたいのですか？
それともブログのメニューバーをアップローダーのメニューバーのように変えたいということでしょうか。

> tomoさん
tableにcellpadding="0"を設定してみてはどうでしょうか。

<table class="base_table" summary="outline" border="0" cellspacing="0" cellpadding="0">

> 夜露死苦さん
スタイルシートの末尾にこれを加えてください。

#menu_bar li a {
border-right:5px solid #ffffff; /* 区切り線 */
}

5pxという数値を増やせば区切り線が太くなります。

参考に見せてくれたメニューバーのように画像にしたければ、こちらの記事を参考にしてください。

メニューバーの画像ロールオーバー
http://10plate.blog44.fc2.com/blog-entry-231.html

[ 2009/11/02 23:05 ] [ 編集 ]

[ 6766 ]

あ～　すみません＾＾；
ホントは、あのURLに変更したいバーをアップしてたんですけど
無理なのかなーって思っちゃって消しちゃいましたｗ

再アップします。
http://loda.jp/toujyou117/?id=15

[ 2009/11/03 10:32 ] [ 編集 ]

[ 6767 ]

メニューバーの画像ロールオーバー
とても難しいです＞＜
画像編集ツール等を使って１つの画像って所でもう．．．

[ 2009/11/03 10:36 ] [ 編集 ]

[ 6774 ] > 東城＠さん、夜露死苦さん

> 東城＠さん
画像であるblack.jpgとblue.jpgをアップロードし、スタイルシートの画像URLをアップロード先URLにあわせると上手くいくと思います。

> 夜露死苦さん
画像を使うのが難しければ、スタイルシートで区切り線を太くしたほうが良いかもしれません。

[ 2009/11/03 20:12 ] [ 編集 ]

[ 6777 ]

区切り線太くしたらロールオーバーしなくていいのですか？

[ 2009/11/03 22:05 ] [ 編集 ]

[ 6784 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/11/04 09:00 ] [ 編集 ]

[ 6786 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/11/04 09:58 ] [ 編集 ]

[ 6789 ]

これをタイトルの下と上にするにはどうすれば良いでしょうか?

[ 2009/11/04 19:06 ] [ 編集 ]

[ 6794 ] > 夜露死苦さん、wetさん

> 夜露死苦さん
画像を使わないのであればロールオーバーは気にしなくていいです。

> wetさん
タイトルの下は記事の通りですが、タイトルの上には<h1>の上に挿入してください。

[ 2009/11/04 23:47 ] [ 編集 ]

[ 6797 ]

あのー気付いてないかも知れませんが
非表示コメ見てください
お願いします。

[ 2009/11/05 07:50 ] [ 編集 ]

[ 6805 ] > 夜露死苦さん

非表示コメ見ました。さすがにアカウントに直接入ってカスタマイズするほど手が回らないので、ご自分でお願い致します。

[ 2009/11/05 23:13 ] [ 編集 ]

[ 6813 ]

やっぱりカスタマイズは自分でします。
すみません

[ 2009/11/06 14:57 ] [ 編集 ]

[ 6818 ] > 夜露死苦さん

お役に立てず申しわけありません m(__)m

[ 2009/11/06 23:06 ] [ 編集 ]

[ 6821 ]

横メニューの項目上にマウスを置く事で画像を切り替えるにはどうすればいいのでしょうか？

一応これを加えたりしているのですが・・・
<script type="text/javascript"></script>

それとロールオーバーの意味を教えていただけませんか？

よろしくお願いします。

[ 2009/11/07 06:27 ] [ 編集 ]

[ 6825 ] いたおさん

うまく表示できました!!
誠にありがとうございます　m(_ _)m

[ 2009/11/07 11:08 ] [ 編集 ]

[ 6842 ] > AquaTimez0224さん、東城@さん

> AquaTimez0224さん
メニューにマウスを置く事でタイトルの背景画像を変えたいのでしょうか？それであればこちらの記事を参考にしてください。

メニューをマウスオーバーするとタイトル背景が変わる
http://10plate.blog44.fc2.com/blog-entry-245.html

ロールオーバーとはマウスを乗せるとその画像が変わることです。詳しくはGoogleで調べてください。

> 東城@さん
解決して良かったです＾＾

[ 2009/11/08 21:46 ] [ 編集 ]

[ 7057 ]

いたお様
たびたび申し訳ありません。２点ほど質問があるため、また越させていただきました。

・ブログのメニューバーを選択した際、プラグイン部とドロップ部分とで1ピクセルほど差が生じてしまう。
・メニューバー上の検索フォーム、縦位置での中央揃え

お忙しいところ恐縮ですが、どうかご教授くださいますようお願い致します。

ろーえんど

[ 2009/11/19 23:47 ] [ 編集 ]

[ 7064 ] > ろーえんどさん

１つ目の質問内容が解らず申しわけないのですが、メニューバーの検索フォームは<li>の内側を<div>で囲んでみてください。

<li><div style="margin-top:1px">～</div></li>

margin-topの数値を変えて調整してください。マイナスも設定できます。

[ 2009/11/20 23:27 ] [ 編集 ]

[ 7069 ]

いたお様
http://file.blog.2-dmnios.eu/GW-00069.jpg
赤丸で囲った部分の事です。
当方の言葉足らずでご迷惑を掛けてしまい、誠に申し訳ありません。
もう一度ご教授くださいますようお願い致します。

[ 2009/11/21 01:01 ] [ 編集 ]

[ 7070 ]

マウスをのせたとき、
文字を太字にすることはできますか？

[ 2009/11/21 09:12 ] [ 編集 ]

[ 7072 ]

解決しました。すいません

[ 2009/11/21 12:00 ] [ 編集 ]

[ 7081 ] > ろーえんどさん、らいさん

> ろーえんどさん
スタイルシートの末尾にこれを加えてみてください。

#center-left {
width:1002px;
}

あとスタイルシートの中に余計なとじかっこがあります。不具合のもとなのでこれを削除してください。

/* 第２階層の幅 */
#menu_bar li li a {
text-align:left;
font-size: 90%; /* 文字サイズ */
width:230px;
line-height:30px; /* 高さ */

padding-left:10px;
}
}

> らいさん
自己解決されて良かったです＾＾

[ 2009/11/21 22:55 ] [ 編集 ]

[ 7196 ]

メニューバーを表示させることはできました。
FireFoxではちゃんと表示しましたが、Operaでは箇条書きのようになってしまいます。どうすればいいでしょうか？

[ 2009/11/28 00:18 ] [ 編集 ]

[ 7205 ] > haji540さん

私の環境(Mac)のOperaで見ると正常に見えますが、haji540さんの環境では箇条書きに見えるのでしょうか？また、このサイトのメニューバーも箇条書きのように見えますか？
できれば画面をキャプチャして見せてもらえると助かります。

[ 2009/11/28 21:26 ] [ 編集 ]

[ 7209 ]

なぜだか正常に表示されるようになりました・・・

迷惑かけて申し訳ございませんでした。。。

お返事有り難うございました。

[ 2009/11/28 22:04 ] [ 編集 ]

[ 7212 ] > haji540さん

何故解決されたのか謎ですが、とりあえず良かったです＾＾；

[ 2009/11/28 23:06 ] [ 編集 ]

[ 7485 ] 隙間・・・

現在、メニューバーを設置しています。
それで、ヘッダーとメニューバーをピッタリくっつけたいのですが、上手くいきません。
なぜでしょうか？

[ 2009/12/22 01:02 ] [ 編集 ]

[ 7496 ] > ROXASさん

テンプレートのバックアップをとってから
から
まで
を削除してみてください。

[ 2009/12/23 20:34 ] [ 編集 ]

[ 7582 ]

プレビューで確認すると正常ですが、
更新して実際に見ると箇条書きのようになってしまいます。
どうすればいいでしょうか

[ 2009/12/30 17:17 ] [ 編集 ]

[ 7583 ]

>>ちょいさん
F5キーを押して最新の状態に更新してください。

[ 2009/12/30 17:51 ] [ 編集 ]

[ 7588 ]

ダメです。
から
まで
消しても、メニューバーのヘッダーの間に隙間ができてしまします。

[ 2009/12/30 23:26 ] [ 編集 ]

[ 7590 ]

メニューバーでJavaScriptを使うにはどうしたらいいでしょうか？

▼参考サイト様▼

http://raypclife.blog89.fc2.com/

[ 2009/12/31 00:15 ] [ 編集 ]

[ 7593 ] > ちょいさん、tskillさん、ROXASさん

> ちょいさん
tskillさんが教えてくれたように更新してみてください。そしてプレビューで見ているものと実際に見ているものが同一のテンプレートであるか確認してみてください。

> tskillさん
いつもありがとうございます＾＾

> ROXASさん
申しわけありません。私もこのしくみが解らないので直接参考サイト様に聞いてみてください。

[ 2009/12/31 00:26 ] [ 編集 ]

[ 7608 ]

横メニューバーをブログタイトル上に表示する方法はありますか？

[ 2009/12/31 17:31 ] [ 編集 ]

[ 7609 ]

>>ZEROさん

の上に設置して下さい。

[ 2009/12/31 18:21 ] [ 編集 ]

[ 7616 ] > ZEROさん、tskillさん

> ZEROさん
tskillさんが教えてくれた位置に設置してください。

> tskillさん
いつもありがとうございます＾＾

[ 2009/12/31 23:27 ] [ 編集 ]

[ 7626 ]

tskillさん　いたおさん　ありがとうございます。

[ 2010/01/01 16:07 ] [ 編集 ]

[ 7627 ]

でも下にすでに追加している場合　HTMlやCSSはどうすればいいんですか？

[ 2010/01/01 16:14 ] [ 編集 ]

[ 7633 ] > ZEROさん

CSSはそのままで、HTMLだけtskillさんが教えてくれた位置に設置してみてください。

[ 2010/01/01 23:09 ] [ 編集 ]

[ 7640 ]

できました。

ありがとうございます。

[ 2010/01/02 11:49 ] [ 編集 ]

[ 7649 ] > ZEROさん

解決して良かったです＾＾

[ 2010/01/02 23:11 ] [ 編集 ]

[ 7694 ]

タイトル画像とメニューバーの間に白い幅ができてしまいます。
どうすればいいでしょうか？

[ 2010/01/04 17:56 ] [ 編集 ]

[ 7699 ] > ROXASさん

私の環境(Mac,Firefox)では隙間が見えないですが他の環境ではそれが見えるのでしょうか。現在IEを確認できないので、もしIEが問題なら申しわけありませんがユーザーフォーラムに聞いてみてください。

http://10plate.blog44.fc2.com/#info1

[ 2010/01/04 22:36 ] [ 編集 ]

[ 7703 ]

>>いたおさん
http://www.naga-blog.com/archives/2007/12/261801.phpとかなかなか興味深い記事を見つけました。

[ 2010/01/04 22:59 ] [ 編集 ]

[ 7713 ] > tskillさん

ありがとうございます＾＾
でも私の動かなくなったWindows環境というのは、まさにその記事にあるようにMac上のエミュレーターなんです；
Macのスペックが限界なので・・・早く新しい新しいMacが欲しいです＾＾；

[ 2010/01/05 23:49 ] [ 編集 ]

[ 7738 ]

この記事通りに、タイトル画像とメニューバーとの間に隙間が出ないようにしてみたのですが、どうしても隙間ができてしまいます。

使っているテンプレはlightflameです。

時間がありましたら、何かアドバイスをお願いしますo(_ _)o

[ 2010/01/07 00:30 ] [ 編集 ]

[ 7746 ]

>>ルートさん

下の部分のCSSの赤文字の部分を変えてみてください

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#ｆｆｆｆｆｆ; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:-3px; /* 上の間隔 */
margin-bottom:8px; /* 下の間隔 */
}

margin-topの数字をマイナス数値にすることで隙間が無くなると思います。
数字の値は隙間に応じて変えてみてください。

これで駄目な場合はいたおさんからのアドバイスをお待ちください。

>>いたおさん

勝手に答えてすいません
間違っていたらコメントの削除、もしくは指摘をお願い致します。

[ 2010/01/07 15:33 ] [ 編集 ]

[ 7749 ]

＞ＴＯＭＯさん

あなたのコメントを見て、やってみたら無事できました。
ありがとでした。

[ 2010/01/07 20:17 ] [ 編集 ]

[ 7750 ]

＞ＴＯＭＯさん

すみません。上記の方法でやると、ＩＥの表示は直るのですが、Firefoxで崩れてしまいます。

[ 2010/01/07 20:32 ] [ 編集 ]

[ 7751 ]

>>ROXASさん

Firefoxで見たのですがどこが崩れていますか?
正常に表示されているように見えるのですが・・・・・

[ 2010/01/07 20:50 ] [ 編集 ]

[ 7752 ]

＞ＴＯＭＯさん

崩れているので直しました。

症状画像↓
http://blog-imgs-34.fc2.com/l/o/v/lovecon845/201001072055234fe.jpg

[ 2010/01/07 20:55 ] [ 編集 ]

[ 7753 ]

>>tomoさん

アドバイスありがとうございます！無事に修正できました！
本当にありがとうございましたm（*_ _）m

[ 2010/01/07 21:28 ] [ 編集 ]

[ 7755 ]

>>ROXASさん

すいません・・・原因がわかりません
いたおさんのアドバイスをお待ちください
お役にたてず申し訳ありません

[ 2010/01/07 21:44 ] [ 編集 ]

[ 7756 ]

>>ルートさん

解決してよかったです^^

[ 2010/01/07 21:45 ] [ 編集 ]

[ 7763 ] > ルートさん、tomoさん、ROXASさん

> ルートさん
tomoさんのおかげで解決できたようですね。良かったです＾＾

> tomoさん
助けてくれてありがとうございます。tomoさんのブログのカスタマイズは素晴らしいですね＾＾

> ROXASさん
tomoさんのおかげで解決できたようですね。良かったです＾＾
Firefoxの崩れもないようです。これは自己解決されたのでしょうか。

[ 2010/01/07 23:45 ] [ 編集 ]

[ 7776 ]

>>いたおさん
お褒め頂き光栄です。
いつもいたおさんのブログを見てカスタマイズさせて頂いています。
これからもよろしくお願い致します。

[ 2010/01/08 18:53 ] [ 編集 ]

[ 7778 ]

http://js.crap.jp/tabbed.html

上記のサイトのメニューバーを設置したいです。
設置したい場所は「管理人オススメＲＳＳ」の上です。

[ 2010/01/08 22:11 ] [ 編集 ]

[ 7786 ] > tomoさん、ROXASさん

> tomoさん
こちらこそテンプレートを使ってくれてありがとうございます＾＾

> ROXASさん
HTMLに

という箇所があるはずです。
その上に挿入してください。

[ 2010/01/08 23:48 ] [ 編集 ]

[ 7791 ]

初投稿で突然失礼します。
私もROXASさんの使ってるようなメニューバーを使いたいのですが、使い方がよくわかりません。

http://js.crap.jp/tabbed.html
↑のinfomationから「～.js」というファイルをダウンロードして、fc2のファイルアップロードにアップロードしてからJavaScriptの
<script type="text/javascript" src="～.js"></script>
にURLを貼り付けます。
そしてJavaScriptとbodyとCSS

の上に張りつけてみると
http://gamekatuyouzyouhou.blog119.fc2.com/
↑のように動きが無いうえにテンプレがひどく崩れてしまうのですが・・・・
何かやり方を間違っているのでしょうか？

文章がめちゃくちゃでわかりづらいと思いますが、何かアドバイスがあったら教えていただけるとありがたいです。

[ 2010/01/09 13:26 ] [ 編集 ]

[ 7792 ] >くろねこさん

オレも、そのようになってしまいます。

[ 2010/01/09 16:15 ] [ 編集 ]

[ 7798 ] > くろねこさん、ROXASさん

> くろねこさん、ROXASさん
私も試してみたところ崩れはしないけど動きませんでした。
でもそのHTMLを加えた下に、更にこれを加えると動きました。

<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>

[ 2010/01/09 22:26 ] [ 編集 ]

[ 7801 ]

>>いたおさん
テンプレが崩れたのは自分のミスだったようです。すみませんでしたm(_ _)m

無事に動かすことが出来ました！
本当にありがとうございました＾＾

[ 2010/01/09 23:02 ] [ 編集 ]

[ 7803 ]

またもやすみません。
動かすことは動かせたのですが
<script type="text/javascript" src="～.js"></script>
～.jsを追加するとやはりテンプレが崩れてしまいます。
http://gamekatuyouzyouhou.blog119.fc2.com/
何が原因なのでしょうか？
本当に申し訳ありませんがご教示願います。

[ 2010/01/09 23:14 ] [ 編集 ]

[ 7805 ] > くろねこさん

javascriptを加えると崩れるということは、他のjavascriptと競合して不具合を起こしている可能性があります。

くろねこさんはjavascriptを利用したプラグインを多用しているようなので、これらを非表示にしてみてください。

表示が崩れる原因の調査手順
http://10plate.blog44.fc2.com/blog-entry-274.html

[ 2010/01/09 23:40 ] [ 編集 ]

[ 7807 ]

>>いたおさん

いろいろご迷惑をかけて済みませんでした。
今度こそ大丈夫です！
本当に、本当にありがとうございました。

[ 2010/01/09 23:45 ] [ 編集 ]

[ 7816 ] > くろねこさん

解決して良かったです＾＾

[ 2010/01/10 21:57 ] [ 編集 ]

[ 7924 ] なぜ？

なぜか入れるとたて長になります。
どうすればいいでしょう？

[ 2010/01/18 18:35 ] [ 編集 ]

[ 7932 ] > HASEさん

現状を見ないとはっきりしたことは解りませんが、スタイルシートが正しく設定できていない可能性があります。

[ 2010/01/18 23:17 ] [ 編集 ]

[ 7942 ] HASEさんへ

HASEさん、もう一度スタイルシートの末尾に上記のタグを
置いているか確認して下さい。多分入ってないのかも?
試しに置かないでしてみますと、
こちらで同じ現象を確認致しました。
参考程度に。

[ 2010/01/19 15:44 ] [ 編集 ]

[ 7949 ] > モグさん

確認してくれてありがとうございます＾＾
やはりスタイルシートがあやしいようですね。

[ 2010/01/20 00:09 ] [ 編集 ]

[ 7964 ]

スタイルシートの末尾ってどこですか

[ 2010/01/20 18:33 ] [ 編集 ]

[ 7967 ]

テンプレートの設定→○○○(※テンプレート名)のスタイルシート編集

スクロールして行の一番下が末尾です。

[ 2010/01/20 20:59 ] [ 編集 ]

[ 7972 ] > HASEさん、ちゃんさん

> HASEさん
ちゃんさんが教えてくれたように管理画面からリンクを辿ってください。

FC2が公式マニュアルを用意してくれているので一度目を通すと良いかもしれません。

FC2ブログ公式マニュアル
http://fc2blogmanual.blog60.fc2.com/

> ちゃんさん
いつもありがとうございます＾＾

[ 2010/01/20 23:38 ] [ 編集 ]

[ 8086 ]

すみません、メニューに枠を付けるにはどうすればいいですか？

[ 2010/01/29 00:38 ] [ 編集 ]

[ 8087 ]

すみません、自己解決できました。

と言っても、このサイト様のお陰です。

ありがとうございます(>_<)

[ 2010/01/29 01:05 ] [ 編集 ]

[ 8099 ] > アズナブルさん

自己解決して良かったです＾＾

[ 2010/01/29 23:57 ] [ 編集 ]

[ 8122 ]

リストマークがついてしまいます。
横メニューバーだけリストマークを消す方法を教えてください＞＜

[ 2010/01/31 00:26 ] [ 編集 ]

[ 8128 ] > なおさん

スタイルシートの末尾にこれを加えてみてください。

ul#menu_bar { list-style-image:none; }

[ 2010/01/31 01:00 ] [ 編集 ]

[ 8158 ]

皆さんのブログはメニューバーがとてもかっこいいです。

かっこよくカスタマイズできるところのURLを教えてくれませんか？

[ 2010/02/01 20:01 ] [ 編集 ]

[ 8160 ] tyipeさんへ

CSS Tab Designer
と言うのがあります。

http://www.highdots.com/css-tab-designer/

[ 2010/02/01 20:33 ] [ 編集 ]

[ 8161 ]

sakuraiさん　ありがとうございます

いたおさん迷惑かけました

[ 2010/02/01 22:28 ] [ 編集 ]

[ 8169 ] > tyipeさん、sakuraiさん

> tyipeさん
sakuraiさんが役立つ情報を教えてくれて助かりましたね＾＾

> sakuraiさん
いつもありがとうございます＾＾

[ 2010/02/02 01:12 ] [ 編集 ]

[ 8183 ]

字数を入れすぎたら改行してしまうんですけど、対策方法ありますか？

[ 2010/02/02 22:36 ] [ 編集 ]

[ 8184 ]

>>bさん
一つ一つのメニューバーの幅を広くとるか、文字サイズを小さくしてはいかがでしょうか？
<span style="font-size:80%;">改行してしまう部分又はメニューバー全体</span>

[ 2010/02/02 23:03 ] [ 編集 ]

[ 8186 ]

返信ありがとうございます
幅ってどこを変えればいいいですか？？

[ 2010/02/02 23:09 ] [ 編集 ]

[ 8188 ]

>>bさん
記事中に書いてあるスタイルシート中にありますよ。
width:100px; /* １つのメニューボタンの幅 */
と書いてあるので、その赤字部分を修正してください。

[ 2010/02/02 23:14 ] [ 編集 ]

[ 8195 ] > bさん、tskillさん

> bさん
tskillさんが教えてくれた数値を増やしてみてください。

> tskillさん
いつもありがとうございます＾＾

[ 2010/02/03 00:36 ] [ 編集 ]

[ 8226 ]

sakuraiさんが[ 8160 ]で答えてくれたCSS Tab Designerは、

日本語対応していません。

なので、違うやつでカスタマイズできる方法を教えてくれると嬉しいです

[ 2010/02/04 23:01 ] [ 編集 ]

[ 8230 ] > tyipeさん

「css デザインメニュー」でGoogle検索すると沢山ありますよ。

http://www.google.co.jp/search?hl=ja&source=hp&q=css+%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC&lr=&aq=2&oq=css+%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3

[ 2010/02/05 00:36 ] [ 編集 ]

[ 8236 ]

いたおさん

ありがとうございます

[ 2010/02/05 20:47 ] [ 編集 ]

[ 8241 ]

メニューバーのドロップダウンなんですが、左側の区切り線が何故か消えています。
http://blog-imgs-43.fc2.com/k/h/r/khroxas156/20100206002639cb1.jpg

[ 2010/02/06 00:27 ] [ 編集 ]

[ 8246 ] > tyipeさん、ROXASさん

> tyipeさん
何か分らないことがあればGoogleで検索するのが一番です＾＾

> ROXASさん
左の区切り線がないのは仕様なのですが、必要であればこれをスタイルシートの末尾に加えてみてください。

#menu_bar li li a,
#menu_bar li li li a {
border-left:1px solid #ffffff; /* 区切り線 */
}

[ 2010/02/06 02:25 ] [ 編集 ]

[ 8283 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2010/02/08 22:00 ] [ 編集 ]

[ 8396 ] ヘッダの固定表示

度重なる質問で恐縮です。
メニューバーを常時表示したくていろいろ検索してみたのですが、
GridView云々等々で私には高度すぎてよく理解できませんでした。
そもそもFC2で固定表示は可能なのでしょうか？
可能であれば是非ともご指南いただきたく存じます。

[ 2010/02/14 11:49 ] [ 編集 ]

[ 8402 ]

>>縁風呂さん
固定表示は可能なはずですよ。常時表示されないのであれば、ブロック変数によって囲まれている可能性があります。ブロック変数については、FC2変数を参考にしてください。
http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html

[ 2010/02/14 18:27 ] [ 編集 ]

[ 8411 ]

>>tskillさん
ご返答ありがとうございます。
固定表示可能ですか！　がんばれば出来るかもしれないんですね。
ただ今の私では理解が及ばないので自力では難しそうです。
なので現状ではまだHTMLの変数なども弄っておりません。

こちらのサイト様のようにヘッダ固定表示できれば夢が広がります。
【CSS HappyLife】 http://css-happylife.com/

是非とも固定表示したいので、もうすこし自分でも勉強してみます

[ 2010/02/14 21:07 ] [ 編集 ]

[ 8420 ]

>>緑風呂さん
固定表示したい部分を下記で囲ってください。
<div id="kotei-sample">～</div>
そして、スタイルシートに下記を加えてください。
#kotei-sample {
position: absolute;
position: fixed !important;
top: 0;
z-index: 9999;
}
上記のみだと、IE6以下に対応していないので、http://blog.webcreativepark.net/2007/09/29-010711.html
こちらのものを設置してください。

あと、<meta name="keywords" ～ />に<strong>と</strong>は意味がなかったと思います。

[ 2010/02/15 14:31 ] [ 編集 ]

[ 8423 ]

>>tskillさん
SSから辿られたのですねｗ……あんなブログでなんともお恥ずかしい^^；

テーブル変数指定？　や、<div>で括る範囲によっては崩れまくったりで
すったもんだいたしましたがおかげさまで無事固定することが出来ました。
本当にありがとうございます。

しかし、予想はしていまいたが、ドロップダウン部分も固定され
画面外のドロップダウンメニューを選択できなくなりました　orz

http://10plate.blog44.fc2.com/blog-entry-230.html#comment8395
やはりこの問題解決は私にとって必須のようです。
現在は編集したテンプレートを別名で保存し、固定でないものを使用しています。

Fixed positioningはリンク先のmoduleを全コピペしてjs変換後外部ファイル化まで
したのですが、あっているのかあまり自信が無いのと、<script>をどこに挿入すべきか
よく解らないのでとりあえず保留にしています。

IE6は固定表示に対応してなくとも、表示が崩れないのであれば妥協しようかと思います。
ただ、私のブラウザは火狐3.5とIE7なので確認できないというジレンマが……

しかしこれでまた一歩前進出来ました。まことにありがとうございました。

※meta部分はご指摘で修正いたしました。m(_ _)m

[ 2010/02/15 18:08 ] [ 編集 ]

[ 8424 ] 縁風呂さん

WinXP以上ならIEtesterというソフトでIE5.5～IE8まで確認できるソフトありますよ。

http://yassee.blog38.fc2.com/blog-entry-493.html

うちはIE5.5とIE7がないのでこれで見てます。IE6はダダっ子なのでわざとバージョンアップしないでいます。別マシンはIE7からIE8にしちゃいました。IE7は遅いから。

クロスブラウザ環境を目指すならこのソフト必須です、ちと不安定なんですが。

IE5.5で自分のブログみると驚愕する場合もあります(苦笑)。私はこれでIE5.5まで面倒みるハメに。

[ 2010/02/15 18:44 ] [ 編集 ]

[ 8425 ]

>>やっすぃぃぃーさん
耳寄りな情報ありがとうございます。
さっそくダウンロードして、いろいろ試してみようとみようと思います。

私は火狐がメインですが、さきほどtskillさんのブログを拝見して、operaに浮気しようかと考え中です。

ちなみに間違えて寄付しそうになったのは内緒です。

[ 2010/02/15 19:04 ] [ 編集 ]

[ 8426 ] 縁風呂さん

私もFirefoxがメインですよ(^^)。

でも最近のお気に入りは Google Chrome です。
爆速ですばらしい・・Developer Toolsが高機能でまだ使いこなせてませんが、なかなか奥が深い。

OperaやSafariは・・・ユーザー数少ないので後回しです（笑）

[ 2010/02/15 19:12 ] [ 編集 ]

[ 8427 ]

>>縁風呂さん,やっすぃぃぃーさん
http://firefox.geckodev.org/index.php?User%20Agent%E3%83%AA%E3%82%B9%E3%83%88
こんなのもありますよ。

[ 2010/02/15 19:40 ] [ 編集 ]

[ 8428 ]

>>tskillさん
へぇ、こんなプラグインもあるんですね。
ちょっと私には難しくて使いこなせなさそうです^^；

ともあれ少し雑談めいてまいりましたので、恐縮ですが軌道修正させていただきます。
固定化したHTMLでのIE6のページ表示ですが、やすぃぃぃーさんからご紹介
いただいたIEtesterで確認したところ、崩れなく無事に表示されていました。

お二方ともに、ご教授いただき誠にありがとうございました。

[ 2010/02/15 21:19 ] [ 編集 ]

[ 8442 ]

テンプレ：standard を使わしていただいています

横メニューを下ではなく、上に設置したいのですが、どうしたらいいですか？

[ 2010/02/17 20:13 ] [ 編集 ]

[ 8445 ] [ 8442 ]レオタさんへ

ヘッダーの上にメニューバーのHTMLを持っていってください。

記事「横メニューバーをブログタイトル下に表示する」
http://10plate.blog44.fc2.com/blog-entry-176.html
のコメントにも書いてあります。

[ 2010/02/18 07:44 ] [ 編集 ]

[ 8500 ]

自分のブログなんですけど、http://pspgathikaizou.blog83.fc2.com/
このようにメニューバーが折り返しになるんですけど・・・
どうすればいいですか？

[ 2010/02/20 23:26 ] [ 編集 ]

[ 8501 ] [ 8500 ]HASEさんへ

width:175px; /* １つのメニューボタンの幅 */
です。これが５個ですから175×5＝875全体の幅が1000ですので、６個目からは二行目にはみ出てしまいます。
なので、1000の中に７個納めたいなら、1000÷7＝約142以内に１つのメニューボタンの幅を納めればいいはずです。

[ 2010/02/20 23:38 ] [ 編集 ]

[ 8503 ]

>>HASEさん
ひとつひとつのメニューバーが広すぎます。全体の幅が1000pxに対し、単純にメニューバー全てで計1225pxです。
今のメニューバー数の場合、140px以内に抑えましょう。
140px以下ならたいてい折り返されないと思います(どっか見落として無ければ)。

[ 2010/02/20 23:40 ] [ 編集 ]

[ 8522 ] 7791記事ですが

初心者で申し訳ないのですが。

http://js.crap.jp/tabbed.html
↑のinfomationから「～.js」というファイルをダウンロードして、fc2のファイルアップロードにアップロードしてからJavaScriptの
<script type="text/javascript" src="～.js"></script>
にURLを貼り付けます。

「～.js」これをfc2にファイルアップロードすることができないのですがどうしたら出来るのですか教えてください。

[ 2010/02/22 18:36 ] [ 編集 ]

[ 8523 ] [ 8522 ]ヒーパパさんへ

prototype.lite.js のような .　が二つあるファイルはFC2ではアップできません。prototypelite.js のように .を抜いてアップロードしてください。
当然参照するところのファイル名も変更してください。
だったはずですが…

[ 2010/02/22 19:33 ] [ 編集 ]

[ 8530 ] sakurai有難うございます

http://js.crap.jp/tabbed.html
↑のinfomationから「～.js」というファイルをダウンロードして実行すると↓のように表示します

スクリプト: C:Documents and Settings**My
行: 50
文字: 1
エラー: 'window'は宣言されていません。
コード: 800A1391
ソース: Microsoft JScript 実行時エラー

これの意味を教えていただきたいのですが・・
宜しくお願いします。

[ 2010/02/23 00:39 ] [ 編集 ]

[ 8532 ] [ 8530 ] ヒーパパさんへ

すいません、スクリプトに関しては素人で解りません。
エラーコードなどでググると良いかもしれません。
それから、ヒーパパさんのブログサイトのアドレスも公開して頂くと、識者の方々からコメントが入りやすいと思います。

[ 2010/02/23 07:12 ] [ 編集 ]

[ 8533 ] sakurai さんへ

エラーコードなどで調べてみます。
sakurai さんのブログ素敵ですね＾＾

[ 2010/02/23 09:41 ] [ 編集 ]

[ 8536 ] ありがとうございます

ヒーパパさんありがとうございます。
全てのヒントはここから発生いや派生かな？しております(^_^;)
ただ、感謝あるのみです。

[ 2010/02/23 12:16 ] [ 編集 ]

[ 8544 ] sakurai さんへ

何とか出来ました＾＾

いろいろ有難うございました。

[ 2010/02/24 22:09 ] [ 編集 ]

[ 8560 ]

初心者で申し訳ないのですが。

メニューバーを2つ設置する場合の部分をコピーするだけで出来るのですがメニューバー1本目とメニューバー2本目を全く異なるメニューバーとして設置する場合はやはりスタイルシートに2つ分の書かなければならないと思うのですがやり方が分かりません。

変な文になったので簡単に説明します。
ずばり、違うメニューバーを2本設置するタグを教えてください

[ 2010/02/27 15:11 ] [ 編集 ]

[ 8561 ]

すみません。事故解決一瞬でできました
menu_bar→menu_bar2

スマソ

[ 2010/02/27 15:17 ] [ 編集 ]

[ 8612 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2010/03/11 08:20 ] [ 編集 ]

[ 8615 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2010/03/11 20:57 ] [ 編集 ]

[ 8738 ] 承認待ちコメント

このコメントは管理者の承認待ちです