AFFINGER5【ボックス（囲み枠）の幅を調整】

AFFINGER5で、ボックスの横幅を変更する方法です。

記事後半では、横幅の調整が可能なボックス装飾の一覧と実例も紹介しています。

こんな人のお役に立てる記事です。

小豆

AFFINGER5のボックス装飾をよく使う。
でもコレ、もう少し横幅を短くすることってできないのかな？

AFFINGER5でボックス（囲み枠）の幅を調整する

AFFINGER5には、数多くのボックス（囲み枠^※）が用意されていますよね。

※以下、「ボックス」表記で統一します

実際のボックス装飾は、こんな感じ。

でもコレ、テキストに対してボックスの幅が気になることってありませんか？

小豆

そうなんだよなぁ。
細かいことだけど、無駄に横幅が広すぎるのが気になる。　

僕含め、こんな人も意外と多いはず。

というわけで、ボックスの横幅を調整してみました。

ちょっとしたことですが、見た目が多少スッキリしましたよね。

AFFINGER5なら、ボックスの横幅の調整が簡単にできます。

ボックス幅の調整は、スマホでの見た目に注意

早速AFFINGER5でのボックス幅の調整方法を紹介していきたいところですが、その前に注意点が一つ。

ボックスの横幅は任意の幅に調整できますが、極端な調整はNG。

以下の画像で確認してください。

	PCでの見え方	スマホでの見え方
程よく調整
極端に調整

画像はクリックで拡大できます

あまり調整幅を大きくしすぎると、上記のようにスマホでは残念な見え方になってしまいます。

小豆

なるほど。
PCとスマホでは、画面の比率が全然違うからね・・。

というわけで、その点も踏まえながら「ボックス幅の調整方法」を紹介していきますね。

ボックス幅の調整方法【AFFINGER6での設定方法も紹介】

ボックス幅の調整は、実はAFFINGER6（Gutenberg）だったら、すごく簡単。

操作方法を説明するほどでもないので、記事後半でサクッと動画解説しています。

というわけで、ここではAFFINGER5での設定方法を紹介していきます。

step
1ボックスを挿入

タグ　→　ボックスデザイン　→　マイボックス

step
2右の余白を調整

margin="25px 0 25px 0"　→　margin="25px 20px 25px 0"

step
3左の余白を調整

margin="25px 0 25px 0"　→　margin="25px 0 25px 20px"

大福

左右の余白を同時に指定することも可能だよ。
例：margin="25px 20px 25px 20px"

余白の入力は100pxくらいまでがオススメ

PC・スマホ、それぞれでの見た目にこだわるなら、余白は100pxくらいまでに留とどめることをおすすめします。

以下、「余白の数値」とPC・スマホでのそれぞれの見え方をまとめました。

小豆

なるほどねぇ。
PCで見た場合とスマホで見た場合で、表示を別々には設定できないの？　

AFFINGERならソレも可能！
詳しい設定方法は、以下の記事内で解説しているよ。

大福

マージン設定　→　バーで任意の幅に調整

横幅の調整が可能なボックスデザイ一覧

今回紹介した方法は、以下のボックスデザインにて設定が可能です。

マイボックス

     マイボックス
（＋CSSデザイン）

横幅調整のサンプル例

まとめ：ボックスの見た目にこだわろう

今回紹介した方法を使えば、ボックスの横幅を自由に調整することができます。

ぜひ、記事の見た目UPの参考にしてください。

ただし、極端な調整はNG。

設定後は、必ずスマホでの見え方の確認を行ってくださいね。