ワードプレスの設定が必須のCSSまとめ

ワードプレスの更新時にBとかIとかマークがありますが、それらはCSSの設定が必須ですね。

必須しなきゃいけないCSSをまとめておきます。

必須CSS

b, strong, i, em, blockquote, del, .alignleft, .aligncenter, .alignright

この辺りは必須ですね！

おすすめCSS

b,
strong {
  font-weight: bold
}

i,
em {
  font-style: italic
}

blockquote {
  padding: 8px;
  background: #eee;
}

ul {
  list-style: disc inside;
}

ol {
  list-style: decimal inside;
}

del {
  text-decoration: line-through
}

img {
  margin-bottom: 8px;
  max-width: 100%;
  height: auto;
}

.alignleft {
  margin-right: 8px;
  float: left;
}

.aligncenter {
  margin: 0 auto 8px;
  text-align: center;
  display: block;
}

.alignright {
  margin-left: 8px;
  float: right;
}

基本的にスマホサイトを想定しているので、メディアクエリでPC対応してあげると良いでしょう！

アプリから更新時のサンプル

「B」を使った時

ダミーテキスト

「I」を使った時

ダミーテキスト

「”」（引用）を使った時

ダミーテキスト

リストを使った時

• ダミーテキスト
• ダミーテキスト

番号付きリストを使った時

1. ダミーテキスト
2. ダミーテキスト

リンクを使った時

ダミーテキスト

管理画面からの更新時

「B」を使った時

ダミーテキスト

「I」を使った時

ダミーテキスト

打ち消し線を使った時

ダミーテキスト

リストを使った時

• ダミーテキスト
• ダミーテキスト

番号付きリストを使った時

1. ダミーテキスト
2. ダミーテキスト

「”」引用を使った時

ダミーテキスト

「−」（罫線）を使った時

左寄せを使った時

ダミーテキスト

中央寄せを使った時

ダミーテキスト

右寄せを使った時

ダミーテキスト

リンクを使った時

ダミーテキスト

下線を使った時

ダミーテキスト

両端揃えを使った時

ダミーテキスト

インデントを使った時

ダミーテキスト

画像（配置：なし）

ダミーテキスト

画像（配置：左）

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキスト

ダミーテキストダミーテキスト

画像（配置：中央）

ダミーテキストダミーテキスト

画像（配置：右）

ダミーテキストダミーテキストダミーテキスト