• 締切済み

アメブロのグローバルメニューについて

こんばんわ。 アメーバブログのグローバルメニューについて質問させて頂きます。 現在アメーバブログでグローバルメニューを設置しているのですが 980px専用のcssソースのようで、これを1350pxサイズの横長のグローバルメニューにしたいのですが 方法がわかりません。 ネット上には980pxのソースばかりが出回っていてそれ以上の幅に設定する方法が解りませんでした。 因みに現在使っているソースを1350で設定しても反映されません。 ※希望は自分が作成済みのボタン画像を使えて 横長のメニューに設定する方法(980px以上)を詳しい方教えていただけると幸いです

みんなの回答

  • kobliha
  • ベストアンサー率88% (120/136)
回答No.1

1350px 幅のメニューを設置するのは勝手だが、画面サイズがソレ以下の場合両端が表示されないことは考慮しているかという問題がある。 980px 幅の時にはブログ全体サイズの「ゼロ」のところに合わせるから、問題ないが、「左」地点を (1350 - 980)/2 = 185 であるので、 #globalmenu { width: 1350px; height: **px; position: absolute; top: **px; left: -185px; /* マイナス値 */ } などのようにすると、画面サイズが 1280 幅の場合 -185px は「画面外」に当たるので、およそ 40px くらいのところから 1260px くらいのところまでしか表示されない。右端のスクロールバーは約 20px ある。 モチロン 1280 を切る画面サイズの人もいる。 >1350で設定しても反映されません。 CSS は CSS の決まりから外れたものが他にある時、反映しないことがある。 メニュー部分だけの問題でない質問の場合も子供には多い。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • アメブロでの記事幅を広げる方法

    アメーバブログにて記事幅を大きくしたいのですがいろいろ調べても情報が古くて内容が違ったり・・・でよくわかりません;; いまのCSS編集をいじって設定する方法をご教授ください。。 よろしくお願いします!

  • アメブロのCSSの仕組み

    みなさんこんにちは。私はアメーバブログを利用している者です。だんだん慣れてきて、今度はCSS編集というのをやってみたいと思うようになりました。しかし、CSSのソースのどの部分が、ブログのどの部分を示しているのかがわかりません。色々検索しても、納得の得られるサイトはありませんでした。なので、申し訳ないのですが、CSSのソースの順番(?)というか、どこを示しているのか、詳細に教えてくださる方、いらっしゃいませんでしょうか?CSSの意味(line-heightなど)は少しは分かるのですが、構成・仕組みが分かりません。ちなみに、スキンはスタンダードのグレーを使用しています。どうか、親切な回答をよろしくお願いします。

  • アメブロCSS編集について

    アメーバブログを利用しています。 CSS編集をしても反映されません。 「表示を確認する」をクリックしても反映されていません。 F5を押して更新すると、空白のページ このページを再表示するには、以前送信した情報を再送信する必要があります。と出て、再試行を押したらきちんとブログの表示の確認ページが出るんですが、編集は反映されていません。 背景やヘッダーなどどの設定も反映されません。 表示を確認するでは表示できて、保存すると反映されていない、という場合は更新で直るらしいでsが、表示を確認するでも反映されていない場合はどうすればいいのでしょうか? 文章下手で申し訳ありません。

  • アメブロのデザインの設定変更ができない

    2ヶ月程前にアメブロでブログを始めました。オリジナルのブログデザインを作成し使用しております。ヘッダー画像のすぐ下にホームページにリンクされるように画像で作成したメニューバーを設置しているのですが、一部メニューの内容を変更するため、画像の入れ替えをしたいのですが、何度やっても変更できずにおります。ちなみに、初めに作成設定したブログデザインは正常に表示されておりました。画像フォルダウインドウより作成した画像をアップロードし、その画像をCSSにコピー&ペーストしているのですが、どういうわけか、設定を保存のボタンをいくらクリックしても全く新しい設定が反映されないのです。何か対処法はありますでしょうか?どなた様かお詳しい方、ご教授願えませんでしょうか?ご回答の程、宜しくお願い致します。

  • アメブロのCSS編集・ヘッダー教えて!

    アメブロのCSSが上手くできません。 作成済みの、ヘッダー画像を載せたいと思っています。 オンランで調べながらやっても、なぜかつまづきます。 超初心者です。分かり易く教えて下さる方、どうぞよろしくお願いします! アメブロにて、CSS編集用デザインにしました。 現在使用中のブログデザインCSSを少し載せてみました。 だいたいこの辺りに アップロードされた画像のパス http://stat.blogskin.ameba.jp/blogskin_images/20130828/16/14/fe/j/o09800300amebawakana1377674800007.jpg を挿入するのかと思って何度かやってみたのですが、いっこうに画面は変わりません。 /* (3-2) ブログヘッダー --------------------------------------------*/ /* skinHeaderArea ブログヘッダー980pxエリア */ .skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */ /* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */ .skinBlogHeadingGroupArea{ padding:20px 0 30px; } /* skinTitleArea ブログタイトルのエリア */ どうぞよろしくお願いします!

  • アメブロのフリープラグインについて

    アメーバブログを利用しています。 左のサイドバーに設置しているアフィリエイト広告部分(フリープラグイン部分)がいきなり消えてしまいました。 先ほど少しいじっていたせいだと思うのですが、何が原因かまったくわかりません。 フリープラグインの設定部分ではタグがきちんと表示されています。 なぜか、プレビューやブログ内で反映されないのです。 再度表示させるにはどうしたらよいのでしょうか。 調べても意味がイマイチわかりません。 噛み砕いたご説明をお願いしたいです! よろしくお願いいたします。

  • メニューのロールオーバーについて

    メニューボタンをロールオーバーさせようと思った時 現在の主流テクニックはどのような方法なのでしょう? 一時期cssで背景画像を変える方法が流行りましたが、 text-indent; -9999pxを使って文字を消すようなやり方は もう古い(意味がない)でしょうか。 素直に画像を埋め込んで使おうかなーとも思っています。 そうすると、Javascriptを使うやり方が無難でしょうか? cssを使うなら、ロールオーバーで、透明画像をかぶせるのもいいかな?とか考えていますが。 ご意見お聞かせくださいませ。

    • 締切済み
    • CSS
  • アメブロCSSに詳しい方!教えてください!

    http://ameblo.jp/css-staff/entry-11266028259.html をみて、自分のブログにメニューバーを設置してみました。 このCSSでは、メニューバーが右よりになってしまうのですが、 どこをどう変えたら中央寄せにできますか?? わかる方がいたら回答お願いします! 私のブログはhttp://ameblo.jp/sugar-1122です!

  • アメブロのヘッダー設置方法について

    アメブロのフリースペースを使い、ヘッダーを作成したところ、 サイドバーの上部に重なってしまいました。しかも、左寄りです。 「トップ」「プロフィール」「問い合わせ先」などをブログに合わせセンターに設置したいのですが 対処方法を教えてください。 適用中条件 ・適用中のデザイン:「CSS編集用デザイン」 ・CSS編集用デザイン:3カラム・右ワイドメニュー ・CSS /*++++++++++++++++++++++++++++++++++++++++ ヘッダーメニュー(フリースペース使用) ++++++++++++++++++++++++++++++++++++++++*/ ul#gnavi { position :absolute; top :300px; /* ヘッダー画像の高さ */ left :20px; /* #subFrameを基準とした左からの距離 */ width :800px; /* ヘッダーメニューの幅 */ } ul#gnavi li { float :left; text-align :center; /* メニュー文字揃え */ } ul#gnavi li a { display :block; height :50px; /* ヘッダーメニューの高さ */ width :160px; /* ヘッダーメニューの1つの幅 */ ・フリースペース <ul id="gnavi"><li class="menu1"><a href="http://トップのアドレス/"><span>トップ</span></a></li><li class="menu2"><a href="http://メニュー2のアドレス"><span>メニュー2</span></a></li><li class="menu3"><a href="http://メニュー3のアドレス"><span>メニュー3</span></a></li><li class="menu4"><a href="http://メニュー4のアドレス"><span>メニュー4</span></a></li><li class="menu5"><a href="http://メニュー5のアドレス"><span>メニュー5</span></a></li></ul> ・開設日 2011年9月12日 よろしくお願いいたします。

  • アメブロでヘッダーのダウンメニューが機能しない。

    以前、http://okwave.jp/qa/q8557729.htmlにて jQueryを使ったメニューが機能しないので質問しましたが 解決しなかったので再度の質問させていただきます。 以前の質問に回答してくれた方は記載してない部分に問題があるかもと指摘していただき cssを全て書こうとしましたが文字数の関係でほとんど書けません…。 一応、cssに手を加えているのはアメブロから提供されているカスタマイズできるcssで 2箇所のみになります。以前の質問と重複してしまうかもしれませんが、 その2箇所は ヘッダー画像を変えるために /* skinHeaderArea ブログヘッダー980pxエリア */ .skinHeaderArea{ height:300px; background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20121025/18/44/e9/p/o09000360●●●1351157583098.png); background-repeat:no-repeat; background-position:center top; } /* ←ブログヘッダーに背景画像を敷きたいとき */ の部分と 最後の追記する箇所で↓↓ #headermenu{ margin:10px auto; width:720px; position:absolute; top:200px; left:20px; } ul.menu li{ float:left; width:180px; height:35px; background:url("ここにマウスoff時の画像のURLを入れてます"); position:relative; } ul.menu li a{ display:block; width:100%; height:100%; position:relative; } ul.menu li a:hover{ background:url("ここにマウスon時の画像のURL入れてます"); } ul.sub{ display:none; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:180px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } と書いています。 プラグイン箇所は <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery', '1.6.2');</script> <script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script> <script> $(function(){ $("ul.sub").hide(); $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> フリースペース箇所は <div id="headermenu"><ul class="menu"><li> 字数の関係で省略させてもらいます。 </li></ul></div> っと書いています。 試しにfc2のブログで上記のをコピペしてやってみると メニューもマウスon時にきちんと降りて機能するんですが アメブロの場合、少し違った書き方をしなくてはいけないのでしょうか? お分かりになる方、是非ともご教示ください。

    • 締切済み
    • CSS