ワードプレスでレイアウトが崩れてしまいました。

質問

CSSなどのことはほぼ分からないのですが、詳しい方がいましたら是非お力になっていただきたいと思っております。お願いします。

スティンガー３を使用しております。

header.php　を変更したときに思ったようにならなかったので追加したコードを削除したところでおかしくなったと思います。変更内容はトップページ以外、ヘッダー画像をでないようにしようとしていました。

現象は、ヘッダーの画像を横並びに配置していたのですが、縦に二つ並ぶようになりました。

この現象と同時に気がついた異変がまだありまして、h2の装飾を子テーマを使って変更していたんですが、これの装飾がなくなりました。（現在は戻ってはいますが、子テーマで変更しようとしても反映されず、親テーマを変更すると反映されます。）

抜粋記事の枠の大きさなどわかりやすいところを子テーマを使い変更してみましたところ、きちんと反映されました。

ヘッダー画像が回り込まなくなったことと、子テーマで変更できなくなったものがあることの関係は分からないんですが、かれこれ半日以上調べていたのですが完全にいき詰まったのでこちらに質問させていただきました。

もしわかる方がいましたらお力を貸していただきたいので宜しくお願いいたします。

http://arromanches-ngy.sakura.ne.jp/wp/?p=99

問題のサイトになります。トップ画像の下にある「広告のソースコード」という文字がトップ画像の右上に来るはずなんですが・・・。（CSSに関しては一度きちんと横並びになっていましたので問題ないと思います。）

回答No.4

ORUKA1951 · ベストアンサー

サイトのどこにおいても良いように書き換えた。
サーバーのどこかに置いてください。

★HTMLとCSSの基本を身につけましょう。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』であって、デザインのためではありません。
★スタイルシートの
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
は、絶対にひつような知識。これがないとDIVをデザインのために書いたり、煩雑なHTML/CSSになる。

