こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
AFFINGER7には、文章を見やすく整理できる「メモ」「マイボックス」「タイトル付きフリーボックス」などの専用ブロックがあります。
この記事では、それぞれの使い方と設定方法、使い分けを解説します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
関連記事 AFFINGER7の基本設定から確認したい場合は、こちらも参考にしてください。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
AFFINGER7のメモ・マイボックス・タイトル付きフリーボックスとは
AFFINGER7には、文章や情報を見やすく整理できる専用ブロックが用意されています。
AFFINGER：メモ
「メモ」は、記事内の補足情報やポイントを目立たせたいときに使えるブロックです。
注意点やちょっとした補足など、本文とは分けて表示したい内容に向いています。
AFFINGER：マイボックス
「マイボックス」は、文章や情報をボックスで囲んで強調できるブロックです。
重要なポイントや読者に伝えたい情報を、通常の本文とは違うデザインで表示できます。
AFFINGER：タイトル付きフリーボックス
「タイトル付きフリーボックス」は、タイトルを付けたボックスの中に文章やコンテンツを表示できるブロックです。
見出しのようなタイトルを付けて、内容を整理したいときに使いやすいブロックです。
「AFFINGER：メモ」の使い方
「AFFINGER：メモ」は、記事内の補足やポイントなどを目立たせたいときに使える専用ブロックです。
「参考」「関連」など、短い文字をアイコン付きで表示する使い方に向いています。公式マニュアルでは、文字数は原則4文字程度を想定しています。
❶「AFFINGER：メモ」の挿入手順
- 投稿（エディター）画面での作業になります。
基本的な「AFFINGER：メモ」ブロックの挿入手順をご紹介します。
投稿（エディター）画面を準備
Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）
「AFFINGER：メモ」ブロックを挿入する箇所をクリックします。
ブロック挿入ツール（ブロックインサーター）を切り替え
『+（ブロックインサーター）』をクリックします。
ブロックタブメニューから『AFFINGER：メモ』を選択
ブロック挿入ツール切り替えアイコンが『 x 』に変わり ブロックタブのメニューが表示されます。
AFFINGERから『AFFINGER：メモ』を選択して投稿（エディター）画面に挿入します。
『AFFINGER：メモ』をクリックします。
「AFFINGER：メモ」 挿入完了
投稿（エディター）画面に「AFFINGER：メモ」ブロックが表示されます。
挿入直後では、以下のように表示されます。
❷ 「AFFINGER：メモ」の設定方法
設定メニューは、投稿（エディター）画面の右側にある「設定 → ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
「AFFINGER：メモ」の設定方法「ブロック」
「ブロック」タブでは、「アイコン」「アイコンサイズ」「アイコンラベル」「枠線」「色」など、メモブロックの表示やデザインを設定できます。
「ブロック」の詳細設定項目
AFFINGER：メモ
アイコン
- ドロップダウンメニューより選択
アイコンクラス
- クラス名を入力してアイコン変更
- SVGタグで入力 → ON / OFF（ラジオボタン切り替え）
アイコンサイズ
- 単位（％）で入力
アイコンラベル
- アイコンラベルの下に表示されるテキストを入力
枠線
- 枠線 → カラーパレットから選択
- 太さ（PX）→ スライダーまたは数値入力で調整
- 丸み（PX）→ スライダーまたは数値入力で調整
色
- アイコン → カラーパレットから選択
- テキスト → カラーパレットから選択
- 背景 → カラーパレットから選択
❸「AFFINGER：メモ」とWordPress標準「メモ」の違いと表示例
- WordPress標準「メモ」：段落（p）スタイル設定
ここでは、「AFFINGER：メモ」とWordPress標準「メモ」の違いと表示例を紹介します。
| 設定オプション（項目） | AFFINGER：メモ | WordPress標準「メモ」 |
|---|---|---|
| アイコン色 | ||
| アイコン（変更） | ||
| アイコンクラス（追加） | ||
| アイコンラベル （テキスト付加） | ||
| アイコンサイズ | ||
| 文字色 | ||
| 背景色 | ||
| ボーダー色・幅 | ||
| ブロック下の余白量 （ブロック全体） | ||
| デフォルトの文字表示 | 100%（16px） | 96%（15.3px） |
AFFINGER：メモ
WordPress標準「メモ」
以下の3つは、同じスタイルで表示しています。
アイコン：メモ
アイコン：ペン
アイコン：ペン
アイコン：チェック
アイコン：チェック
「AFFINGER：メモ」ブロックにラベルを追加しています。
アイコン：リンク
両方をボタン風にカスタマイズしてみました！
アイコンラベル（テキスト）は、アイコンの下に表示されます。◀︎ 全角5文字・半角8文字・半角数字7文字を超えると2行になります。
「AFFINGER7：マイボックス」の使い方
「マイボックス」は、文章や情報をボックスで囲んで目立たせるためのAFFINGER専用ブロックです。
補足情報や重要なポイントなど、本文とは分けて表示したい内容に使えます。
❶「AFFINGER7：マイボックス」の挿入手順
- 投稿（エディター）画面での作業になります。
基本的な「AFFINGER：マイボックス」ブロックの挿入手順をご紹介します。
投稿（エディター）画面を準備
Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）
「AFFINGER：マイボックス」ブロックを挿入する箇所をクリックします。
ブロック挿入ツール（ブロックインサーター）を切り替え
『+（ブロックインサーター）』をクリックします。
ブロックタブメニューから『AFFINGER：マイボックス』を選択
ブロック挿入ツール切り替えアイコンが『 x 』に変わり ブロックタブのメニューが表示されます。
AFFINGERから『AFFINGER：マイボックス』を選択して投稿（エディター）画面に挿入します。
『AFFINGER：マイボックス』をクリックします。
「AFFINGER：マイボックス」 挿入完了
投稿（エディター）画面に「AFFINGER：マイボックス」ブロックが表示されます。
挿入直後では、以下のように表示されます。
❷「AFFINGER7：マイボックス」の設定方法
設定メニューは、投稿（エディター）画面の右側にある「設定 → ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
「AFFINGER：マイボックス」の設定方法「ブロック」
「ブロック」タブでは、「タイトルラベルのアイコン」「アイコンサイズ」「アイコンラベル」「枠線」「色」など、マイボックスブの表示やデザインを設定できます。
「ブロック」の詳細設定項目
AFFINGER：マイボックス
タイトル
- タイトルラベルのアイコン変更
- ドロップダウンメニューより選択
アイコンクラス
- クラス名を入力してアイコン変更
- SVGタグで入力 → ON / OFF（ラジオボタン切り替え）
フォントンサイズ
- 単位（％）で入力
- 内側に入れる → ON / OFF（ラジオボタン切り替え）
- 太字 → ON / OFF（ラジオボタン切り替え）
サイズ
- 上（PX）→ スライダーまたは数値入力で調整
- 右（PX）→ スライダーまたは数値入力で調整
- 下（PX）→ スライダーまたは数値入力で調整
- 左（PX）→ スライダーまたは数値入力で調整
枠線
- 枠線（カラー）→（カラーパレットから選択）
- 太さ（PX）→ スライダーまたは数値入力で調整
- 丸み（PX）→ スライダーまたは数値入力で調整
色
- タイトル → カラーパレットから選択
- タイトルの下線 → カラーパレットから選択
- 背景 → カラーパレットから選択
❸ 「AFFINGER7：マイボックス」の特徴と表示例
ここでは、「AFFINGER7：マイボックス」の特徴と表示例をご紹介します。
| 特徴 | 内容 |
|---|---|
| 背景色・枠線・影が自由に設定できる | オリジナルデザインで囲み枠を作れる |
| 記事内の情報整理がしやすくなる | 読者に伝わりやすいレイアウトを作れる |
| シンプル～リッチなデザインまで対応可能 | 使い方次第で雰囲気をガラッと変えられる |
関連記事 「マイボックス」と「マイブロック」は別の機能です。マイブロックの使い方は、以下の記事で詳しく解説しています。
-
-
AFFINGER7のマイブロックの使い方｜再利用できる便利機能を解説
AFFINGER7のマイブロックの使い方を解説。マイブロックの作成・カテゴリー設定・記事への挿入方法から、パターンやショートコードとの違い、便利な活用方法まで紹介します。
「AFFINGER：タイトル付きフリーボックス」 の使い方
AFFINGER6の「タイトル付きフリーボックス」とは、見出し付きタイトルの表示があり、テキストをボーダー（枠）で囲んだ「ボックス」スタイルです。
❶「AFFINGER：タイトル付きフリーボックス 」の挿入手順
- 作業は 投稿（エディター）画面での作業になります。
基本的な「AFFINGER：タイトル付きフリーボックス 」の挿入手順をご紹介します。
投稿（エディター）画面を準備
Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）
「AFFINGER：タイトル付きフリーボックス 」ブロックを挿入する箇所をクリックします。
ブロック挿入ツールを切り替え
『+（ブロックインサーター）』をクリックします。
ブロックタブメニューから『AFFINGER：タイトル付きフリーボックス』を選択
ブロック挿入ツール切り替えアイコンが『 x 』に変わり ブロックタブのメニューが表示されます。
AFFINGERから『AFFINGER：タイトル付きフリーボックス』を選択して投稿（エディター）画面に挿入します。
『AFFINGER：タイトル付きフリーボックス』をクリックします。
AFFINGER：マイボックス 挿入完了
投稿（エディター）画面に「AFFINGER：マイボックス」ブロックが表示されます。
❷「AFFINGER：タイトル付きフリーボックス」の設定方法
設定メニューは、投稿（エディター）画面の右側にある「設定 → ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
「AFFINGER：タイトル付きフリーボックス」の設定方法「ブロック」
「ブロック」タブでは、「タイトルラベルのアイコン」「アイコンクラス」「」「幅」「枠線」「色」など、タイトル付きフリーボックスの表示やデザインを設定できます。
「ブロック」の詳細設定項目
AFFINGER：タイトル付きフリーボックス
タイトル
- タイトルラベルのアイコン変更
- ドロップダウンメニューより選択
アイコンクラス
- クラス名を入力してアイコン変更
- SVGタグで入力 → ON / OFF（ラジオボタンを切り替え）
- 幅を 100％ にする → ON / OFF（ラジオボタンを切り替え）
- 太字 → ON / OFF（ラジオボタンを切り替え）
枠線
- 枠線（カラー）→ カラーパレットから選択
- 太さ（PX）→ スライダーまたは数値入力で調整
- 丸み（PX）→ スライダーまたは数値入力で調整
色
- タイトル → カラーパレットから選択
- 背景 → カラーパレットから選択
❸「AFFINGER：タイトル付きフリーボックス」 の特徴と表示例
ここでは、「AFFINGER7：タイトル付きフリーボックス」の特徴と表示例をご紹介します。
| 特徴 | 内容 |
|---|---|
| タイトル＋本文を分けて表示 | セクションごとに整理して、読みやすさアップ |
| 背景色や枠線、アイコンのカスタマイズ可能 | 記事のデザインに合わせて自由にアレンジできる |
| 強調したい情報を簡単に目立たせる | 記事内のポイントをピックアップして強調するのに最適 |
タイトルテキスト
デフォルト
WordPress
サンプル
太さ（px）1 ▶︎ 丸み（px）0 ▶︎ 枠線の色（Vivid yellow）
WordPress
サンプル
タイトル：太字『ON』
太さ（px）3 ▶︎ 丸み（px）15 ▶︎ 枠線の色（Vivid yellow）
WordPress
サンプル
タイトル：幅を100％にする『ON』
太さ（px）2 ▶︎ 丸み（px）5 ▶︎ 枠線の色（Vivid yellow）
関連記事 AFFINGER7には、FAQを作成できる専用ブロックもあります。
-
-
AFFINGER7のFAQブロックの使い方｜設定方法と表示カスタマイズを解説
AFFINGER7のFAQブロックの使い方を初心者向けに解説。FAQの追加方法や9種類のスタイル、色・フォントサイズ・HTMLタグ、折りたたみ、構造化データの設定方法を紹介します。
AFFINGER7のメモ・マイボックス・タイトル付きフリーボックスの使い分け
「メモ」「マイボックス」「タイトル付きフリーボックス」は、どれも情報を目立たせるために使えますが、表示方法や用途が異なります。
| ブロック | 主な用途 |
|---|---|
| メモ | 補足や注意点などを簡潔に表示 |
| マイボックス | 文章や情報をボックスで囲んで強調 |
| タイトル付きフリーボックス | タイトルを付けて情報を整理 |
AFFINGER7のブロックカラーを変更する方法
AFFINGER7の「メモ」「マイボックス」「タイトル付きフリーボックス」は、ブロックごとに色を変更できます。
記事のデザインに合わせて、背景色や文字色などを調整できます。
ブロックごとに色を変更する
編集画面で対象のブロックを選択し、右側の「ブロック」タブから色を設定します。
ブロックごとに色を変更できるため、注意点や重要なポイントなど、用途に合わせて見た目を変えられます。
詳しくは、各ブロックの詳細設定項目をご覧ください。（前述）
AFFINGERブロックのデフォルトカラーを設定する
複数のAFFINGERブロックで使用する色をまとめて設定したい場合は、カスタマイザーからデフォルトカラーを変更できます。
サイト全体のデザインに合わせてカラーを設定しておくと、ブロックを追加するたびに色を調整する手間を減らせます。
Menu『WordPress管理画面 → 外観 → カスタマイズ → AFFINGERブロック』をクリックします。
AFFINGERブロック
それぞれの設定画面から、「メモ」「マイボックス」「タイトル付きフリーボックス」のカラーを変更できます。
詳しい設定方法は、ここでは省略します。
AFFINGER7のメモ・マイボックス・フリーボックスに関するFAQ
ここでは、AFFINGER7の「メモ」「マイボックス」「タイトル付きフリーボックス」について、よくある質問をまとめます。
AFFINGER7の「メモ」とWordPress標準のメモは何が違いますか？
AFFINGER専用の「メモ」は、アイコンのサイズやアイコンラベルなどを設定できます。
WordPress標準のメモとは設定できる項目が異なるため、用途に合わせて使い分けられます。マイボックスとタイトル付きフリーボックスの違いは？
「マイボックス」は、文章や情報をボックスで囲んで強調したいときに向いています。
「タイトル付きフリーボックス」は、タイトルを付けて内容を整理したいときに使いやすいブロックです。メモ・マイボックス・タイトル付きフリーボックスの色は変更できますか？
はい。各ブロックの「ブロック」タブから、色やデザインを変更できます。
また、AFFINGER7のカスタマイザーから、AFFINGERブロックのデフォルトカラーを設定することもできます。
まとめ！AFFINGER7の「メモ・マイボックス・タイトル付きフリーボックス」の使い方と設定方法
AFFINGER7の「メモ」「マイボックス」「タイトル付きフリーボックス」は、記事内の情報を見やすく整理できる便利なブロックです。
- メモ：補足や注意点を目立たせる
- マイボックス：文章や情報をボックスで強調する
- タイトル付きフリーボックス：タイトルを付けて情報を整理する
それぞれの特徴を理解して、記事の内容に合わせて使い分けてみてください。
