Wordpressのスタイルシ-トについて教えていただきたく質問させて下さい。

現在、wordpressでサイト製作をしているおります。
固定ペ-ジを編集する際、固定ペ-ジの投稿画面からコンテンツを入れた場合と、コンテンツを直接、ファイル(page.php)に書き込んだ場合とでは表示が変わってしまいます。
固定ペ-ジの投稿画面からコンテンツを入れた場合にはスタイルシ-トが反映されるのですが、ファイル(page.php)に直接、コンテンツを書き込んだ場合は反映されません。

そもそもWordpressのスタイルシ-トは投稿向け、という事は理解しているのですが、コンテンツを直接、ファイル(page.php)に書き込んだ場合にも同様にスタイルシ-トを反映させたく、解決方法を探しております。
上記問題の解決方法をご存知の方、回答をいただきたく、よろしくお願いいたします。


※質問がわかりづらかったのでスクリ-ンショットを加えた補足を追記いたしました。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/08/02 09:32:30
  • 終了:2014/08/04 06:37:04

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4523ベストアンサー獲得回数18802014/08/02 13:32:16

ポイント200pt

実物を見ていないので、あくまでも想像ですが、

  • page.php に直接書き込んだコンテンツに、適切なクラスが設定されていない
  • HTML の構造(入れ子の関係)が Wordpress のタグで展開されるコンテンツと違っている

の、どちらかが原因だと思います。

使っているテーマによって違うのかもしれませんが、例えば、twentyeleven の style.css から適当に抜粋すると、こんな感じ。

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 68.9%;
}
  ...
	.singular.page .hentry {
		padding: 1.625em 0 0;
	}

それほど階層が深いセレクターにはなっていませんが、それでも 2~3段くらいの階層を指定したスタイルがたくさんあります。


その、直接 コンテンツを書き込んだというページを実際に見られると、もっと具体的な回答が付くと思います。




質問の補足を受けての追記です。

スクリーンショットが Not Found になってます(どこぞのアップローダを使うより、フォトライフを使った方が良いです)が、こういうことでは無いでしょうか。

Twenty Twelve の style.css から h1 のスタイルを指定しているところを抜き出しました。これ以外にも、h1 の内側の A 要素に対する指定もあります。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}
.site-header h1,
.site-header h2 {
    text-align: center;
}
.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
    margin: 24px 0;
    margin: 1.714285714rem 0;
    line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
}
article.format-aside h1 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
article.format-image footer h1 {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    font-weight: normal;
}
.format-status .entry-header h1 {
    font-size: 15px;
    font-size: 1.071428571rem;
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
}
    .site-header h1,
    .site-header h2 {
        text-align: left;
    }
    .site-header h1 {
        font-size: 26px;
        font-size: 1.857142857rem;
        line-height: 1.846153846;
        margin-bottom: 0;
    }
    .site-header h1 {
        font-size: 21pt;
        line-height: 1;
        text-align: left;
    }

見てわかるように、直接 タグだけを指定したスタイルは、マージンやパディングをキャンセルしたものと float のクリアだけで、その他の設定は、何かのクラスを指定した要素の内側にある H1 に対して定義されています。
page.php に直接 書いた H1 は、その親の要素にクラスが指定されていないから、編集画面からの書き込みと見た目が違うのでしょう。

<h1>
    これでは、投稿と同じスタイルには、ならない。
</h1>
<div class="entry-content">
    <h1>
        class="entry-content" な要素の内側に書かれた H1 に、スタイルが反映される。
    </h1>
</div>

スクリーンショットではなくて、そのページが見られる URL を示せるなら、もっと具体的に回答できると思います。

他3件のコメントを見る
id:a-kuma3

H1 要素には、Twenty Twelve の style.css だと、多分、以下のが効いてます。

.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
}


なので、page.php のスクリーンショットのあの位置に、記事と同じようなスタイルを適用したいのであれば、以下のように class="entry-content" な要素で括ってあげれば良いと思います。

<?php
    ...

get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">

            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( '', true ); ?>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->

<div class="entry-content">     <!-- class="entry-content" な要素で括ってあげる -->
<h1>この書き込みは page.php からの書き込み</h1>
</div>

    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>
2014/08/03 16:54:55
id:ykhpno1

粘り強く回答いただきありがとうございます。
解決いたしました。
前回同様のご回答をいただいておりましたが、こちらの手違い?で解決できずにしつこく聞いてしまった形です。申し訳ございません。
ありがとうございました、感謝です!

2014/08/04 06:36:26

その他の回答(1件)

id:pogpi No.1

POGPI回答回数377ベストアンサー獲得回数502014/08/02 10:34:58

固定ページをブラウザで表示して、右クリックで「ソースを表示」とかで次のようなcssファイルを参照するためのタグを探して、それをHEADタグ内にコピーしてみてください。

<link rel="stylesheet" type="text/css" href="hoge.css" />

他1件のコメントを見る
id:pogpi

class属性がpiyoのdivタグ内にh1タグがあるとして、そのh1タグにcssを適用させるには、次のように書きます。

div.piyo h1{…}

