- ベストアンサー
CSSが干渉してる？
レスポンシブ対応のwordpressテーマを使っているのですが、 メニューバーが導入されていないため、 http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly のを入れようとしているのですが、 もともとのCSSと鑑賞してか、上手く起動しません。 CSSは、ほぼコピペ程度しか出来ない初心者のため、 メニューバーだけ独立して、うまく出来ないものかと思っています。 アドバイスいただければ幸いです
- a21se
- お礼率35% (337/950)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- cssのみでメガメニューの作成について
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ のぺーじにある Big Menus, Small Screens: Responsive, Multi-Level Navigation というドロップダウンメニューをメガメニューに変更しようとしていますが 2階層目のリストがどうしても横並びにできません。 cssは下記の箇所のどこかに「float:right;」を入れればよいと考え、いろいろ触りましたが、 2階層目が表示されなくなったり、3階層目が表示されなくなったりします。 .nav > li > a { display: block; } .nav li ul { position:absolute; left: -9999px; border: 1px solid #ccc; background: #ffffff; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top:0; } .nav li li a { display: block; background: #1d7a62; position: relative; z-index:100; } .nav li li ul { background:#249578; z-index:200; } .nav li li li a { background:#249578; z-index:200; } メガメニューはjqueryを使って作っている紹介ページがあり 試しましたが、そうすると、レスポンシブ（小さい画面）した際の 開閉式のメニューが動作しなくなりました。 どうかご教示ください。お願いします。
- ベストアンサー
- CSS
- ＣＳＳでカラム移動をしたい
ブログを作りたく、フリーウエアの Web Liberty様(http://www.web-liberty.net/)の Web Diary Professional(http://www.web-liberty.net/download/diarypro/index.html)をCGIとして使用し、 witchmakers様(http://www.usamimi.info/~witchmakers/)の 3カラムスキン(http://www.usamimi.info/~witchmakers/content/wdp3column.html) をお借りしてデザイン変更を行っています。 しかしこのスキンのナビゲーション(サイドバー)は2つとも右寄りなので、どちらかを左に移動させたいのですが、 ＣＳＳでの変更すべき箇所がわかりません。 一応floatと記述されている所は全て見ていったのですがうまくいきませんでした。 また、「カレンダー」や「プロフィール」の位置をバーの中で 上下に入れ替えたりするのはどうすれば出来るのでしょうか。 こちらにそのままコードをコピペするのは憚られたので念のため、 上記スキンの中のcommon.cssというファイルの中で変更しておりますのでご参照ください。 (お願いしておいて参照も失礼だとは思いますがどうぞよろしくお願い致します。) どうぞお知恵をお貸しください。
- ベストアンサー
- ブログ
- １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。
はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }
- 締切済み
- デザイナー・クリエイティブ職
- Wordpress CSS ウィンドウサイズ
ウィンドウサイズを小さくするとそれに合わせて配置してある画像やメニューバーやコンテンツ部分が動くようにしたいです。 ウィンドウを縦方向に小さくしても何も動かず横方向へ小さくすると一定の所まで移動した後、画面外へ消えるようにしたいです。 （ソフトバンクのようなホームページみたいな感じです。） Wordpressで作っているのですが、こういった動作をさせるためにはＣＳＳをいじればいいのでしょうか？ Stinger3というテーマを使って画像を配置して試してみたのですが、ウィンドウサイズを小さくした時にその画像だけ他より速く左まで行ってしまったり、ヘッダー画像に覆いかぶさったりしてしまいます。 どういったコードを書けば出来るのでしょうか？教えてください。
- ベストアンサー
- CSS
- Wordpress カスタマイズについて
Wordpress/Twenty Twelveカスタマイズについて Wordpressフォーラムに投稿すべきなのでしょうが、なぜか 投稿がうまくいきませんので、こちらで失礼します。 以下の内容、アドバイスを頂けると幸いです。 Wordpress/Twenty Twelveのテーマを現在カスタマイズしております。 style.css にて、メインナビゲーションメニューの各項目の後ろに、背景画像を 設定しました。ただ、それをレスポンシブル（おもにスマホ）の際は非表示と したいのですが… ＞PCの場合のstyle.css .main-navigation ul.nav-menu li, .main-navigation div.nav-menu > ul li { background-image: url(/メニュー背景.png); background-repeat: no-repeat; background-position: center; max-width: 100%; } ＞スマホの場合の縮小設定 @media screen and (min-width: 600px) { 以下に… .main-navigation ul.nav-menu li, .main-navigation div.nav-menu > ul li { background-image: url(/メニュー背景.png); background-repeat: no-repeat; background-position: center; max-width: 100%; background-img: none; } こういった記述をしておりますが、これだけではスマホで閲覧した際 非表示にならないようで、困っております…。 何かミスをしている、もしくは欠けていることがありますでしょうか。 初心者なので、記述場所等もご指摘くださると幸いです。 以上 よろしくお願いします。
- 締切済み
- ブログ
- iPhoneでのナビゲーションバーの挙動について
Twitter Bootstrap(version2.2.2)を使いホームページの作成をしようとしています。プログレッシブデザインにしてPCとスマホで表示させたいです。 ナビゲーションバーでドロップダウンメニューを使いたいのですが、PCでは思うどうりに、ドロップダウンメニューのリンクがクリックできるのですが、iPhone(iOS6.0.2)ではクリックしようとするとドロップダウンではなく（そのメニューは消え）表示上ではその下のナビゲーションバー自体をクリックしてしまいます。どのように改善したら良いのでしょうか？ HTMLは以下のようなものです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST SITE</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> </head> <body style="padding-top:20px"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR01 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP1-1</a></li> <li><a href="http://www.example.com/">DROP1-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP1-3</a></li> <li><a href="http://www.example.com/">DROP1-4</a></li> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR02 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP2-1</a></li> <li><a href="http://www.example.com/">DROP2-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP2-3</a></li> <li><a href="http://www.example.com/">DROP2-4</a></li> </ul> </li> </ul> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
- 締切済み
- CSS
- AFFINGER6のヘッダーエリアの高さCSS
環境 Wordpress 6.0.2 AFFINGER6 AFFINGER6のレイアウトのブラウザ上端から94pxの高さの画像（写真）をいれたいのですが、図の青いバーを越えて、投稿（本文/記事）近に画像の下端が来ていました。 そこでヘッダーに使用されている領域に色をつけてみたところ、図のように緑色の範囲が存在していることがわかりました。 【質問】 このうち、赤い枠で囲った範囲は不要で、上端から94pxの高さにピッタリと画像をいれたいと考えました。 【やったこと】 設定項目で探して設定したものは、図の下半分にあるように ｜Wordpress ｜外観＞ヘッダー＞・各メニュー設定＞ヘッダー画像 ｜「ヘッダー画像エリア」 ｜AFFINGER管理＞ヘッダー＞ヘッダーエリア ｜「PCのみ」 をみつけ、そこに高さの数値（94）を入力しましたが、赤い枠のエリアは消えません。 外観＞テーマファイルエディターから、 CSS（style.css） を開き「/** ヘッダー画像」と書かれている項目もみてみましたが、CSSを書き換える箇所がみつけられません。 AFFINGER6を購入してまだ日が浅いのでわかっていない箇所も多いのですが、どこ/どの設定を編集したら、図の赤いエリアは消える（ヘッダー画像は上から94pxのみに設定）できるでしょうか？ （スマホ表示も同様にしたいのですが、とりあえず今はPCブラウザーでの表示設定について質問させていただきます）
- 締切済み
- ブログ
- before afterを使って影を表示できません
スタイルシートでbefore afterを使って影を表示できません こちらのサイトを参考にしました。 http://coliss.com/articles/build-websites/operation/css/css3-box-shadows-effects-by-paulund.html こちらのeffect1は簡単にできます。 before afterを使わず、影をだすことはできますが、before afterを使って影を表示できません。 また、こちらのサイトを参考にしましたが、ダメでした。 http://nicolasgallagher.com/css-drop-shadows-without-images/ コピペしても、コードを削ってもうまくいきません。 ブラウザを変えても、Wordpressのテーマを変えてもダメです。 すいませんが、何か試せることや解決方法がありましたら、ご教授ください。
- 締切済み
- CSS
- jQueryプラグインのメガドロップダウンメニュー
jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル（オンマウスすると車の写真などが出てくる） スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・＞＜ ★ＨＴＭＬ（ヘッド） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ～～～ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★ＨＴＭＬ（ボディ） <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ～～～～～～～～省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★ＣＳＳ(1)（dcmegamenu.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★ＣＳＳ(2)（white.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・？ 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。
- 締切済み
- JavaScript
- HTML５とCSS３のレスポンシブデザインについて
今、wordpressでHTML５とCSS３のレスポンシブデザインに独学で、挑戦しています。 タグを手書きで書いているのですが、分からない点があります。 ▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。 display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。 どこか間違いのタグがあるのでしょうか？？ 教えていただけると嬉しいです（●＾o＾●） ↓ナビゲーションバーのタグ↓（PC） #menu ul{ width:100%; margin:0; padding:0; color:#000; background:#000; } #menu li{ list-style:none; border-top:2px solid #FFF; } #menu li a{ padding:16px 20px; display:block; text-decoration:none; background:#000; color:#FFF; } .togmenu{ padding:16px 20px; } ↓PCでは非表示になるはずのMENU↓（PC） .menubtn{ display:block; background:#000; color:#FFF; } ↓スマホで表示されるタグ↓ @media only screen and(min-width:500px){ .menubtn{ } .togmenu{ display:none; background:#000; } #menu li{ display:inline-block; border:none; } } ★上記のレスポンシブデザインで制作中のサイトURL★ http://fashioncode.jp/
- ベストアンサー
- HTML
