【初心者向け】AFFINGER5（アフィンガー）でボックスを簡単にデザインする方法

・ボックスをおしゃれに作りたい！

・どうやってカスタマイズすればいいかわからない！

こんな疑問を解決します。

さて、今回は【初心者向け】AFFINGER5（アフィンガー）でボックスを簡単にデザインする方法というテーマで書いていきます。

この記事を通して、おしゃれなボックスのデザインの作り方を習得しましょう！

この記事のマネをするだけで出来るよ！

それではさっそくやっていきましょう！

好きなボックスを作成しよう

ボックスの手順は以下の通りです。

手順①：マイボックスをクリック

マイボックスをクリック！

はじめにマイボックスをクリックしましょう。

クリックすると、下の画像のようなショートコードが記入されます。

マイボックスをクリックすると打ち込まれるコード

これをプレビューしてみると・・・

こんな感じ。

何とも味気ないですよね。

なのでカスタマイズ（カラー＆枠）していきます。

手順➁：好きなようにカスタマイズ

まずはコードの意味を軽く覚えましょう。

どのコードに挿入すると、どんな変化があるかを把握しよう！

この "" の間に自分の好きなコードを打ち込むと、カラーや枠の太さ etc が反映されます。

言葉だけじゃ難しいと思うので、画像を使って解説していきますね。

実際にコードを入力してみよう

試しに青色の枠を作ってみましょう。

手順通りマイボックスをクリックして、枠で囲った部分にコードを打ち込みます。

実際にカスタマイズ！

上の画像をプレビューしてみましょう！

こんな感じで、枠にカラーを付けて背景を白にしました！

ポイント：カラーコードはここから選ぶ

初心者の方はカラーコードがわからないかもしれません。

でも安心してください。

初心者の方にぴったりのカラーコード一覧がありますよ！

「タグ」→「ショートコード補助」→「HTMLカラー」→「カラーコード」をクリック

これだけで、好きなカラーを選択できるようになっています。

バリエーションはあまり多くないですが、初心者の方には十分かなと思います。

他の色も使いたくなったら、HTMLカラー一覧で好きなものを探してみてください。

誰かの役に立てればうれしいです。

今回はここまで。