
・どうやってカスタマイズすればいいかわからない!
こんな疑問を解決します。
この記事を書いた人
さて、今回は【初心者向け】AFFINGER5(アフィンガー)でボックスを簡単にデザインする方法というテーマで書いていきます。
この記事を通して、おしゃれなボックスのデザインの作り方を習得しましょう!

それではさっそくやっていきましょう!
好きなボックスを作成しよう
ボックスの手順は以下の通りです。
ボックス作成の手順
- マイボックスをクリック
- 好きなようにカスタマイズ
- 完了
手順①:マイボックスをクリック

マイボックスをクリック!
はじめにマイボックスをクリックしましょう。
クリックすると、下の画像のようなショートコードが記入されます。

マイボックスをクリックすると打ち込まれるコード
これをプレビューしてみると・・・
こんな感じ。
何とも味気ないですよね。
なのでカスタマイズ(カラー&枠)していきます。
手順➁:好きなようにカスタマイズ
まずはコードの意味を軽く覚えましょう。

覚えておくべきコード
st-mybox tiyle"" / 枠のタイトル
color="" / 文字のカラー
bordercolor="" / 枠のカラー
bgcolor="" / 背景カラー
borderwidth="" / 枠の太さ
borderradius="" / 枠の丸さ加減
この "" の間に自分の好きなコードを打ち込むと、カラーや枠の太さ etc が反映されます。
サンプル
サンプル
サンプル
サンプル
言葉だけじゃ難しいと思うので、画像を使って解説していきますね。
実際にコードを入力してみよう
試しに青色の枠を作ってみましょう。
手順通りマイボックスをクリックして、枠で囲った部分にコードを打ち込みます。

実際にカスタマイズ!
上の画像をプレビューしてみましょう!

ポイント:カラーコードはここから選ぶ
初心者の方はカラーコードがわからないかもしれません。
でも安心してください。
初心者の方にぴったりのカラーコード一覧がありますよ!

「タグ」→「ショートコード補助」→「HTMLカラー」→「カラーコード」をクリック
これだけで、好きなカラーを選択できるようになっています。
バリエーションはあまり多くないですが、初心者の方には十分かなと思います。
他の色も使いたくなったら、HTMLカラー一覧で好きなものを探してみてください。
誰かの役に立てればうれしいです。
今回はここまで。