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

こんにちは、れのる（@Blog624renoru）です

初心者の方の中には、ボックスが上手くデザインできない！といったことがあるかと思います。

この記事では、初心者の方がすぐに実践できるボックスデザインをシンプルに解説していきます。

簡単にできるので、ぜひマネしてみてね！

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

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

ボックスの手順は

これだけです。

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

画像の赤枠で囲ったマイボックスをクリック。

すると青枠のようなコードが打ち込まれます。

難しくないので焦らないでね！

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

こんな感じ。

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

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

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

まずは、コードを軽く覚えましょう！

と言っても書いてある通りです。

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

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

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

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

はじめに「マイボックス」をクリックします。

緑色の枠で囲った部分にコードを打ち込みましょう。

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

こんな感じ。

上手くカスタマイズできました！

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

でもカラーコードがわからないよと思うかもしれません。

安心してください。

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

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

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

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

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

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

今回はここまで。