ブロックエディタ

ブロックエディタの使い方【テキスト、段落編】

AFFINGER6ブロックエディタ段落ブロックの使い方

このシリーズではブログ初心者の人に向けてブロックエディタの使い方を紹介しています。ブロックエディタをまだ使ったことがない人は参考にしてください!

今回は「段落 (p)」と「テキスト」についての解説です。つまり " 本文 " に関する解説ですね。まず最初に「段落の使い方のルール」をまとめました。初心者の人は見てください ( すでに知ってる人は飛ばして大丈夫です )。次に呼び出し方からスタイルの適用まで、段落ブロックの使い方手順を説明します。最後に段落とテキストのスタイル一覧を載せています。

段落とは?使い方のルール

段落とは?内容ごとに区切る。多めにキーワードを使う。強調したい文章は太字にする。

ブログの主役!本文について理解しましょう。

ブログはどちらかというと日本語より英語の文章に似ています。英語の文章を思い浮かべてください。内容のまとまりごとに「段落(パラグラフ)」に分かれていますね。ブログも同じです。内容まとまりごとに「段落(パラグラフ)」で分けます。ブログでは「段落(パラグラフ)」のことをparaguraphの頭文字を取ってPと表現します。

そしてその「段落」を構成するのが「テキスト」です。「テキストのまとまりが段落」と覚えてください。

ブロックエディタで本文を書くときはこの2つを理解するところから始めましょう。

ブログでは「段落 ( パラグラフ )」のことを paraguraph の頭文字を取って P と表現します。

【ルール1】段落は内容ごとにまとめる!

先ほども言ったように内容のまとまりで段落を分けます。一文ごとに段落を変えるのはあまりおすすめしません。

【ルール2】「キーワード出現率」を意識する!

文章を書くときの基本は自然な文章を書くことですが、それにちょっとプラスして「キーワード出現率」を意識しましょう。文章の中にキーワードを多めに散りばめるのです。どれくらいかというと、普通に人間向けに書く文章よりちょっと多めにする程度です。やり過ぎてしまうとペナルティを受けるので注意が必要です。あくまで自然体な文章を心がけます。

【ルール3】強調したい文章は「太字」で!

強調したい文章や文字には「太字 ( ストロングタグ )」を使いましょう。テキストを装飾する方法はたくさんあります ( 下の一覧参照 ) が「太字 ( ストロングタグ )」は他の装飾と違いSEO に影響するタグです。ちょっと地味ですがまず最初に「太字」を使えるようになりましょう。

AFFINGER6のブロックエディタ段落ブロックの使い方

それではブロックエディタで文章を書く練習をしてみましょう。

まだ文字の大きさや色のデザイン設定をしていない人はこの記事で紹介しています。→"サイト全体のデザインを設定する/段落(P)のデザインを決める"

AFFINGER6でブロックエディタを使うには専用のブロックエディタプラグインが必要なのでまだインストールしていない人はインストールをお忘れなく。

段落ブロックの呼び出し方

まずは、段落ブロックを呼び出します。呼び出し方はとても簡単です!中央の作業パネルの文章を入力、または / でブロックを選択という部分をクリックするだけです。すると文章を入力することが可能になります。

もしくは、ブロックを追加(プラスマーク)で左のパネルを展開→段落ブロックを追加でも大丈夫です。

AFFINGER6ブロックエディタの使い方(段落ブロックの呼び出し方)

テキストを入力

AFFINGER6ブロックエディタの使い方(本文を入力。内容ごとに新しい段落を追加。)キーワードを意識することを忘れずに。

段落ブロックを追加したら本文を書いていきましょう。上で紹介したようにキーワードを意識して文を書いていきます。

内容が一区切りついたらリターンキーを押して新しい段落ブロックを追加していきましょう。

テキストを装飾

AFFINGER6ブロックエディタの使い方(テキストの装飾は上のバーで行う)

テキストが入力できたらそのテキストを装飾をしてみましょう。

テキストの装飾はテキストの上にある横長の「ツールバー」で行います。試しに太字<strong>タグを適用してみましょう。太文字にしたいテキストを選択して反転させてください。その後、ツールバーのBボタンを押します。すると文字が太文字になります。

太文字以外にもマーカーや大文字などいろんな装飾ができます。ツールバーの下ボタンを押してください。全ての装飾が出てくるので好みの装飾を探してください。すべての装飾は下で紹介しているので参考にしてください。

AFFINGER6のブロックエディタで使えるテキストのスタイル一覧

段落を装飾(背景色、会話文)

段落を装飾(メモ)
段落を装飾(会話文)

今度は段落全体にデザインを施してみましょう。背景を色付きにしたり会話文にしたりすることができます。

AFFINGER6ブロックエディタの使い方(段落の装飾の仕方)

やり方はまず、中央の編集画面でデザインを施したい段落を選択 ( クリック ) します。次に右上にある( 歯車マーク ) を押して右のパネルを展開します。パネルをブロックパネルに切り替えましょう。すると段落のスタイル一覧がでてきます。ここから好きなデザインを選びます。

メモを適用してみる

メモのデザインを施した例
メモのデザインを施した例

試しに"メモ"のデザインを設定してみましょう。一覧から " メモ " のスタイルを選択します。すると段落に"メモ" のデザインが適用されました。

すべての装飾のリストは下で紹介しています。参考にしてください。

AFFINGER6のブロックエディタで使える段落のスタイル一覧

会話文を適用してみる

