こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6の「段落ブロックの使い方」を初心者さん向けに解説します。
今回の記事では…
「そんなの知ってるよ！」という方は…おもっきり飛ばして下さい。（笑）
筆者がブログを始めたときは、なんと！「段落を分けずに改行？？なんのこと？」こんな感じからスタートしたので きっと今回ご紹介する「超基本的な段落の操作方法やルール・ツールの使い方」が…誰かの役に立つ！！と思いつつご紹介します。
それではご覧ください！
＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
段落とは？
段落とは Pタグとも言われ、 英語で段落を意味する"paragraph"（パラグラフ）の頭文字をとったHTMLのタグのことです。文章のまとまりを区切ったものが段落ということは言うまでもありませんが、web制作においても同様です。
HTMLでの段落は、<p>～</p>で囲まれたテキストが 1つの段落であることを示します。一般的なブラウザの場合、<p>～</p>の前後で1行分改行されます。
段落作成時の注意点
段落を作る時に注意すべき点は…
- 段落は内容ごとにまとめる
- 自然な形でキーワードを入れるように意識する
- 1つの段落に同じキーワードは3以上入れない！2つがベスト（数値は 目安なので絶対条件ではありません）
- 文章の流れを優先する！文面が崩れるようならキーワードを入れない！
- 強調したい部分は太文字にする（※ 注意事項あり）
- 強調したい部分には太字 ( ストロングタグ )を使う（使用頻度が多いとマイナス効果となります）
AFFINGER６の場合書式設定で太字（ストロングとは別）表現と併用すると良いかと…詳細は後述します。
- 強調したい部分には太字 ( ストロングタグ )を使う（使用頻度が多いとマイナス効果となります）
通常の文章に加えて上の3項目を意識しながら段落を作りましょう。
※ 検索されるために有効な好条件になります。
段落ブロックの使い方
この章では、段落ブロックの使い方をご紹介します。
基本的な記事への段落ブロックの挿入手順や装飾等を4つのセクションに分けてご紹介します。
それでは順番に見ていきましょう。
段落ブロックの挿入手順
※ 作業は投稿画面（記事編集画面）での作業になります。
投稿画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください）
段落ブロックを挿入する箇所（直前のブロック）をクリックします。
（直前のブロックが段落ブロックの場合、カーソルが表示された後にブロックとして挿入されます。）
ブロック挿入ツール『+』を切り替えてブロックタブメニューを開きます。
『+』をクリックします。
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
ブロックタブのテキストから『段落』を選択して投稿画面に設置します。
『段落』をクリックします。
段落をクリックすると「ブロックを選択するには「/」を入力」と薄く表示されます。投稿を新規追加した場合は、以下の画面のようにブロックタブメニューの『段落』を選択しなくても、「ブロックを選択するには「/」を入力」と表示されているので、文字を書き始めてください。
『ブロックを選択するには「/」を入力』の領域をの領域をクリックします。
段落を投稿（記事編集）画面に挿入する準備ができました。
テキストを入力▶︎段落と文章
初めのうちは難しく考えしすぎない方が良いですね。文章を自然に作文すればいいかと…
意識すべき点は…
- キーワード：単語に着目して文章を書くと言うこと！
- 文章：内容ごとに改行して段落とすること！
少し慣れが必要だけど数をこなしていけば！自然に身につくよ！
慣れてきたら1つの段落にキーワードは2個がいいとか…たくさん入れすぎると良くないとか…進んで行けば良いと思うなぁ。
とにかく意識しながら書くこと！臨機応変に記事を書き進めることが大切！！考えすぎておかしな文章になったり書けなくなったりが！一番マイナスです。
いまだに身につかない筆者ですが…（笑）
「こう書け・あー書けの正解はないと思います」文才はピンキリ！！だと考えているので…ただ基本ルールはありますよ。^^;
段落作成時の注意点を参考に作文してみてください。
基本的な記事の書き方について以下の記事で詳しくご紹介しています。是非ご覧ください。
-
-
WordPress！ブログ初心者が知っておきたい基本的な記事の書き方
WordPressを使ったブログ記事の基本的な書き方をブログ初心者向けに解説。記事の構成を図解でわかりやすく解説。文頭のNGワードや見出しタグの書き方など初心者がわかりずらいポイントを押さえ、基本的なWordPressブログの書き方をまとめてご紹介します。
段落のサンプル
投稿画面で段落を作るときのイメージです。
文章のサンプル
投稿画面で文章を作るときのイメージです。（1つの段落中に文章が2つ含まれています）
段落と文章の2つを組み合わせながら記事を作っていくよ。^^／ イメージできればOK！
テキストの装飾
テキストの装飾とは、文章中の任意の部分（ドラッグして選択したテキスト）のみを装飾すると言うことです。
このように装飾できる機能がツールバーにはたくさんあります。
「段落ツールバーの概要」から解説していきますね。
全て覚えようとするのではなく便利なものを少しづつ使っていくと良いかと…
段落ツールバーの概要
ツールバー概要の各メニューと表示イメージを❶〜❼に分けてご紹介します。
❶〜❼を順番に見ていきましょう。
❶ ツールバーメニュー：太字（ストロング）
太字（ストロング）→ 太字（ストロング）
❷ ツールバーメニュー：イタリック
イタリック → イタリック
❸ ツールバードロップダウンメニュー：書式
太字：太字
太字（赤）：太字（赤）
マイマーカーA：マイ細マーカーA
マイマーカーB：マイ細マーカーB
ソースコード風：ソースコード風
ドット戦：ドット線
【赤】：[赤]
【オレンジ】：[オレンジ]
文字サイズ（小）：文字サイズ（小）
文字サイズ（大）：文字サイズ（大）
※ このメニューでの太字装飾は、AFFINGER6テーマ独特のものでツールバー概要❶のストロングとは別扱いになります。（SEOに影響しません）◀︎ 太字を頻繁に使う場合はこちらを使用しましょう。
ツールバー概要❶のストロングは、検索されるワードを意識して 重要なテキストのみに使うようにしましょう。（SEOに影響します)
❹ ツールバードロップダウンメニュー：コード
二重丸：[st-i class="st-svg-circle-w" add_style="" /] →
マル：[st-i class="st-svg-circle-o" add_style="" /] →
バツ：[st-i class="st-svg-times" add_style="" /] →
三角：[st-i class="st-svg-triangle" add_style="" /] →
下矢印：[st-i class="st-svg-arrow" add_style="" /] →
スター（5）：[star5 /] →
スター（4.5）：[star45 /] →
スター（4）：[star4 /] →
スター（3.5）：[star35 /] →
スター（3）：[star3 /] →
スター（2）：[star2 /] →
スター（1）：[star1 /] →
PCのみ改行：[st-br-pc /]
スマホのみ改行：[st-br /]
オリジナルショートコード：[originalsc /]
Adsense：[adsense /] → スポンサーリンク
※ メニューをクリックするとワンタッチでショートコードが挿入できます。
-
-
AFFINGER6 段落ブロックから「 / 」で簡単に他のブロックを挿入する方法【記事がすらすら書けちゃうテクニック】
AFFINGER6で段落ブロックから「ブロック挿入ツールを使わず」直接ブロックを呼び出して挿入する方法をご紹介。記事が爆速ですらすら書けちゃうテクニックです！！ブロック挿入ツールを切り替えるのが面倒という方必見です。ブロックを呼び出すキーワード一覧画像添付付きです！
❺ ツールバーメニュー：書式をクリア
選択した部分の書式をクリアしてデフォルトに戻します。
❻ ツールバードロップダウンメニュー：リンク
- 選択したテキストにリンクを貼ることができます。
- リンク表示のタブ指示が選択できます。
❼ ツールバードロップダウンメニュー：さらに表示
インラインコード：インラインコード
インライン画像：
キーボード入力 ： キーボード入力
ハイライト：ハイライト（選択部分の色変更）
マーク：マーク
上付き：上付き
下付き：下付き
打ち消し線 ：打ち消し線
書式設定をクリア（ツールバー概要❺と同等）
段落（段落ブロック）の装飾▶︎背景・会話文
段落とは、前述しましたが…
もう一度 イメージしやすく簡単に説明すると！
テキスト（文字・単語・画像を含む）の集合体 → 文章 → 文章の集合体 → 段落
段落を区切るために「enter：改行」を押します。
『AFFINGER6専用の STINGER「メモ・マイボックス・見出し付きフリーボックス」の使い方』等を以下の記事でご紹介しています。もっとおしゃれに！装飾したい方は是非ご覧ください。
-
-
AFFINGER6「メモ・マイボックス・タイトル付きフリーボックス」の使い方
AFFINGER6の標準メニューから「記事にメリハリをつける装飾！」ボックススタイルの3種類 ▶︎ STINGER「メモ・マイボックス・見出し付きフリーボックス」の表示イメージと使い方をご紹介。初心者向けに丁寧に画像付きで！イメージしやすく解説。
それでは、段落の装飾について解説していきますね。
段落の装飾は、エディター画面の右上側にある『設定』から行います。
投稿（記事編集）画面で、装飾する段落をクリックします。
投稿（記事編集）画面の右側に以下の画面が表示されていない場合は以下を参考にしてください。
『ブロック』タブメニュー
投稿（記事編集）画面の右側に左画面のような『設定』メニューが表示されている状態にします。
（設定をクリックするとメニューが表示されます）
『ブロック』タブをクリックします。
Settings：段落の設定
Settingsタブメニューとドロップダウンメニューの概要をご紹介します。
『ブロック＞Settings』タブメニュー
アイコン
- ワンタッチでアイコンが挿入できます。
※ ドロップダウンメニューより選択
※ Stylesの「ふきだし・まるもじ・簡易ボタン」のみに有効です。（デフォルトでは無効）
アイコンコードを直接入力することでデフォルトスタイルにアイコンを表示させる事ができます。
詳しくはこちらの記事で！
枠線
- 枠線がワンタッチで付加できます。
※ ドロップダウンメニューより選択
ブロック下の余白
- 『-大・-小・0・固・大』を選択
高度な設定
- HTML アンカーが設定できます。
- 追加 CSS クラスが設定できます。
※ 『高度な設定：HTML アンカー・追加 CSS クラス』の設定は、中級の為 割愛します。
『ブロック下の余白』について以下の記事で詳しく御紹介しています。余白を細かく設定したい方は是非ご覧ください。
-
-
AFFINGER6 カスタマイズ！段落(Pタグ)下の余白と行間・他要素との間隔調整方法
AFFINGER6の初心者向け！フォントのサイズと行間の設定方法と段落（Pタグ）下の余白の設定方法など記事の文章を綺麗に表現するために必要な設定方法をご紹介。「スペーサーブロックの乱用防止・Gutenberg 設定のグループブロック」についても解説。記事における文章表現をほぼ解決できます。
Styles：段落のスタイル設定
Stylesタブメニューとスタイル一覧をご紹介します。
『ブロック＞Styles』タブメニュー
スタイル一覧
デフォルト
カスタム
メモ
リンク
チェック
ポイント
インフォ
初心者
注意
注意（グレー）
マル
バツ
Like
Bad
Code
付箋（Settings：アイコンは無効）
囲みドット（Settings：アイコンは無効）
色：テキスト全体の色と背景
※ スタイル一覧の配色は一部デフォルト設定と異なります。
『Gutenberg 設定』について以下の記事で詳しくご紹介しています。スタイルのデフォルト設定を変更したい方は、是非ご覧ください。
-
-
AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法「使いやすい・見やすい・捗る」設定ポイント！
AFFINGER6で「記事をすらすら書きたい！書きやすくしたい！」等、効率を上げるためには不可欠な設定！！Gutenberg用プラグイン2の設定方法をご紹介。投稿画面を「見やすく！・わかりやすく！」設定するポイントを初心者向けにご紹介します。
＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
まとめ！AFFINGER6 段落ブロックの使い方！【トップツールバーのブロック・文章ツールも併せて解説】
記事を書く上で基盤となる『段落（Pタグ）ブロック』の使い方をご紹介しました。「段落・文章・画像」の表現の幅が広がり、より良いものになると思います。上手に段落ブロックを使うために この記事が役立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