頑張ってください。

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;line-height:1.8em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.header h1,div.header h2{width:49%;display:inline-block;position:relative;}
div.header h1 img,div.header h2 img{width:90%;height:auto;}
div.header div.nav{width:100%;line-height:2em;text-align:center;}
div.header div.nav a{text-decoration:none;font-weight:bold;color:black;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul li{display:inline-block;width:13%;position:relative;margin-left:1px;font-weight:bold;}
div.header div.nav ul li+li:before{content:"|";position:absolute;left:-1px;top:0;}
div.header div.nav ul li ul{position:absolute;top:2em;width:100%;display:none;z-index:10;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li ul li{font-weight:normal;width:100%;}
div.header div.nav ul li ul li:before{content:"";}
div.section h2,div.section p,div.section div.section,div.section div.aside{width:auto;margin:0 300px 0 0;min-width:0;border-color:gray;border-style:dotted;}
div.section{min-height:800px;}
div.section div.section{min-height:0;}
div.section div p{width:auto;margin:0;}
div.section div.nav{position:absolute;width:295px;top:0;right:0;font-size:0.95em;}
div.section div.nav h4{line-height:33px;border-bottom:ridge 5px rgb(255,100,100);}
div.section div.nav h4:before{content:url(/wp/wp-content/uploads/2014/07/icon_sidebar1.png);position:relative;top:10px;}
div.section div.nav ul{list-style-type:none;line-height:1.8em;}
div.section div.aside{font-size:0.95em;}
div.section div.aside h4{line-height:3em;margin:1em 2em;text-align:center;font-size:1.5em;}
div.section div.aside dl{margin-left:170px;line-height:1.6em;position:relative;}
div.section div.aside dt{position:relative;font-widght:bold;}
div.section div.aside dd{min-height:2em;margin-left:0;text-indent:1em;}
div.section div.aside dd a{position:absolute;background-color:rgb(255,200,200);width:8em;text-decoration:none;display:block;right:10px;}
div.section div.aside dt a:before{content:"";background-image:url(/wp/wp-content/themes/stinger3ver20140327/images/no-img.png);position:absolute;top:0;left:-160px;width:110px;height:110px;display:block;background-size:cover;}
div.section h2{border-width:1px 1px 0 1px;}
div.section div.section,div.section * p{border-width:0 1px;}
div.section * p{border:none;}
div.section div.aside{border-width:0 1px 1px 1px;}
div.section div.aside h4{border-style:dotted;border-width:1px 0px;border-color:gray;background-color:rgb(200,200,200);}
div.section h2,div.section p,div.section div.section{background-color:white;}
div.section * p{background-color:transparent;}
div.header div.nav ul li ul li{background-color:rgb(255,240,240);}
body{background-image:url(/wp/wp-content/uploads/2014/07/04-polish-wood.png);}
div.section div.aside dl a{text-decoration:none;}
div.section div.aside dl a:hover{text-decoration:underline;}
div.section div.aside{background-color:rgb(255,225,225);}
-->
</style>

お礼

詳しいご回答、ありがとうございました。

知識がないので参考にさせていただいて、勉強させてもらいます。

回答No.3

ORUKA1951

そしてスタイルシートを遊びで書いてみました。
・・HTMLをどこかのサイトのデザインに合わせてスタイルシートを書くと言うのは、私にとっても、とても良い練習にもなるので・・

　こんな簡単な判りやすいものになるのです。細かいところは手を入れていませんが、多分あなたの期待に近いものじゃないかと・・。

★リキッドなのでスマホ以上の幅640pxがあればOK。
　ウィンドウを小さくしてみる。
★印刷(media:print)や携帯用(media:handheld)は書いてません。御随意に

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;line-height:1.8em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.header h1,div.header h2{width:49%;display:inline-block;position:relative;}
div.header h1 img,div.header h2 img{width:90%;height:auto;}
div.header div.nav{width:100%;line-height:2em;text-align:center;}
div.header div.nav a{text-decoration:none;font-weight:bold;color:black;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul li{display:inline-block;width:13%;position:relative;margin-left:1px;font-weight:bold;}
div.header div.nav ul li+li:before{content:"|";position:absolute;left:-1px;top:0;}
div.header div.nav ul li ul{position:absolute;top:2em;width:100%;display:none;z-index:10;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li ul li{font-weight:normal;width:100%;}
div.header div.nav ul li ul li:before{content:"";}
div.section h2,div.section p,div.section div.section,div.section div.aside{width:auto;margin:0 300px 0 0;min-width:0;border-color:gray;border-style:dotted;}
div.section{min-height:800px;}
div.section div.section{min-height:0;}
div.section div p{width:auto;margin:0;}
div.section div.nav{position:absolute;width:295px;top:0;right:0;font-size:0.95em;}
div.section div.nav h4{line-height:33px;border-bottom:ridge 5px rgb(255,100,100);}
div.section div.nav h4:before{content:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-content/uploads/2014/07/icon_sidebar1.png);position:relative;top:10px;}
div.section div.nav ul{list-style-type:none;line-height:1.8em;}
div.section div.aside{font-size:0.95em;}
div.section div.aside h4{line-height:3em;margin:1em 2em;text-align:center;font-size:1.5em;}
div.section div.aside dl{margin-left:170px;line-height:1.6em;position:relative;}
div.section div.aside dt{position:relative;font-widght:bold;}
div.section div.aside dd{min-height:2em;margin-left:0;text-indent:1em;}
div.section div.aside dd a{position:absolute;background-color:rgb(255,200,200);width:8em;text-decoration:none;display:block;right:10px;}
div.section div.aside dt a:before{content:"";background-image:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-content/themes/stinger3ver20140327/images/no-img.png);position:absolute;top:0;left:-160px;width:110px;height:110px;display:block;background-size:cover;}
div.section h2{border-width:1px 1px 0 1px;}
div.section div.section,div.section * p{border-width:0 1px;}
div.section * p{border:none;}
div.section div.aside{border-width:0 1px 1px 1px;}
div.section div.aside h4{border-style:dotted;border-width:1px 0px;border-color:gray;background-color:rgb(200,200,200);}
div.section h2,div.section p,div.section div.section{background-color:white;}
div.section * p{background-color:transparent;}
div.header div.nav ul li ul li{background-color:rgb(255,240,240);}
body{background-image:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-content/uploads/2014/07/04-polish-wood.png);}
div.section div.aside dl a{text-decoration:none;}
div.section div.aside dl a:hover{text-decoration:underline;}
div.section div.aside{background-color:rgb(255,225,225);}
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
</style>

回答No.2

ORUKA1951

後半です。
　説明はは不要だと思います。
　HTMLにはプレゼンテーションに関する事は一切書かれていませんから、後は好きにデザインできます。デザインの重度も格段にましますから、ガラケーやプリンターなど端末に合わせてリキッドにするなり、メディアクウェリー使ってディスプレイによってスタイル帰るなり・・
　もちろん、HTML・・・この場合テンプレートのメンテナンス性もデザイン関係ないのでよくなりますよね。
★タブにも度したら
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェックしておくとよいです。

＿＿<div class="aside">
＿＿＿<h4 class="kanren">関連記事</h4>
＿＿＿<dl>
＿＿＿＿<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=61">超初心者が超初心者に伝えるｃｓｓ講座になってしまった一件</a></dt>
＿＿＿＿<dd>記事一覧をブロック化からのリンク仕様</dd>
＿＿＿＿<dd>今日もコツコツカスタマイズな1日。</dd>
＿＿＿＿<dd>こういうことで、ほ</dd>
＿＿＿＿<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=61">この記事を読む</a></dd>
＿＿＿＿<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=39">サイドバーを色々とカスタム</a></dt>
＿＿＿＿<dd>もう朝です・・・。いやぁ、それにしても時間の過ぎることの早いこと早いこと。</dd>
＿＿＿＿<dd>他の先生方のように</dd>
＿＿＿＿<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=39">この記事を読む</a></dd>
＿＿＿＿<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=53">やっとみつけた！記事本文の公開日の装飾部分</a></dt>
＿＿＿＿<dd>アロマンシェスウェブ担当のミツロックでございます。</dd>
＿＿＿＿<dd>いやぁ、これだけのことにどんだけ時間を使う</dd>
＿＿＿＿<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=53">この記事を読む</a></dd>
＿＿＿ ＿<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=25">記事一覧をカード型に分けてスッキリ</a></dt>
＿＿＿＿<dd>こんばんわ。アロマンシェスのブログサイトに記念の初投稿させていただきますWEB担当ミツロックです。</dd>
＿＿＿＿<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=25">この記事を読む</a></dd>
＿＿ </dl>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

【前回の一部訂正】
　div class="section">
　　<h2>見出し</h2>
　　<p class="breadcrumb list">ホーム &gt; BLOG &gt;</p>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑>を&gt;に

　　　<label></label>は削除

回答No.1

ORUKA1951

残念ですが、そのテンプレートでは細工は不可能です。あなたでなくてもソースを見てうんざりするでしょう。
　スタイルシートを用いてデザインする最大の目的は、御存知のように「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の分離です。
　そのためには、『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/ )』
　ところが、そのURLを
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックされると分かるようにHTML自体無茶苦茶です。そうなるとブラウザによる補完が異なるため、ブラウザ間の表示差以前にデザインできないのです。

