広告

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

14442_affinger6-how-to-use-box-block

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

Question

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

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

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

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

osaboo

こんな方におすすめ!

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

という事で、今回の記事では…

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

それではご覧ください。

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

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

STINGER:メモ

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

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

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

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

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

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

STINGER:メモ(表示)

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

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

アイコン:ペン

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

アイコン:虫メガネ

アイコン:リンク

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

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

段落(p):メモ

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

STINGER:メモ

STINGER:メモ(使い方)

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

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

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

14442-1-1

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

14442-0-1

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

14442-5b

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

』をクリックします。

14442-1-2

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

14442-6a

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

補足

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

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

osaboo

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

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

14442-7

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

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

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

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

STINGER:マイボックス

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

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

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

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

ポイント

デフォルト

WordPress

サンプル

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

WordPress

サンプル

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

WordPress

サンプル

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

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

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

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

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

14442-1-1

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

14442-0-2

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

14442-8

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

』をクリックします。

14442-1-2

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

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

14442-11
14442-10
14442-12

※ ピックアップメニューの「アイコン設定と色設定」は「STINGER:メモ」と同等です。
ご覧いただくには▶︎(参照)

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

14442-8-1

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

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

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

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

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

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

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

見出しテキスト

デフォルト

WordPress

サンプル

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

WordPress

サンプル

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

WordPress

サンプル

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

STINGER:見出し付きフリーボックス(使い方)

『記事作成画面左上「+」>ブロックタブ>STINGER:見出し付きフリーボックス』をクリックします。

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

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

14442-1-1

14442-0-3

以下の「STINGER:見出し付きフリーボックス」が表示されます。

14442-9

「STINGER:見出し付きフリーボックス」を編集します。

』をクリックします。

14442-1-2

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

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

14442-13
14442-14
14442-15

※ ピックアップメニューの「アイコン設定と色設定」は「STINGER:メモ」と同等です。
ご覧いただくには▶︎(参照)

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

14442-9-1

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



「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

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

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

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

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

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