piyoが他とかぶらないようにすれば、直るかもしれません。

2014/08/03 07:51:54
id:ykhpno1

いや、あの、直るというか、何か問題が起こっているのではなく、インスト-ルした直後のwordpressでも、どのテ-マでも起こる事を質問させていただいております。プラグインかなにかで解決できないでしょうか。。

2014/08/03 09:48:12
id:a-kuma3 No.2

a-kuma3回答回数4523ベストアンサー獲得回数18802014/08/02 13:32:16ここでベストアンサー

ポイント200pt

実物を見ていないので、あくまでも想像ですが、

  • page.php に直接書き込んだコンテンツに、適切なクラスが設定されていない
  • HTML の構造(入れ子の関係)が Wordpress のタグで展開されるコンテンツと違っている

の、どちらかが原因だと思います。

使っているテーマによって違うのかもしれませんが、例えば、twentyeleven の style.css から適当に抜粋すると、こんな感じ。

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 68.9%;
}
  ...
	.singular.page .hentry {
		padding: 1.625em 0 0;
	}

それほど階層が深いセレクターにはなっていませんが、それでも 2~3段くらいの階層を指定したスタイルがたくさんあります。


その、直接 コンテンツを書き込んだというページを実際に見られると、もっと具体的な回答が付くと思います。




質問の補足を受けての追記です。

スクリーンショットが Not Found になってます(どこぞのアップローダを使うより、フォトライフを使った方が良いです)が、こういうことでは無いでしょうか。

Twenty Twelve の style.css から h1 のスタイルを指定しているところを抜き出しました。これ以外にも、h1 の内側の A 要素に対する指定もあります。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}
.site-header h1,
.site-header h2 {
    text-align: center;
}
.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
    margin: 24px 0;
    margin: 1.714285714rem 0;
    line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
}
article.format-aside h1 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
article.format-image footer h1 {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    font-weight: normal;
}
.format-status .entry-header h1 {
    font-size: 15px;
    font-size: 1.071428571rem;
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
}
    .site-header h1,
    .site-header h2 {
        text-align: left;
    }
    .site-header h1 {
        font-size: 26px;
        font-size: 1.857142857rem;
        line-height: 1.846153846;
        margin-bottom: 0;
    }
    .site-header h1 {
        font-size: 21pt;
        line-height: 1;
        text-align: left;
    }

見てわかるように、直接 タグだけを指定したスタイルは、マージンやパディングをキャンセルしたものと float のクリアだけで、その他の設定は、何かのクラスを指定した要素の内側にある H1 に対して定義されています。
page.php に直接 書いた H1 は、その親の要素にクラスが指定されていないから、編集画面からの書き込みと見た目が違うのでしょう。

<h1>
    これでは、投稿と同じスタイルには、ならない。
</h1>
<div class="entry-content">
    <h1>
        class="entry-content" な要素の内側に書かれた H1 に、スタイルが反映される。
    </h1>
</div>

スクリーンショットではなくて、そのページが見られる URL を示せるなら、もっと具体的に回答できると思います。

他3件のコメントを見る
id:a-kuma3

H1 要素には、Twenty Twelve の style.css だと、多分、以下のが効いてます。

.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
}


なので、page.php のスクリーンショットのあの位置に、記事と同じようなスタイルを適用したいのであれば、以下のように class="entry-content" な要素で括ってあげれば良いと思います。

<?php
    ...

get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">

            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( '', true ); ?>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->

<div class="entry-content">     <!-- class="entry-content" な要素で括ってあげる -->
<h1>この書き込みは page.php からの書き込み</h1>
</div>

    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>
2014/08/03 16:54:55
id:ykhpno1

粘り強く回答いただきありがとうございます。
解決いたしました。
前回同様のご回答をいただいておりましたが、こちらの手違い?で解決できずにしつこく聞いてしまった形です。申し訳ございません。
ありがとうございました、感謝です!

2014/08/04 06:36:26
id:ykhpno1

すみません、説明不足により誤解をまねいている感がありますので、以下追記させてください。


実際に、固定ペ-ジの「編集画面」からの投稿と、固定ペ-ジファイル(page.php)に直接書き込みを行ってみました(その時のスクリ-ンショットが以下です)。

http://f.hatena.ne.jp/ykhpno1/20140803093037
http://f.hatena.ne.jp/ykhpno1/20140803093038

どちらも文章を<h1></h1>で囲んであります。

その結果のスクリ-ンショットが以下です。
http://f.hatena.ne.jp/ykhpno1/20140803093039

この違いはどのテ-マでも起こることで、実際にデフォルトテ-マで試しました(Twenty Twelve)。
この現象を質問させていただいたのですが、言葉足らずでした、
(回答者さま申し訳ございません)

この現象がwordpressの仕様であることは理解しているのですが、固定ペ-ジファイル(page.php)に直接書き込みした場合でも、編集画面からの書き込みと同じようにスタイルシ-トを適用したいのです。

その方法をご存知の方、教えてください、お願いいたします。

id:ykhpno1

質問文を編集しました。詳細はこちら

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません