wordpressのcompleteテーマについて教えてください。固定ページのタイトル表示部分のcss該当箇所を教えてください。print-css.cssでwp-printプラグインから出力しようとしておりますがタイトル部分もコンテンツ部分と同じフォントなので差別化して大きくしたいです。

また<li>中黒が印刷時に非表示になってしまいますが、こちらも良い方法はないでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/11 23:28:20
  • 終了:2014/01/12 22:45:06
id:kaji0245

print-css.cssはstyle.cssの内容をコピペしております。

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512014/01/12 22:18:14

ポイント100pt

「print-css.css」のみ「Complete」テーマの「style.css」の内容をコピーしてテーマフォルダ内に作成し、「print-posts.php」はそのままプラグインのファイルを利用しているのですね?
記事タイトルは、「print-posts.php」で以下のように出力されています。

					<p id="BlogTitle"><?php the_title(); ?></p>



上記で出力されたタイトルの表示を変更したい場合は、「print-css.css」にid「BlogTitle」に対するフォントサイズや余白等、適用させたいスタイルを追加します。

#BlogTitle { font-size:24px; margin-bottom:10px; }

※あるいはプラグインフォルダ内の「print-posts.php」をテーマフォルダ内にコピーして、タイトルを囲むpタグをh1に変更しても大丈夫です。(「Complete」テーマでは、IDやクラス名を使わず、h1要素に直接フォントサイズを指定しています。)


リストマークの表示についてですが、CSSリセットにより余白がすべて無効になっていますので、必要な余白は追加指定する必要があります。
とりあえず以下の記述を追加する事で表示されるようになると思います。

#BlogContent ul {
	margin-left:28px;
}



※左側余白だけでなく、上下の余白も必要な場合は以下のように指定します。

#BlogContent ul {
	margin-top:5px;
	margin-left:28px;
	margin-bottom:15px;
}

/* 上記をまとめて記述すると次のようになります。 */
#BlogContent ul {
	margin:5px 0 15px 28px;
}


※そのままでは左側に余裕がありませんので、コンテンツ全体を囲む要素や記事本文を囲む要素にも余白が必要だと思います。
以下の記述を試してみて、数値は好みで適当に変更してみてください。

#Outline { width:700px; margin-left:30px; }
#BlogContent { padding:0 10px; }
#BlogContent ul {
	margin:5px 0 15px 28px;
}
id:kaji0245

ビンゴです、#BlogTitle { font-size:24px; margin-bottom:10px; } の記述でばっちりでした。

2014/01/12 22:44:55

その他の回答(0件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512014/01/12 22:18:14ここでベストアンサー

ポイント100pt

「print-css.css」のみ「Complete」テーマの「style.css」の内容をコピーしてテーマフォルダ内に作成し、「print-posts.php」はそのままプラグインのファイルを利用しているのですね?
記事タイトルは、「print-posts.php」で以下のように出力されています。

					<p id="BlogTitle"><?php the_title(); ?></p>



上記で出力されたタイトルの表示を変更したい場合は、「print-css.css」にid「BlogTitle」に対するフォントサイズや余白等、適用させたいスタイルを追加します。

#BlogTitle { font-size:24px; margin-bottom:10px; }

※あるいはプラグインフォルダ内の「print-posts.php」をテーマフォルダ内にコピーして、タイトルを囲むpタグをh1に変更しても大丈夫です。(「Complete」テーマでは、IDやクラス名を使わず、h1要素に直接フォントサイズを指定しています。)


リストマークの表示についてですが、CSSリセットにより余白がすべて無効になっていますので、必要な余白は追加指定する必要があります。
とりあえず以下の記述を追加する事で表示されるようになると思います。

#BlogContent ul {
	margin-left:28px;
}



※左側余白だけでなく、上下の余白も必要な場合は以下のように指定します。

#BlogContent ul {
	margin-top:5px;
	margin-left:28px;
	margin-bottom:15px;
}

/* 上記をまとめて記述すると次のようになります。 */
#BlogContent ul {
	margin:5px 0 15px 28px;
}


※そのままでは左側に余裕がありませんので、コンテンツ全体を囲む要素や記事本文を囲む要素にも余白が必要だと思います。
以下の記述を試してみて、数値は好みで適当に変更してみてください。

#Outline { width:700px; margin-left:30px; }
#BlogContent { padding:0 10px; }
#BlogContent ul {
	margin:5px 0 15px 28px;
}
id:kaji0245

ビンゴです、#BlogTitle { font-size:24px; margin-bottom:10px; } の記述でばっちりでした。

2014/01/12 22:44:55

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

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

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

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

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