人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

wordpress3.5に関して質問です。
固定ページのレイアウト
(タイトル名、左右の余白、本文のフォントサイズ等)
を投稿ページと同じようにしたいと思っています。
style.cssのどこを修正して良いのかご指導頂ければと思います。
宜しくお願い致します。

●質問者: mkusume
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●150ポイント ベストアンサー

<BODY> についているクラスが、投稿ページと固定ページで違っています。

例えば、この投稿ページには、BODY タグには以下のようなクラスが指定されています。

single single-post postid-256 single-format-standard custom-background single-author singular two-column right-sidebar

こちらの固定ページ の BODY タグは以下の通り。

page page-id-53 page-template-default custom-background single-author singular two-column right-sidebar

分かりやすいように、id と共通のクラスを除くと、以下が違っています。

投稿ページ

single single-post single-format-standard 

固定ページ

page page-template-default 

style.css を見ると、クラス .sigle-post に対して、以下のような指定があります。

/* 個別ページ用のスタイル */
/* 20130308追加 */
/* 20130326追加 */
body.single-post .entry-meta{
 margin-left:4.5%;
}
body.single-post .pkz{
 margin-left:4.5%;
 font-size:14px;
}


body.single-post .entry-content img {
 display: block;
/* 20130317変更 */
 /* margin-right: auto; */
 margin-right: 1em;
 margin-left: auto;
}

body.single-post .entry-content {
 font-size:1em;
 /*margin-right: 1em;*/
 /* margin-left: auto;*/
 /* width:100%; */
 width:90%;
}
/*20130322追加 */
body.single-post .entry-title {
 font-size:26px;
 margin-left:4.5%;
}

クラス pkz は、固定ページには無いようなので、その他の指定を body.page に対しても、指定してあげれば良いと思います。
例えば、こんな感じで。

/* 個別ページ用のスタイル */
/* 20130308追加 */
/* 20130326追加 */
body.single-post .entry-meta, body.page .entry-meta{/* ★ */
 margin-left:4.5%;
}
body.single-post .pkz{
 margin-left:4.5%;
 font-size:14px;
}


body.single-post .entry-content img, body.page .entry-content img {/* ★ */
 display: block;
/* 20130317変更 */
 /* margin-right: auto; */
 margin-right: 1em;
 margin-left: auto;
}

body.single-post .entry-content, body.page .entry-content {/* ★ */
 font-size:1em;
 /*margin-right: 1em;*/
 /* margin-left: auto;*/
 /* width:100%; */
 width:90%;
}
/*20130322追加 */
body.single-post .entry-title, body.page .entry-title {/* ★ */
 font-size:26px;
 margin-left:4.5%;
}


もし、single.php を直接いじってスタイルやレイアウトを変更しているところがあれば、同じような修正を page.php にもしてあげる必要があります。


mkusumeさんのコメント
いつもありがとうございます。確認します。

mkusumeさんのコメント
上記参考にして下記のようになりました。 http://dca-labo.info/demo8/?page_id=8 entry.contentは意図通り治ったのですがタイトルが修正できません。 body.page .entry-title { font-size:40px; margin-left: 3.0%; } 現状こんな感じで設定しています。

mkusumeさんのコメント
font-size:40px; は深い意味はありません。

a-kuma3さんのコメント
固定ページの方は、タイトル (h1.entry-title) が header.entry-header で囲まれていますが、 投稿ページの方は、header.entry-header の開始タグがありません。 header を閉じるタグが二つあるので、開始を間違って削除してしまっているのだと思います (多分、content-single.php)。 header.entry-header の開始タグを入れると、投稿ページの方が、固定ページのようにタイトルが内側に来るようになると思います。 この内側にずれているのは、style.css の以下の部分の margin の指定です。 >|css| .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title { margin: 0 auto; width: 68.9%; } ||< content-single.php で、&lt;header class="entry-header"&gt; が生きるようにしたうえで、style.css の margin: 0 auto; の対象から .singular .entry-header を外すのが良いと思います。 >|css| /* .singular .entry-header, ★ ココ! */ .singular .entry-content, .singular footer.entry-meta, .singular #comments-title { margin: 0 auto; width: 68.9%; } ||< 「header タグなんて、気にしないさ」というのも、ひとつの考え方だと思います。 その場合は、page.php から呼ばれている(はずの)[http://themes.svn.wordpress.org/twentyeleven/1.5/content.php:title=content.php] から &lt;header class="entry-header"&gt; を取り去ってしまう、という方法もあります。 ただ、レイアウトの調整なので、なるべく php のコードは元のテーマのようにしておいて、CSS で調整をしておいた方が、今後のカスタマイズが楽になると思います(質問の回答もしやすいですし)。

mkusumeさんのコメント
早急な対応ありがとうございます。確認します。

mkusumeさんのコメント
ご指示通りcontent-single.phpを確認したところ<header>タグが欠けていました。固定ページはほぼ修正できました。こんどは投稿ページの表示がおかしくなってしまいました。 http://dca-labo.info/demo8/?p=256

a-kuma3さんのコメント
個人的には、↓の position: absolute; ってどうなんだろう、と思いつつ、[http://themes.svn.wordpress.org/twentyeleven/1.5/style.css:title=元の style.css] も、そうなってるので触らないとして、 >|css| .singular .entry-header .entry-meta { position: absolute; top: 0; left: 0; } ||< 調整するとしたら、以下の部分。 >|css| .singular .hentry { border-bottom: none; /* 20130327修正 */ /* padding: 4.875em 0 0; */ padding: 0 0 0 0; position: relative; } ||< padding-top を 4.875em → 0 にしてますが、適当な大きさ (1.5em ? 2em くらい?) にしておけば良いと思います。

mkusumeさんのコメント
ちょっとまた関連している事でお伺いしたい事がでてきましたのでこの質問は一旦閉じて再度質問させて頂きます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