WordPressヘッダー画像の横並び方法
- WordPressのテーマStinger3を使用している場合、ヘッダー画像を横に並べる方法について教えてください。
- floatを使用することでヘッダー画像を横に並べることはできますが、ウィンドウサイズを小さくするとレイアウトが崩れてしまいます。
- 理想的なレイアウトは、左側にheader2、右側にheader1を配置し、両者の間に10pxの余白を設けることです。また、ウィンドウサイズを小さくした場合、header1とheader2が左方向に移動していくような挙動が望まれます。
- ベストアンサー
wordpress ヘッダー画像 横に並べる方法
テーマはStinger3を使っています。 ヘッダー画像を二つ横に並べたいのですが縦になってしまいます。(header2がheader１の上に来ます。） #header1 { height: auto; margin-left: auto; margin-right: auto; width: 700px; padding: 0 0 0 290px; } #header2 { height: auto; margin-left: auto; margin-right: auto; width: 251px; } floatを使えば横に並べることはできたのですが、 ウィンドウサイズを小さくした時にレイアウトが崩れるので他の良い方法はないでしょうか？ 理想としては左側にheader2右側にheader1間に10pxの余白、ウィンドウサイズを小さくした時に、header1とheader2が左方向に移動していく（右から左に向かって小さくした場合） どうすればいいでしょうか？ 教えてください。
- Sorara2013
- お礼率83% (44/53)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
header1,header2とは分からないidですが・・ 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 勧告(1999)後15年になるのに理解されなくて、HTML5では、この反省からDIVは極力使わないで構造を明確にする新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ここをしっかり理解しておかないとデザインをちょっと変えたいとき困りますし、HTMLのメンテナンスも大変になる。 ・#header1,header2は、本当のところなんでしょう。見出しなら、<h1></h1>で良いです。 「テキストを画像に置き換えて表現する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」はちょっとまずいので、実際の内容はなんなのでしょう。 ・横に並べる方法は、inline-block、でもinlineでもcontent:url()でも、もちろんfloatでも構いません。内容によって選択します。 ・ディスプレイの最大幅、最小幅の想定は？ ・画像はウィンドウ幅に合わせて伸縮させるのか？ <----余白---->[-----画像-----]10px[--画像--]<----余白----> [--像-]10px[画像] ・それとも画像は伸縮させずに余白で制御するのか <----余白---->[---画像---]10px[画像]<----余白----> <余白>[---画像---]10px[画像]<余白> HTMLさえ、きちんとマークアップされていれば、いかようにも出来ます。 例えば、標準的な <body> <div class="header"> <h1>ページタイトル</h1> 以下省略・・・ だけで良いのですよ。それで画像を２枚並べられる。
その他の回答 (1)
- ONEONE
- ベストアンサー率48% (279/575)
inline-blockでうまくいかないでしょうか？ http://taneppa.net/display-inline-block/
お礼
わかりました、ありがとうございますｍ(_ _ )ｍ
関連するQ&A
- WordPressで画像に枠が入ってしまいます。
wordpress でホームページを制作していますが、写真に枠線が入ってしまいます。どの部分を消したらいいのかがわかりません。有料テンプレートを買ってしまって特にわかりません。。。どなたかお助けください。 ＣＳＳは @charset "UTF-8"; /* CSS Document */ /* -------------------------------------------------- setting ----------------------------------------------------- */ body { background:#ededed url(images/bg/default.gif);} p { font-size: 110%; line-height:1.6em } li{list-style:none;} .row { width: 980px; } @media only screen and (max-width: 767px) { p { font-size: 115%; } } /* -------------------------------------------------- header ----------------------------------------------------- */ header.row { padding-top:23px; padding-bottom:20px; } header.row .nine.columns{ padding:0; } header h1 { margin:0; padding:7px 0 0 0; line-height:1em; font-size: 36px; color:#666; font-family:Georgia, "Times New Roman", Times, serif; font-weight:lighter; float:left; text-align:left; } header img{ border:none; } header h1 a { color:#666; text-decoration:none; } header h1 a:hover { color:#fff; } header #tagline { color:#333; font-size:small; float:left; line-height:37px; padding-top:7px; padding-left:15px; } header #contact { text-align:right; } header #contact #phone { font-weight:bold; font-size: large; color:#666; line-height:1em; } header #contact #phone a { color:#666; } header #contact #icon img { margin-left:5px; vertical-align:middle;} header h3 { margin:0; margin-bottom:5px; padding-left:7px; font-size:14px; } header .widget_RGBdesign_Contact#contact h3 { border-left:0px #FFFFFF solid; padding-left:0px; padding-bottom:5px; } header .widget_search#contact h3, header .widget_search#contact label { display:none; } header form, header p { margin:0; padding:0; } header .widget_search#contact #s {width:70%; float:left; margin:0; padding:0;} header .widget_search#contact #searchsubmit {width:30%: float:right; margin:0; padding:0; font-size: 20px; margin-top:0.3em;} header .widget ul li { display: inline; } header:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
- 締切済み
- HTML
- WordPress レスポンシブテーマのCSS
http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。
- 締切済み
- CSS
- DreamweaverMXのデザインビューが一部表示されなくなる
DreamweaverMXのデザインビューが一部表示されなくなってしまい困っています。 どうして表示されなくなったのか具体的に言うと、 3カラムのレイアウトをdivを使いCSSで作成していました。firefoxで見るとフッターがメインコンテンツの上部にきてしまっていたので、高さを指定してあった「右メニュー」や「左メニュー」、また「メインコンテンツ」の部分のdivの高さをすべて「auto」にし、フッター部分のCSSに「clear: both;」を記入し、修正を図りました。 これでその問題は解決されましたが、その後、DreamweaverMXのデザインビューの一部（メインコンテンツ、3カラムの真ん中部分です。）が途中から真っ白になってしまっていて、そこに書かれていたテキストや画像等すべて真っ白で、デザインビューで作業できなくなってしまいました。 真っ白でも、その部分に書いたテキストはマウスで反転させたりすると黒くその部分が反転するので、テキスト等はそこにあるようですが、真っ白ですから、作業ができません。 コードビューで作業できますが、それではDreamweaverMXを使う意味がありません。デザインビューで作業できれば、非常にスピーディーに出来るので、こうなってしまい非常に困っています。 「すべてのビジュアルエイドを非表示」にしたら直ったこともあり、そうして見ましたが、今回は駄目です。 CSSコードの書き方に問題があるかもしれません。 以下が、そのCSSコードです。 /* container */ #container { width: 900px; margin-right: auto; margin-left: auto; text-align: left; height: auto; } #incontainer { width: 700px; float: left; height: auto; } /* メイン */ #main { float: right; width: 480px; padding: 10px; height: auto; } /* 左メニュー */ #ml { float: left; width: 200px; height: auto; } #box-ml { padding: 0px 0px 10px; width: 200px; float: left; height: auto; } #ul-ml { margin: 0px; padding: 0px; display: inline; text-indent: 0px; list-style-type: none; text-align: left; } #li-ml-kg { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 26px; background-image: none; text-indent: 20px; background-color: #66CC00; border: 1px solid #CCCCCC; color: #FFFFFF; font-size: 13px; } #li-ml a { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg.gif); text-indent: 20px; font-size: 13px; } #li-ml a:hover { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg-m.gif); text-indent: 20px; color: #FF0000; font-size: 13px; } /* 右メニュー */ #mr { width: 200px; float: right; text-align: left; height: auto; } #box-pick { width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin: 0px 0px 5px; display: block; float: right; height: auto; } #box-koshin { display: block; width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-saishin { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-toiawase { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-counter { display: block; width: 180px; padding: 10px; text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } /* フッター */ #footer { background-color: #66CC00; height: 50px; width: 900px; margin-right: auto; margin-left: auto; color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; clear: both; } 何が原因なんでしょうか？ 宜しくお願いいたします！
- ベストアンサー
- CSS
- HPの作成を教えてください。
HP作成を見よう見まねで作成しているのですが最初からつまずきました。 作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。 何分初心者なので分かりやすく教えて頂ければ助かります。 body , html { height: 100%; margin: 0; padding: 0; text-align: center; /* 標準文字色 */ font-size : 100%; background-image : url(../imege/bg01.png); background-repeat : repeat-x;background-position : left top; } /* Safari用ハック 文字サイズ調整 */ /*\*/ html:\66irst-child body{ font-size: 90%; } /* end */ } img{ border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; } #container { width: 100%; position: relative; height : 100%; min-height: 100%; background-image : url(../imege/fbg01.png); background-repeat : repeat-x;background-position : left bottom; } #header{ width: 100%; height : 84px; margin-top : 0px; margin-bottom : 0px; text-indent : -9999px; } #contents { padding-top : 84px; padding-bottom: 100px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; margin-left : auto; margin-right : auto; } #header-in{ width : 900px; height : 84px; position : relative; margin-left : auto; margin-right : auto; margin-top : 0px; margin-bottom : 1px; } #contents-in{ margin-left : auto; margin-right : auto; width : 900px; position : relative; margin-top : 0px; margin-bottom : 0px; } #footer-in{ margin-left : auto; margin-right : auto; margin-bottom : 0px; width : 900px; height : 100px; position : relative; margin-top : 0px; } #header-logo{ width : 500px; height : 84px; float : left; z-index: 2; } #header-logo2{ width : 200px; height : 84px; float : left; z-index: 2; } <div id="container"> <div id="header"> <div id="header-in">ヘッダー <div id="header-logo">トップロゴ</div> <div id="header-logo2">お問い合わせ</div> </div> </div> <div id="contents"> <div id="contents-in">コンテンツ</div> </div> <div id="footer"> <div id="footer-in">フッター</div> </div> </div> よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSで、指定されていない空白が開く
ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。
- ベストアンサー
- CSS
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- 背景に影をつける方法（CSS）を教えてください。
以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }
- ベストアンサー
- HTML
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
お礼
わかりました、ありがとうございますｍ(_ _ )ｍ