すてきな気分〜ナイスフィーリングブログ〜

WordPressの投稿画面で設定しておくCSS

お客様が自分で記事を書く場合、ほとんど「ビジュアル」から入力されると思うけど、自動でCSSが書かれるものはまぁ、仕方ないものの、あらかじめclassが付与されるのもあるので、CSSを設定しておく。

都度都度書くのも手間なので、最近はwp.cssなどにまとめて流用している。
リセットCSSにもよるけど、だいたいこんな所かな、と。

.entry p {
  margin: 0 0 20px 0;
  zoom: 1;
}

.entry p strong {
   font-weight: bold;
}

.entry p img.aligncenter {
   display: block;
   margin: auto;
}

.entry p img.alignleft {
   float: left;
   margin: 0 10px 10px 0;
}

.entry p img.alignright {
   float: right;
   margin: 0 0 10px 10px;
}

.entry h1 {
   font-size: 2.4rem;
   font-weight: bold;
   margin: 0 0 20px 0;
}

.entry h2 {
   font-size: 2.2rem;
   font-weight: bold;
   margin: 0 0 20px 0;
}

.entry h3 {
   font-size: 2.0rem;
   font-weight: bold;
   margin: 0 0 20px 0;
}

.entry h4 {
   font-size: 1.8rem;
   font-weight: bold;
   margin: 0 0 20px 0;
}

.entry h5 {
   font-size: 1.6rem;
   font-weight: bold;
   margin: 0 0 20px 0;
}

.entry h6 {
   font-size: 1.4rem;
   font-weight: bold;
   margin: 0 0 20px 0;
}

.entry ul li {
   list-style: disc;
   margin: 5px 0 5px 20px;
}

.entry ol li {
   list-style: decimal;
   margin: 5px 0 5px 20px;
}

/* clearfix */
.entry p:before,
.entry p:after {
   content: "";
   display: table;
}
.entry p:after {
   clear: both;
}

文字の大きさなどはお好みで。
入力画面でレイアウト出来ると思われるのが多いので、なかなか難しい所ではあるけれど、ビジュアルで充てたイメージを出来るだけ再現して、崩れにくく設定しておくのが後々のためにもいいですね。

Pocket

トラックバック

このエントリーのトラックバックURL:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です