会話文のデザインを施した例
会話文のデザインを施した例

今度は会話文を使ってみましょう。

会話文は使う前にアイコンを設定する必要があります。こちらで設定しましょう。

【ダッシュボード】→【AFFINGER管理】 → 【会話アイコン】

アップロードボタンを押して会話アイコンをアップロードします。

アップロード後、再びスタイル設定画面に戻ってくると簡易会話Aにアップロードしたアイコンが反映されているはずです。(表示されない場合はGutenberg設定で有効化されているか確認してください。下の補足参照。)

段落を選択した上で簡易会話Aを押すと段落が会話文に変わります。

"簡易会話"で使える会話文は2つまでです。それ以上使う場合は会話ブロックを使用します。

すべてのスタイルを使えるようにするには

初期状態では段落スタイルは一部のスタイルしか使うことができません。全てのスタイルを使えるようにするには個別に有効化する必要があります。設定はGutenberg設定でできます。

【ダッシュボード】→【AFFINGER管理】 → 【Gutenberg設定】> "段落ブロック"

AFFINGER6ブロックエディタの使い方。すべての段落スタイルを使えるようにするには設定で個別に有効化する。

使いたいスタイルのチェックを外します。反対に使わないスタイルにはチェックをして無効化しましょう。


こんな感じで作業を繰り返し本文を完成させましょう!

AFFINGER6のブロックエディタで使えるテキストのスタイル一覧

AFFINGER6のブロックエディタ(テキスト装飾一覧)
AFFINGER6ブロックエディタのテキストスタイル(普通のテキスト)
普通のテキスト
AFFINGER6ブロックエディタのテキストスタイル(太字)
太字(strong):文字が太くなります
AFFINGER6ブロックエディタのテキストスタイル(イタリック)
イタリック:文字が斜体になります
AFFINGER6ブロックエディタのテキストスタイル(オレンジ)
[オレンジ]:文の頭につけて注意を引きます
AFFINGER6ブロックエディタのテキストスタイル(赤)
[赤]:同上
AFFINGER6ブロックエディタのテキストスタイル(インラインコード)
インラインコード:文中にコードを挿入する
AFFINGER6ブロックエディタのテキストスタイル(インライン画像)
インライン画像:文中に画像を挿入する
AFFINGER6ブロックエディタのテキストスタイル(キーボード入力)
キーボード入力:キーボードで入力した感じの表現
AFFINGER6ブロックエディタのテキストスタイル(ソースコード風)
ソースコード風:ソースコード風の表現(コード以外に使うとよい)
AFFINGER6ブロックエディタのテキストスタイル(上付き)
上付き:文字の上に小文字
AFFINGER6ブロックエディタのテキストスタイル(下付き)
下付き:文字の下に小文字
AFFINGER6ブロックエディタのテキストスタイル(取り消し線)
取り消し線:打ち消すときに
AFFINGER6ブロックエディタのテキストスタイル(ドット線)
ドット線:文字下に点線
AFFINGER6ブロックエディタのテキストスタイル(マイ細マーカーA,B)
マイ細マーカーA,B:マーカー線。色は変更可能
AFFINGER6ブロックエディタのテキストスタイル(太字と太字(赤))
太字と太字(赤):太字(SEOに影響しない)
AFFINGER6ブロックエディタのテキストスタイル(文字サイズ(大))
文字サイズ(大):大サイズの文字
AFFINGER6ブロックエディタのテキストスタイル(文字サイズ(小))
文字サイズ(小):小サイズの文字

AFFINGER6のブロックエディタで使える段落(p)のスタイル一覧

AFFINGER6ブロックエディタの段落スタイル(メモ)
メモ
AFFINGER6ブロックエディタの段落スタイル(リンク)
リンク
AFFINGER6ブロックエディタの段落スタイル(チェック)
チェック
AFFINGER6ブロックエディタの段落スタイル(ポイント)
ポイント
AFFINGER6ブロックエディタの段落スタイル(インフォ)
インフォ
AFFINGER6ブロックエディタの段落スタイル(注意)
注意
AFFINGER6ブロックエディタの段落スタイル(注意(グレー))
注意(グレー)
AFFINGER6ブロックエディタの段落スタイル(初心者)
初心者
AFFINGER6ブロックエディタの段落スタイル(マル)
マル
AFFINGER6ブロックエディタの段落スタイル(バツ)
バツ
AFFINGER6ブロックエディタの段落スタイル(Like)
Like
AFFINGER6ブロックエディタの段落スタイル(Bad)
Bad
AFFINGER6ブロックエディタの段落スタイル(Code)
Code
AFFINGER6ブロックエディタの段落スタイル(付箋)
付箋
AFFINGER6ブロックエディタの段落スタイル(囲みドット)
囲みドット
AFFINGER6ブロックエディタの段落スタイル(ふきだし)
ふきだし
AFFINGER6ブロックエディタの段落スタイル(まるもじ)
まるもじ
AFFINGER6ブロックエディタの段落スタイル(簡易ボタン)
簡易ボタン
AFFINGER6ブロックエディタの段落スタイル(簡易会話)
簡易会話

※初期状態では一部のスタイルしか表示されません。全てのスタイルを表示するには個別に有効化する必要があります。Gutenberg設定で設定します。使いたいスタイルのチェックを外します。反対に使わないスタイルにはチェックをして無効化しましょう。【ダッシュボード】→【AFFINGER管理】 → 【Gutenberg設定】> "段落ブロック"

-ブロックエディタ