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

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

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


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

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

▽最新の回答へ

1 ● pogpi
●0ポイント

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

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


ykhpno1さんのコメント
申し訳ございません、質問文が稚拙で誤解を与えてしまっていると思います。スクリ?ンショットを加えた補足を下に追記いたしましたので、お手数ながらもう一度、ご回答をいただきたく、なにとぞよろしくお願いいたします。 なんというか、固定ペ?ジの編集画面で<h1>を設定した場合、文字サイズや太さなどの設定はスタイルシ?トの設定に従いますよね?page.phpに直接書き込んだ場合にもそうなるようにしたい、という趣旨なのです。

pogpiさんのコメント
class属性がpiyoのdivタグ内にh1タグがあるとして、そのh1タグにcssを適用させるには、次のように書きます。 div.piyo h1{…} piyoが他とかぶらないようにすれば、直るかもしれません。

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

2 ● a-kuma3
●200ポイント ベストアンサー

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

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

使っているテーマによって違うのかもしれませんが、例えば、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 を示せるなら、もっと具体的に回答できると思います。


ykhpno1さんのコメント
申し訳ございません、質問文が稚拙で誤解を与えてしまっていると思います。スクリ?ンショットを加えた補足を下に追記いたしましたので、お手数ながらもう一度、ご回答をいただきたく、なにとぞよろしくお願いいたします。 なんというか、固定ペ?ジの編集画面で<h1>を設定した場合、文字サイズや太さなどの設定はスタイルシ?トの設定に従いますよね?page.phpに直接書き込んだ場合にもそうなるようにしたい、という趣旨なのです。

a-kuma3さんのコメント
質問の補足に対しての回答を追記しました。

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)に直接書き込みした場合でも、編集画面からの書き込みと同じようにスタイルシ?トを適用したいのです。 何か問題が起こっているのであれば、ペ?ジのURLを貼るのですが、インスト?ルした直後のwordpressでも、どのテ?マでも起こる事なので、あえてURLは貼っておりません。

a-kuma3さんのコメント
H1 要素には、[http://themes.svn.wordpress.org/twentytwelve/1.4/style.css:title=Twenty Twelve の style.css] だと、多分、以下のが効いてます。 >|css| .entry-content h1, .comment-content h1 { font-size: 21px; font-size: 1.5rem; line-height: 1.5; } ||< なので、page.php のスクリーンショットのあの位置に、記事と同じようなスタイルを適用したいのであれば、以下のように class="entry-content" な要素で括ってあげれば良いと思います。 >|php| <?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(); ?> ||<

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)に直接書き込みした場合でも、編集画面からの書き込みと同じようにスタイルシ?トを適用したいのです。

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


関連質問

●質問をもっと探す●



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