CSS
オリジナルのテンプレート・スタイルシートで企業サイトを作成する場合、管理画面からエディタで入力するコンテンツにはワードプレスのネイティブCSSが適用されるようにしておかなくてはなりません。ワードプレスには固有のCSSクラスがありますのでこれらを復元していきます。
2019年3月25日
オリジナルCSSクラスの復元
まずはワードプレス固有のCSSクラスを復元します。コーデックスを見るとaligncenter、alignleft 、alignright、wp-caption、wp-caption-textの５つのクラスが設定されていることがわかります。マージン値などの細かな設定はエディタの編集画面と実際の表示が同じになるように微調整していきます。サイトのデザインに合わせてアレンジしていってもいいでしょう。
・CSS – WordPress Codex 日本語版
/* ワードプレス固有のCSSクラスの復元 */
.aligncenter { display: block; margin: 0 auto;}
.alignright { float: right; margin: 0 0 10px 20px;}
.alignleft { float: left; margin: 0 20px 10px 0;}
.wp-caption { border: 1px solid #ddd; text-align: left; background-color: #f3f3f3; padding: 5px; border-radius: 3px;}
.wp-caption img { margin: 0; padding: 0; border: 0 none;}
.wp-caption p.wp-caption-text { font-size: 14px; line-height: 1.5; margin: 0; padding: 0;}
reset.cssでリセットしたタグの再定義
次にreset.cssなどでリセットしたタグを再定義します。例えばh1〜h6はreset.cssではfont-size:100%;
となっていますので、これを以下のように設定していきます。strongやemなどもリセットしているのであれば設定する必要があるでしょうし、ulやolなどのpaddingの設定も必要になってくるかと思います。細かな数値はサイトのデザインに合わせてアレンジしていってもいいでしょう。
・HTML5 Reset Stylesheet | HTML5 Doctor
/* reset.cssでリセットしたタグの再定義 */
p { margin: 15px 0;}
strong { font-weight: bold; }
em { font-style: italic; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.6em; }
ul, ol { padding-left: 30px;}
blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px;}
img { height: auto; max-width: 100%;}
これでエディタからの入力も問題なく表示されるかと思います。後は、例えば「お知らせ」をエディタを使用して管理画面から入力するのであれば、お知らせを記述するDIV要素のセレクターに対してだけ今回定義したスタイルが適用されるようにすれば完成です。
<div id="news-post">
・
・お知らせの記述
・
</div>
#news-post .aligncenter { display: block; margin: 0 auto;}
#news-post .alignright { float: right; margin: 0 0 10px 20px;}
#news-post .alignleft { float: left; margin: 0 20px 10px 0;}
・
・
・
以上で「ネイティブCSSの復元」の解説を終わります。
Tweet
