当ページのリンクには広告が含まれています。

AFFINGER6「メモ・マイボックス・タイトル付きフリーボックス」の使い方

2022年8月4日

AFFINGER6 STINGER「メモ・マイボックス・見出し付きフリーボックス」の使い方

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

説明用の画像は旧バージョンを利用していますので…
「STINGER」▶︎「AFFINGER」
「見出し付きフリーボックス」▶︎「タイトル付きフリーボックス」
の相違があります。ご容赦ください。

Question

『AFFINGER:メモ』『AFFINGER:マイボックス』『AFFINGER:タイトル付きフリーボックス』の使い方を詳しく知りたい。

『AFFINGER:メモ』って「段落(p)のスタイルと違うの?

\\ このような「疑問を解決する」お手伝いをします!//

記事の表現が豊かになるんで…使い方をマスターしておこう。^^

osaboo

こんな方におすすめ!

  • WordPressテーマ ▶︎ AFFINGER6を使っている。
  • 記事の表現にメリハリをつけたい。
  • AFFINGER6を使いこなしたい。

今回の記事では…

『AFFINGER:メモ』『AFFINGER:マイボックス』『AFFINGER:タイトル付きフリーボックス』の使い方をご紹介します。

それではご覧ください。

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

AFFINGER:メモ

この章では、『AFFINGER:メモ』の表示と使い方をご紹介します。

「AFFINGER:メモ」とは、左側にアイコンと仕切りバーが表示され、右側に入力テキストが表示される 「ボックス」スタイルです。

このタイプの表示は、『段落(p)』でも スタイルを選択すると表示できます。

以下の表のように変更可能な設定オプションに違いがあります。

設定オプション(項目)AFFINGER:メモ(ボックス)段落(p)(ボックス)
アイコン色
アイコン種類
アイコン下にテキスト付加×
アイコンクラス×
アイコンサイズ×
文字色
背景色
ボーダー色
文字表示(デフォルト時)100%90%

アイコンやアイコンクラスについて詳しく知りたい方はこちらからご覧ください!

AFFINGER:メモ(表示)

『AFFINGER:メモ』の表示イメージは、以下のようになります。

アイコン:メモ(デフォルト)

アイコン:ペン

アイコン:チェック(v)

アイコン:虫メガネ

アイコン:リンク

デフォルトでの表示の違い。

『段落(p)』でも「ボックス」スタイルを選択できます。(テキストの大きさは、自動で縮小され 90%で表示されます。)

段落(p):メモ

『AFFINGER:メモ』(テキストの大きさは、デフォルトの大きさで 100%で表示されます。)

AFFINGER:メモ

AFFINGER:メモ(使い方)

『記事編集画面左上「+」>ブロックタブ>AFFINGER:メモ』をクリックします。

「AFFINGER:メモ」を呼び出します。

『+』をクリックします。

14442-1-1

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

記事編集画面-ブロックタブ-STINGER:メモ

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

STINGER:メモ

「AFFINGER:メモ」を編集します。

』をクリックします。

記事編集画面-最上部メニュー

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

ブロックタブメニュー右-STINGER:メモ-アイコン設定・色設定

※ 右側のタブメニューの❶〜❽の項目ををクリックすると上画面のピックアップメニューが表示されます。

補足

❸ テキストは、アイコンの下に表示されます。◀︎ 全角5文字・半角9文字を超えると2行になります。

❹ アイコンクラスのクラス名がよくわからない場合は、『こちら』の記事で詳しく解説しています。

osaboo

次に、変更例のサンプルを紹介するよ。^^ 変更画面はこんな感じ!

サンプル:「WordPress」アイコンとテキストを150%の大きさで赤色表示の設定です。

ブロックタブメニュー右-STINGER:メモ-アイコン設定・色設定-2

※ 設定時の参考にしてください。

以上で「AFFINGER:メモ」の設定は完了です。◀︎ 設定範囲が広がりますが…やり過ぎに注意しましょう。

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

AFFINGER:マイボックス

この章では、『AFFINGER:マイボックス』の表示と使い方をご紹介します。

「AFFINGER:マイボックス」とは、タイトルの表示があり、テキストをボーダー(枠)で囲んだ「ボックス」スタイルです。

AFFINGER:マイボックス(表示)

『AFFINGER:マイボックス』の表示イメージは、以下のようになります。

ポイント

デフォルト

WordPress

サンプル

