MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

【AFFINGER6ブロックエディタ使い方1】見出し、段落、リスト、グループ

この記事では、AFFINGER6エディタの使い方の1回目として、下記のブロックを紹介します。

  • 見出し
  • 段落
  • リスト
  • グループ

他のテーマにはないAFFINGER6独自の使い方もご紹介します。AFFINGER6のブロックエディタを使う前にぜひ知っておいてください!

AFFINGER6独自の便利な使い方がいっぱい、知らなきゃ損!

目次

見出し|AFFINGER6ブロックエディタ

AFFINGER6の「見出し」ブロックには、以下の設定があります。

AFFINGER6の「見出し」ブロック設定画面

「見出し」は、htmlでは「h2」「h3」などのタグに当たります。

通常「h2」「h3」などには事前に設定した装飾がありますが、その他にも、臨機応変に以下のような装飾を選ぶことができます。

AFFINGER6の「見出し」ブロック装飾サンプル

例えば、同じ「h2」タグでも、番号付けしたい場合や、ランキング形式にしたい場合などは、その都度異なる装飾を選ぶことができます。

見出しのカウントを1に戻す方法

見出しブロックで番号付きの装飾を使用していると、数字が連番になってしまい、①に戻したい時があります。

そのような場合は、次の方法で番号を修正します。

AFFINGER6の「見出し」ブロック、カウントを1に戻す方法
  1. 数字を1に戻したい行にカーソルを置きます。
  2. 右の設定画面で [高度な設定]を開きます。
  3. [追加CSSクラス] で、現在ある文字列の後に「半角スペース」を空けて、次の値を入力します。

カウント 装飾を選択した場合、

st-heading-count-reset

ステップ 装飾を選択した場合、

st-step-reset
AFFINGER6の「見出し」ブロック、CSSクラスの種類

覚えておくと便利です

段落|AFFINGER6ブロックエディタ

「段落」ブロックには、以下の設定があります(Gutenberg設定ですべての「スタイル」を表示した状態)。

AFFINGER6の「段落」ブロック、設定画面

「段落」ブロックでは、通常の文章の記述はもちろんのこと、外枠や画像を用いた装飾まで、幅広い表現に用いることができます。

「段落」ブロックでは、他のブロックと組み合わせなくても、アイコンや枠線などを入れる設定が備えられています。

文字だけの「ふきだし」や、「簡易会話」でキャラクター入りの会話を作ることもできます。

「ブロック下の余白」を自由に設定できるため、ふきだしアイコンを使った装飾で「他のブロックに近づけたい」ときなどに便利です。

リスト|AFFINGER6ブロックエディタ

「リスト」ブロックには、以下のような設定があります。

AFFINGER6の「リスト」ブロック、設定画面

単純なビュレット型のリストや、チェックマークのついたリスト、数字のリスト、タイムライン型のリストなどがあります。

他のブロックと組み合わせなくても、「ボーダー設定」で外枠を作成することもできます。

グループ|AFFINGER6ブロックエディタ

「グループ」ブロックは、必ず「他のブロックと共に」使用します。単独では使用できません。

グループブロックは、以下の目的で使用します。

  • 複数のブロックがバラバラにならないようにまとめる
  • 外枠や背景をつける
  • デバイス制限(PCのみ表示/スマホのみ表示)を設定
  • ブロック下の余白を調整する

以下は「グループ」ブロックの装飾です。

特に便利なのは、「デバイス制限」と「ブロック下の余白」の設定です。

PCやスマホで自由な表現を行うのに大変便利です。

よかったらシェアしてね!
目次
閉じる