★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>アロマンシェフブログ　少しだけほっと一息よろしいでしょうか？</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1><a href="/"><img src="/wp/wp-content/uploads/2014/07/wp_header.png" width="473" height="343" alt="アロマンシェフブログ　少しだけほっと一息よろしいでしょうか？"></a></h1>
＿＿<h2><a href="/"><img src="/wp/wp-content/uploads/2014/07/wp_header.png" width="473" height="343" alt="アロマンシェフブログ　少しだけほっと一息よろしいでしょうか？"></a></h2>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="/wp/" title="トップページ">HOME</a></li>
＿＿＿＿<li><a href="/HP">OFFICIAL-HP</a></li>
＿＿＿＿<li><a href="/wp/Blog">BLOG</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/wp/?cat=4">店長</a></li>
＿＿＿＿＿＿<li><a href="/Therapist">セラピスト</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/wp/news">NEWS</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Event">イベント</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/Job">JOB　OFFER</a></li>
＿＿＿＿<li><a href="/Hotel">HOTEL-LIST</a></li>
＿＿＿＿<li><a href="/wp/?cat=6">CUSTOM</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p class="breadcrumb list">ホーム &gt; BLOG ></p>
＿＿<div class="section">
＿＿＿<h3>トップ画面以外でヘッダー画像を非表示に・・・が、悲劇が訪れた</h3>
＿＿＿<p>公開日： 2014/07/19 : 最終更新日：2014/07/20 BLOG, カスタム　備忘録, ミツロック</p>
＿＿＿<p>ウェブ担当とは名ばかりのミツロックでございます。この記事は、只今ミツロックが遭遇中の悲劇の備忘録です。</p>
＿＿＿<p>そんなのこうこうこうやれば直るんじゃね～？ってわかる方いましたら是非コメントお願いします・・・。</p>
＿＿＿<p>本日のカスタム内容は</p>
＿＿＿<ol>
＿＿＿＿<li>トップ画面を2分割に分ける　⇒　とりあえずは成功しました。</li>
＿＿＿＿<li>トップ画面以外でヘッダー画像を非表示に　⇒　悲劇が起こりました。</li>
＿＿＿</ol>
＿＿＿<p>という内容となっております。</p>
＿＿＿<p>(1)トップ画面を(2)分割に分ける</p>
＿＿＿<p>参考にさせていただいたサイトはこちら</p>
＿＿＿<p>画面全体に画像を使っている方は、こちらの記事にあるステップ２のheader.phpに記述を加えるにある「広告用ソースコード」という言葉が変更後、上に出ればもうできたも同然（だと思います。）</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<form method="get" id="searchform" action="/wp/">
＿＿＿＿<p><label class="hidden" for="s"></label>
＿＿＿＿<input value="" name="s" id="s" type="text">
＿＿＿＿<input style="width: 48px; height: 48px;" src="/wp/wp-content/themes/stinger3ver20140327/images/wp_sarch" alt="検索" id="searchsubmit" value="Search" type="image"></p>
＿＿＿</form>
＿＿＿<div>
＿＿＿＿<h4>アロマンシェスより一言</h4>
＿＿＿＿<p>当店セラピスト、スタッフのブログです。</p>
＿＿＿＿<p>ウェブ担当ミツロックのワードプレスにおけるカスタム備忘録も隅っこの方に書かせてもらってます。</p>
＿＿＿＿<p>出張リクラゼーションサロンin名古屋「アロマンシェス」<img src="/wp/wp-content/uploads/2014/07/titlelogo01.png" alt=""></p>
＿＿＿</div>
＿＿＿<div>
＿＿＿＿<h4>カテゴリ別一覧</h4>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="/wp/?cat=3" >BLOG</a> (3)</li>
＿＿＿＿＿<li><a href="/wp/?cat=6" >カスタム　備忘録</a> (5)</li>
＿＿＿＿＿<li><a href="/wp/?cat=7" >ミツロック</a> (3)</li>
＿＿＿＿</ul>
＿＿＿</div>
＿＿＿<div>
＿＿＿＿<h4>アーカイブ</h4>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="/wp/?m=201407">2014年7月</a></li>
＿＿＿＿</ul>
＿＿＿</div>
＿＿＿<div>
＿＿＿＿<h4 class="menu_underh2">メタ情報</h4>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="/wp/wp-login.php">ログイン</a></li>
＿＿＿＿＿<li><a href="/wp/?feed=rss2">投稿の <abbr title="Really Simple Syndication">RSS</abbr></a></li>
＿＿＿＿</ul>
＿＿＿</div>
＿＿</div>

以後は次に・・