アフィンガー5

【簡単】AFFINGER5(アフィンガー5)ボックスのサンプル

2021年3月12日

<AFFINGER5(アフィンガー5)のボックス>

アフィンガー5のボックスを使うと単調な文章にメリハリが付きます。

さらにリストを併用すると箇条書きになり、文章がより分かりやすくなります。

ここでは、正確にはボックスでなくても、ボックスに見えるものも選んでいます。

ボックスのメニュー

【スタイル】>【ボックス】

スタイルのボックスはここで設定します。

 

使い方(例:黄色)

①投稿画面を「ビジュアル」にします。

メニューより【スタイル】>【ボックス】>【黄色】をクリックします。

②黄色のボックスが表示されます。

 

ボックスの中に文字を入力します。

 

プレビュー画面です。

 

ボックスのプレビュー

黄色

黄色のボックスです

メニュー 【スタイル】>【ボックス】>【黄色】
htmlコード <div class="yellowbox">
<p>黄色のボックスです</p>
</div>

 

薄赤

薄赤ボックスです

メニュー 【スタイル】>【ボックス】>【薄赤】
htmlコード <div class="redbox">
<p>薄赤ボックスです</p>
</div>

 

グレー

グレーボックスです

メニュー 【スタイル】>【ボックス】>【グレー】
htmlコード <div class="graybox">
<p>グレーボックスです</p>
</div>

 

引用風

引用風のボックスです

メニュー 【スタイル】>【ボックス】>【引用風】
htmlコード <div class="inyoumodoki">
<p>引用風のボックスです</p>
</div>

 

リストのメニュー

ツールバーより【スタイル】>【リスト】

スタイルのリストはここで設定します。

 

使い方[例:チェックリスト(番号なしリスト)]

リストの文章を入力します。

 

リストをドラッグして選択状態にします。

 

メニューより【スタイル】>【リスト】>【チェックリスト(番号なしリスト)】をクリックします。

 

アイコンの「番号なしリスト」をクリックします。

 

「番号なしリスト」が適応されました。

 

プレビュー画面です。

 

リストのプレビュー

チェックリスト(番号なしリスト)

  • これはダミーのリストです1
  • これはダミーのリストです2
  • これはダミーのリストです3
メニュー 【スタイル】>【リスト】>【チェックリスト(番号なしリスト)】
htmlコード <div class="maruck">
<ul>
<li>これはダミーのリストです1</li>
<li>これはダミーのリストです2</li>
<li>これはダミーのリストです3</li>
</ul>
</div>

流れ

  • リストをドラッグして選択状態に。
  • 【スタイル】>【リスト】>【チェックリスト(番号なしリスト)】をクリック。
  • アイコンの「番号なしリスト」をクリック。

 

ナンバリング(番号付きリスト)

  1. これはダミーのリストです1
  2. これはダミーのリストです2
  3. これはダミーのリストです3
メニュー 【スタイル】>【リスト】>【ナンバリング(番号付きリスト)】
htmlコード <div class="maruno">
<ol>
<li>これはダミーのリストです1</li>
<li>これはダミーのリストです2</li>
<li>これはダミーのリストです3</li>
</ol>
</div>

流れ

  • リストをドラッグして選択状態に。
  • 【スタイル】>【リスト】>【ナンバリング(番号付きリスト)】をクリック。
  • アイコンの「番号付きリスト」をクリック。

 

マイボックスのプレビュー

マイボックスはここで設定します。

 

ポイント

ポイント

(ポイント)これはダミーです

メニュー 【タグ】>【ボックスデザイン】>【マイボックス】>【ポイント】
ショート
コード
[/] shortcode
[st-mybox title="ポイント" fontawesome="fa-check-circle"
color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7"
borderwidth="2" borderradius="5" titleweight="bold" fontsize=""
myclass="st-mybox-class" margin="25px 0 25px 0"]
(ポイント)これはダミーです
[/st-mybox]

 

注意ポイント

注意ポイント

(注意ポイント)これはダミーです

メニュー 【タグ】>【ボックスデザイン】>【マイボックス】>【注意ポイント】
ショート
コード
[/] shortcode
[st-mybox title="注意ポイント"
fontawesome="fa-exclamation-circle" color="#ef5350"
bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2"
borderradius="5" titleweight="bold" fontsize=""
myclass="st-mybox-class" margin="25px 0 25px 0"]
(注意ポイント)これはダミーです
[/st-mybox]

 

はてな

はてな

(はてな)これはダミーです

メニュー 【タグ】>【ボックスデザイン】>【マイボックス】>【はてな】
ショート
コード
[/] shortcode
[st-mybox title="はてな" fontawesome="fa-question-circle"
color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE"
borderwidth="2" borderradius="5" titleweight="bold"
fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
(はてな)これはダミーです
[/st-mybox]

 

見出し付きフリーボックスのプレビュー

見出し付きフリーボックスはここで設定します。

 

基本

見出し(全角15文字)

(基本)これはダミーです

(文章の色を黒に変更しています)

メニュー 【タグ】>【ボックスデザイン】>【見出し付きフリーボックス】>【基本】
ショート
コード
[/] shortcode
[st-midasibox title="見出し(全角15文字)" fontawesome=""
bordercolor="" color="" bgcolor="" borderwidth=""
borderradius="" titleweight="bold" myclass=""]
(基本)これはダミーです
[/st-midasibox]

 

注意

注意

(注意)これはダミーです

(文章の色を黒に変更しています)

メニュー 【タグ】>【ボックスデザイン】>【見出し付きフリーボックス】>【注意】
ショート
コード
[/] shortcode
[st-midasibox title="注意"
fontawesome="fa-exclamation-circle faa-flash animated"
bordercolor="#f44336" color="" bgcolor="#ffebee"
borderwidth="" borderradius="5" titleweight="bold" myclass=""]
(注意)これはダミーです
[/st-midasibox]

もっと見る?
【まとめ】初心者向けアフィンガー5の使い方とカスタマイズ

初心者のみなさん向けに、アフィンガー5の使い方やカスタマイズ方法を解説しています。

-アフィンガー5
-

© 2021 すべての初心者たちへ<オールビギナーズ>