こんにちは "osaboo"です。"@osaboo_Bot"

『AFFINGER:メモ』『AFFINGER:マイボックス』『AFFINGER:タイトル付きフリーボックス』の使い方を詳しく知りたい。
『AFFINGER:メモ』って「段落(p)のスタイルと違うの?
\\ このような「疑問を解決する」お手伝いをします!//
記事の表現が豊かになるんで…使い方をマスターしておこう。^^

今回の記事では…
『AFFINGER:メモ』『AFFINGER:マイボックス』『AFFINGER:タイトル付きフリーボックス』の使い方をご紹介します。
それではご覧ください。
\初心者でも安心!コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
AFFINGER:メモ
この章では、『AFFINGER:メモ』の表示と使い方をご紹介します。
「AFFINGER:メモ」とは、左側にアイコンと仕切りバーが表示され、右側に入力テキストが表示される 「ボックス」スタイルです。
このタイプの表示は、『段落(p)』でも スタイルを選択すると表示できます。
以下の表のように変更可能な設定オプションに違いがあります。
設定オプション(項目) | AFFINGER:メモ(ボックス) | 段落(p)(ボックス) |
---|---|---|
アイコン色 | ○ | ○ |
アイコン種類 | ○ | ○ |
アイコン下にテキスト付加 | ○ | × |
アイコンクラス | ○ | × |
アイコンサイズ | ○ | × |
文字色 | ○ | ○ |
背景色 | ○ | ○ |
ボーダー色 | ○ | ○ |
文字表示(デフォルト時) | 100% | 90% |
アイコンやアイコンクラスについて詳しく知りたい方はこちらからご覧ください!
AFFINGER:メモ(表示)
アイコン:メモ(デフォルト)
アイコン:ペン
アイコン:チェック(v)
アイコン:虫メガネ
アイコン:リンク
『段落(p)』でも「ボックス」スタイルを選択できます。(テキストの大きさは、自動で縮小され 90%で表示されます。)
段落(p):メモ
『AFFINGER:メモ』(テキストの大きさは、デフォルトの大きさで 100%で表示されます。)
AFFINGER:メモ
AFFINGER:メモ(使い方)
「AFFINGER:メモ」を呼び出します。
『+』をクリックします。

『AFFINGER:メモ』をクリックします。

以下のメモブロックが表示されます。

「AFFINGER:メモ」を編集します。
『』をクリックします。

(ブロックタブメニュー)AFFINGER:メモの『アイコン設定・色設定』を行います。

※ 右側のタブメニューの❶〜❽の項目ををクリックすると上画面のピックアップメニューが表示されます。
補足
❸ テキストは、アイコンの下に表示されます。◀︎ 全角5文字・半角9文字を超えると2行になります。
❹ アイコンクラスのクラス名がよくわからない場合は、『こちら』の記事で詳しく解説しています。

次に、変更例のサンプルを紹介するよ。^^ 変更画面はこんな感じ!
サンプル:「WordPress」アイコンとテキストを150%の大きさで赤色表示の設定です。

※ 設定時の参考にしてください。
以上で「AFFINGER:メモ」の設定は完了です。◀︎ 設定範囲が広がりますが…やり過ぎに注意しましょう。
\初心者でも安心!コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
AFFINGER:マイボックス
この章では、『AFFINGER:マイボックス』の表示と使い方をご紹介します。
「AFFINGER:マイボックス」とは、タイトルの表示があり、テキストをボーダー(枠)で囲んだ「ボックス」スタイルです。
AFFINGER:マイボックス(表示)
AFFINGER:マイボックス(使い方)
「AFFINGER:マイボックス」を呼び出します。
『+』をクリックします。

『AFFINGER:マイボックス』をクリックします。

以下のマイブロックが表示されます。

「AFFINGER:マイブロック」を編集します。
『』をクリックします。

以下の画面は、右側のブロックタブメニューを3分割で表示しています。
(ブロックタブメニュー)AFFINGER:マイボックスの『タイトル設定・ボーダー設定・色設定』を行います。



※ ピックアップメニューの「アイコン設定と色設定」は「AFFINGER:メモ」と同等です。
ご覧いただくには▶︎(参照)
『内側に入れる』をONにすると以下のように表示されます。

※ タイトルを未記入にすると枠のみ表示になります。
以上で「AFFINGER:マイボックス」の設定は完了です。◀︎ お好みで自由に設定してください。
AFFINGER:見見出し付きフリーボックス
この章では、『AFFINGER:見見出し付きフリーボックス』の表示と使い方をご紹介します。
「AFFINGER:見見出し付きフリーボックス」とは、見出し付きタイトルの表示があり、テキストをボーダー(枠)で囲んだ「ボックス」スタイルです。
AFFINGER:見出し付きフリーボックス(表示)
見出しテキスト
デフォルト
WordPress
サンプル
太さ(px)1 ▶︎ 丸み(px)0 ▶︎ ボーダーの色(薄いオレンジ)
WordPress
サンプル
太さ(px)3 ▶︎ 丸み(px)15 ▶︎ ボーダーの色(薄いオレンジ)
WordPress
サンプル
太さ(px)2 ▶︎ 丸み(px)5 ▶︎ ボーダーの色(薄いオレンジ)
AFFINGER:タイトル付きフリーボックス(使い方)
「AFFINGER:見出し付きフリーボックス」を呼び出します。
『+』をクリックします。


以下の「AFFINGER:タイトル付きフリーボックス」が表示されます。

「AFFINGER:タイトル付きフリーボックス」を編集します。
『』をクリックします。

以下の画面は、右側のブロックタブメニューを3分割で表示しています。
(ブロックタブメニュー)AFFINGER:タイトル付きフリーボックスの『タイトル設定・ボーダー設定・色設定』を行います。



※ ピックアップメニューの「アイコン設定と色設定」は「AFFINGER:メモ」と同等です。
ご覧いただくには▶︎(参照)
『見出し幅100%』をONにすると以下のように表示されます。

以上で「AFFINGER:見出し付きフリーボックス」の設定は完了です。◀︎ お好みで自由に設定してください。
まとめ!AFFINGER6▶︎AFFINGER「メモ・マイボックス・タイトル付きフリーボックス」の使い方
AFFINGER メニューの「メモ・マイボックス・タイトル付きフリーボックス」の使い方をご紹介しました。
記事のメルハリをつけるのに有効だと思います。ただ!あまり凝りすぎると悪目立ちして見にくくなるかと…?!
サイトに合った形で色や装飾をしましょう。「使い方を覚えると使いたくて仕方なくなる▶︎筆者 ^^" が言うのもなんですが…」
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/