全然怪しくない裏TOPはこちら

装飾コード【Gutenberg記事作成用】

編集者用の備忘録ページ。

このサイトの編集で必要な装飾用コードのピックアップと注意事項メモページです。

↓Gutenbergのクラシックブロック内でビジュアルモード扱い。

主に使う装飾(span class)

黄色アンダーラインマーカー
赤色アンダーラインマーカー
青色アンダーラインマーカー

太字
赤字
赤太字
赤アンダーライン

青太字

緑太字

黄色マーカー
赤色マーカー
青色マーカー

編集用に重複表示↓(HTMLとして保存)

ビジュアルエディター上ではコードで見える。
↓Gutenbergのクラシックブロック内でエディターモード扱い。

黄色アンダーラインマーカー
赤色アンダーラインマーカー
青色アンダーラインマーカー

太字
赤字
赤太字
赤アンダーライン

青太字

緑太字

黄色マーカー
赤色マーカー
青色マーカー

装飾作成時の注意

<span>要素はGutenbergのコードエディターモードで挿入し、ビジュアルエディターのブロック内ではマークアップしないようにする。(spanのマークアップできない)

<div>要素はブロック化すると修正成形されてしまうので、使用しない。

・・・ここまでGutenbergのビジュアルエディター。以下はクラシックの旧エディターブロックでメモ作成。個々のブロックを変換しなければコードが書き換え変換されることはない。

※クラシック:+>フォーマット>『クラシック』で呼び出し可能。カスタムHTMLではありません。

・・・ここまでGutenbergのビジュアルエディターの「クラシックの旧エディターブロック」。

以下、旧エディターブロックで作成。

以下、ほぼ全部の装飾パターン

【インライン】

太字
赤字
赤太字
赤アンダーライン

青太字

緑太字
打消し線
キーボードキー

 

【マーカー】

黄色マーカー
赤色マーカー
青色マーカー

 

<実働↓>

黄色アンダーラインマーカー
赤色アンダーラインマーカー
青色アンダーラインマーカー

 

【フォントサイズ】

12px
14px
16px
18px
…48pxまで

 

【ボックス(アイコン)】

補足情報I
補足情報?
補足情報!
補足情報メモ
補足情報コメント
補足情報OK
補足情報NG
補足情報GOOD
補足情報BAD
補足情報プロフィール

 

【ボックス(案内)】

プライマリー濃い水色
サクセス薄い緑
インフォ薄い青
ワーニング薄い黄色
デンジャー薄い赤色

 

【ボックス(白抜き)】

灰色
黄色
赤色
青色
緑色

 

【ボックス(タブ)】

ボックス(チェック)灰色
黄色
赤色
青色
緑色
ボックス(コメント)
ボックス(ポイント)
ボックス(ティップス)
ボックス(ヒント)
ボックス(ピックアップ)
ボックス(ブックマーク)
ボックス(メモ)
ボックス(ダウンロード)
ボックス(ブレイク)
ボックス(アマゾン)
ボックス(OK)
ボックス(NG)
ボックス(BAD)
ボックス(プロフィール)

 

【ボックス(付箋風)】

灰色

黄色:赤色:青色:緑色

【バッジ】

オレンジ

パープル:レッド:ピンク:パープル:ブルー:グリーン:イエロー:ブラウン:グレー

【マイクロコピー】

テキスト上の左側
中央
右側
テキスト下の左側

中央:右側

吹き出し上の左側
中央
吹き出し下の右側

【ボタン】

レッド小

ピンクパープル:ディープパープル:インディゴ

【囲みボタン】

ボタンに同じ

 

【囲みブログカード】

参考記事

あわせて読みたい

詳細はこちら

チェック

ピックアップ

公式サイト

公式サイト

タイトルとURLをコピーしました