スタイル見本

見出しH2サンプル

見出しH3サンプル

見出しH4サンプル

これはデフォルトの段落サンプル。これはデフォルト(この部分は太字)の段落サンプル。これはデフォルトの段落サンプル。これはデフォルトの段落サンプル。これはデフォルトの段落サンプル。

リンクのサンプル

これは右寄せの段落サンプル。これは右寄せの段落サンプル。これは右寄せの段落サンプル。これは右寄せの段落サンプル。

これは左寄せの段落サンプル。これは左寄せの段落サンプル。これは左寄せの段落サンプル。これは左寄せの段落サンプル。

これは中央揃えの段落サンプル。これは中央揃えの段落サンプル。これは中央揃えの段落サンプル。これは中央揃えの段落サンプル。

編集画面での見え方と、公開画面での見え方はイコールではありません。編集画面と公開画面で使っているCSSファイルが違うためで、それはWordPressの仕様です。なぜそうなっているかというと、編集画面に公開画面用のCSSを適用してしまうと、インターフェイスまわりのデザインや振る舞いまで影響されてしまう可能性があるからで、WYSIWYG(What You See Is What You Get)が実現されないことを承知の上で、そのように分離しているのだと思います。なので、レイアウトに凝ったページを作成・編集する場合は、編集画面と公開画面を頻繁に見比べながら、こまめに保存をしつつ作業をすすめるのがよいと思います。

見出しH3 右揃え 追加CSSクラス「mw800」

見出しH3 左揃え 追加CSSクラス「mw800」

見出しH3 中央揃え

文字修飾

 ツールバー

文字色変更のサンプル文字色変更のサンプル文字色変更のサンプル

背景色変更のサンプル背景色変更のサンプル
背景色&文字色変更のサンプル背景色&文字色変更のサンプル

蛍光ペン利用のサンプル

バッジ利用のサンプルバッジ利用のサンプル

文字サイズ特大

文字サイズ中
文字サイズ小
標準文字サイズ

リスト項目

リストブロック
  • リスト項目1 追加CSSクラス「mw500」
  • リスト項目2
  • リスト項目3
  1. リスト項目1 追加CSSクラス「mw500」
  2. リスト項目2
  3. リスト項目3
  1. リスト項目 親1 追加CSSクラス「mw500」
    1. リスト項目 子1
    2. リスト項目 子2
  2. リスト項目 親2
    1. リスト項目 子1

画像の最大サイズの調整(PC)

画像の最大サイズは「高度な設定」の「追加CSSクラス」に mw(Max Width)で始まるCSSクラスを入力することで行います。mwには、500から1200まで100きざみで絶対的なピクセル数を指定できます。
パソコンの大きなスクリーンで見る際には、mw の設定によって画像サイズの差をつけることができますが、スマホの小さいスクリーンの場合は、同じ横幅になってしまいます。スマホ時でも差をつけたい場合は、後述する mwXX-m を併用してください。

ブロックツールメニュー内から「幅広」を選択。「高度な設定」内の「追加CSSクラス」に「mw1200」と入力
ブロックツールメニュー内から「幅広」を選択。「高度な設定」内の「追加CSSクラス」に「mw1100」と入力
ブロックツールメニュー内から「幅広」を選択。「高度な設定」内の「追加CSSクラス」に「mw1000」と入力
ブロックツールメニュー内から「幅広」を選択。「高度な設定」内の「追加CSSクラス」に「mw900」と入力
ブロックツールメニュー内から「幅広」を選択。「高度な設定」内の「追加CSSクラス」に「mw800」と入力
ブロックツールメニュー内から「中央」を選択。「高度な設定」内の「追加CSSクラス」に「mw700」と入力
ブロックツールメニュー内から「中央」を選択。「高度な設定」内の「追加CSSクラス」に「mw600」と入力
ブロックツールメニュー内から「中央」を選択。「高度な設定」内の「追加CSSクラス」に「mw500」と入力

画像の最大サイズの調整(スマホ)

スマホ表示時の画像の最大サイズの調整には、 mw-XX-m (Max Width Mobile)というCSSクラスを使います。XXの部分には、パソコン時のように絶対的なピクセル数ではなく、親要素(多くの場合はスクリーンサイズ)の横幅に対する%の値が入ります。XXは、30から100まで、10刻みの数字を割り当てることができます。
mw と mw-XX-m は併用できるので、「パソコンの時の最大幅600ピクセル、スマホ時の最大横幅70%」というような設定が可能です。

mw1000 と mw90-m の併用
mw600 と mw70-m の併用