カエテンＷＰワードプレステーマ

新エディタ【 Gutenberg グーテンベルク 】の説明です。

 

 

• 1. 新エディタの概要
• 2. 過去記事の注意点【 重要 】
• 3. 新規記事の注意点
• 4. ビジュアルエディタの表示変更

 

 

1. 新エディタの概要

 

新エディタ【 Gutenberg 】は旧エディタとは全く違う仕様になっています。

 

• ブロックという概念があり、記事の要素 ( 段落・画像・リスト・テーブルなど ) はそれぞれのブロックを作成して、ひとつの記事を作ることになる。
• 段落ブロックはテキストと一部のタグのみ入力可能。class 属性の <div>・画像・リストなどのタグは入力不可。想定外のタグがあるとブロック分割を提案される。
• 旧エディタにあった 1 行空ける ( Enter を 2 回入力 ) という概念は段落ブロックには無い。Enter を入力すると次の新しいブロックに移動する。
• クラシックブロックがあり旧エディタと同じ仕様で利用できる。

 

 

 

 

2. 過去記事の注意点【 重要 】

 

過去記事を新エディタで編集したら HTML 構造が変わり表示に不具合が起こる場合がありますので次のことにご注意ください。

 

 

( 1 ) 過去記事は [ クラシック ] ブロックに自動変換されている

 

過去記事は [ クラシック ] という 1 つのブロックに変換されています。

要素別のブロックには分かれていません。

 

 

重要 クラシックブロックの挙動

• 基本的には 旧エディタ と同じ仕様になっている。

• クラシックが 1 つだけある状態で編集すると 1 行空ける <p>&nbsp;</p> の記述を削除する挙動が起こり行間が空かなくなる。未入力の空ブロック ( カスタム HTML など ) がもう 1 つあるとその挙動が起こらない。

• 1 行空ける <p>&nbsp;</p> の記述が連続して 2 個以上あると、次回以降の編集&保存の度に 1 個ずつ削除されて、最終的に 1 個だけ残る。

• div・ul・ol タグの後にある 1 行空ける <p>&nbsp;</p> の記述は、次回以降の編集&保存の度に削除されて、最終的に全て削除される。

• 1 行空けるの記述を div タグで <div>&nbsp;</div> と記述したときは削除されない。

 

 

( 2 ) そのクラシックを「 ブロックへ変換 」することはお勧めしません

 

 

 

( 3 ) 過去記事を編集するとき

 

予期せぬ項目や 1 行空けるの記述が削除されることを鑑みて、過去時事を編集するときは一時的に プラグイン Classic Editor を有効化する方が安全に編集できます。

 

 

元々 1 行空けるの記述をしておらず こちら で説明している <p> タグの余白設定をしているときは、あまり気にせずにそのまま編集できると考えます。ですが、クラシックブロックの挙動には十分注意して編集してください。

 

 

新エディタのままクラシックブロックの編集にチャレンジする場合

 

【 1 】未入力の [ カスタム HTML ] を 1 つ追加する

 

【 2 】 1 行空けるの記述は今後のために div タグの記述に変更する

 

 

 

 

3. 新規記事の注意点

 

 

( 1 ) 行間を 1 行空けるとき

 

設定方法 1

 

1. 1 行空ける場所に [ スペーサー ] を追加する
2. 高度な設定 → 追加 CSS クラスに kaeten と入力する

 

 

• kaeten と入力することで 余白の設定 → ピクセル値での高さ は未反映になります
• 余白の設定 → ピクセル値での高さ の設定だけでも構いませんが style 属性になるため AMP ページでは未反映になり行間が空かなくなります

 

 

設定方法 2

 

1. [ カスタム HTML ] を追加する
2. <p>&nbsp;</p>を直接入力する

 

 

 

( 2 ) テーマ独自の記事装飾パーツを利用するとき

 

設定方法 1

 

1. [ クラシック ] を追加する
2. ツールバー [ スタイル ] [ スタイル 2 ] [ テーブル ] から記事装飾パーツを利用する

 

 

 

設定方法 2

 

1. [ カスタム HTML ] を追加する
2. 記事装飾パーツの記述を直接入力する

 

 

 

設定方法 3：見出し・リスト・テーブルなどの場合

 

1. [ 見出し ] [ リスト ] [ テーブル ] を追加する
2. 高度な設定 → 追加 CSS クラスに クラス名 を入力する

 

 

クラス名とは記事装飾パーツの記述のアンダーラインの箇所のことです。

 

 

 

 

4. ビジュアルエディタの表示変更

 

文字サイズ・文字色・表示幅・記事装飾パーツ色など 管理画面 ＞ 外観 ＞ カスタマイズ で設定したものが 自動 で反映します。

 

 

独自の CSS をビジュアルエディタに反映させるとき

 

• 子テーマの利用が必須です
• 2019/07/23現在で既に子テーマを利用しているときは、子テーマ ZIPファイルを再ダウンロード＆解凍して、次のファイルを子テーマのフォルダにアップロードしてください

  my-editor-style.css

 

次で設定してください。

新規設定や変更後は必ず [ ファイルを更新 ] をしてください。

 

• 管理画面　外観 ＞ テーマエディター ( テーマの編集 )
• 項　　目　my-editor-style.css
• 作　　業　CSS を入力してください