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

wordpressのcompleteテーマについて教えてください。固定ページのタイトル表示部分のcss該当箇所を教えてください。print-css.cssでwp-printプラグインから出力しようとしておりますがタイトル部分もコンテンツ部分と同じフォントなので差別化して大きくしたいです。
また<li>中黒が印刷時に非表示になってしまいますが、こちらも良い方法はないでしょうか?

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

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


1 ● rouge_2008
●100ポイント ベストアンサー

「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;
}

kaji0245さんのコメント
ビンゴです、#BlogTitle { font-size:24px; margin-bottom:10px; } の記述でばっちりでした。
関連質問

●質問をもっと探す●



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