150% ▶︎ 太さ(px)1 ▶︎ 丸み(px)0 ▶︎ タイトル色(赤)▶︎ ボーダー色(ブルー)

WordPress

サンプル

太字 150% ▶︎ 太さ(px)3 ▶︎ 丸み(px)15 ▶︎ タイトル色(赤)▶︎ ボーダー色(ブルー)

WordPress

サンプル

内側に入れる 150% ▶︎ 太さ(px)2 ▶︎ 丸み(px)5 ▶︎ タイトル色(赤)▶︎ ボーダー色(ブルー)

AFFINGER:マイボックス(使い方)

『記事編集画面左上「+」>ブロックタブ>AFFINGER:マイボックス』をクリックします。

「AFFINGER:マイボックス」を呼び出します。

『+』をクリックします。

記事編集画面-最上部メニュー

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

記事編集画面-ブロックタブ-STINGER:マイボックス

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

STINGER:マイボックス

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

』をクリックします。

記事編集画面-最上部メニュー

以下の画面は、右側のブロックタブメニューを3分割で表示しています。

(ブロックタブメニュー)AFFINGER:マイボックスの『タイトル設定・ボーダー設定・色設定』を行います。

ブロック-STINGER:マイボックス-1
ブロック-STINGER:マイボックス-2
ブロック-STINGER:マイボックス-3

※ ピックアップメニューの「アイコン設定と色設定」は「AFFINGER:メモ」と同等です。

ご覧いただくには▶︎(参照)

『内側に入れる』をONにすると以下のように表示されます。

STINGER:マイボックス

※ タイトルを未記入にすると枠のみ表示になります。

以上で「AFFINGER:マイボックス」の設定は完了です。◀︎ お好みで自由に設定してください。

AFFINGER:見見出し付きフリーボックス

この章では、『AFFINGER:見見出し付きフリーボックス』の表示と使い方をご紹介します。

「AFFINGER:見見出し付きフリーボックス」とは、見出し付きタイトルの表示があり、テキストをボーダー(枠)で囲んだ「ボックス」スタイルです。

AFFINGER:見出し付きフリーボックス(表示)

『AFFINGER:見見出し付きフリーボックス』の表示イメージは、以下のようになります。

見出しテキスト

デフォルト

WordPress

サンプル

太さ(px)1 ▶︎ 丸み(px)0 ▶︎ ボーダーの色(薄いオレンジ)

WordPress

サンプル

太さ(px)3 ▶︎ 丸み(px)15 ▶︎ ボーダーの色(薄いオレンジ)

WordPress

サンプル

太さ(px)2 ▶︎ 丸み(px)5 ▶︎ ボーダーの色(薄いオレンジ)

AFFINGER:タイトル付きフリーボックス(使い方)

『記事編集画面左上「+」>ブロックタブ>AFFINGER:タイトル付きフリーボックス』をクリックします。

「AFFINGER:見出し付きフリーボックス」を呼び出します。

『+』をクリックします。

記事編集画面-最上部メニュー

記事編集画面-ブロックタブ-STINGER:見出し付きフリーボックス

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

STINGER:見出し付きフリーボックス

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

』をクリックします。

記事編集画面-最上部メニュー

以下の画面は、右側のブロックタブメニューを3分割で表示しています。

(ブロックタブメニュー)AFFINGER:タイトル付きフリーボックスの『タイトル設定・ボーダー設定・色設定』を行います。

ブロック-STINGER:見出し付きフリーボックス-1
ブロック-STINGER:見出し付きフリーボックス-2
ブロック-STINGER:見出し付きフリーボックス-3

※ ピックアップメニューの「アイコン設定と色設定」は「AFFINGER:メモ」と同等です。

ご覧いただくには▶︎(参照)

『見出し幅100%』をONにすると以下のように表示されます。

STINGER:見出し付きフリーボックス

以上で「AFFINGER:見出し付きフリーボックス」の設定は完了です。◀︎ お好みで自由に設定してください。

まとめ!AFFINGER6▶︎AFFINGER「メモ・マイボックス・タイトル付きフリーボックス」の使い方

AFFINGER メニューの「メモ・マイボックス・タイトル付きフリーボックス」の使い方をご紹介しました。
記事のメルハリをつけるのに有効だと思います。ただ!あまり凝りすぎると悪目立ちして見にくくなるかと…?!
サイトに合った形で色や装飾をしましょう。「使い方を覚えると使いたくて仕方なくなる▶︎筆者 ^^" が言うのもなんですが…」

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/