広告 AFFINGER

AFFINGER5【ボックス(囲み枠)の幅を調整】

AFFINGER背景画像A

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

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

 

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

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

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

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

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

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

サンプルテキスト サンプルテキスト

ポイント

サンプルテキスト サンプルテキスト

 

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

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

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

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

サンプルテキスト サンプルテキスト

ポイント

サンプルテキスト サンプルテキスト

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

手順

  1. ボックスを挿入
  2. 右の余白を調整
  3. 左の余白を調整

 

step
1
ボックスを挿入

ボックスの挿入

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

ここでは例として、マイボックス → しかく(枠のみ)を例に解説していきます。

 

step
2
右の余白を調整

右の余白を調整

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

marginタグで余白を設定

margin="上の余白 右の余白 下の余白 左の余白

右の余白を調整イメージ

 

step
3
左の余白を調整

左の余白を調整

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

marginタグで余白を設定

margin="上の余白 右の余白 下の余白 左の余白

左の余白を調整イメージ

 

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

 

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

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

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

PCでの見え方 スマホでの見え方
画像で確認する 画像で確認する
小豆
小豆
なるほどねぇ。
PCで見た場合とスマホで見た場合で、表示を別々には設定できないの? 
AFFINGERならソレも可能!
詳しい設定方法は、以下の記事内で解説しているよ。
大福
大福
AFFINGER5お知らせ
AFFINGER5【PCでの表示とスマホでの表示】を別々に設定

続きを見る

 

  • AFFINGER6での設定方法

AFFINGER6ボックス幅変更

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

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

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

ボックスの挿入

 

マイボックス

基本

ポイント

サンプルテキスト

しかく(枠のみ)

サンプルテキスト

まるみ

サンプルテキスト

参考

参考

サンプルテキスト

関連

関連

サンプルテキスト

メモ

メモ

サンプルテキスト

ポイント

ポイント

サンプルテキスト

注意ポイント

注意ポイント

サンプルテキスト

はてな

はてな

サンプルテキスト

+ミニふきだし

ふきだしテキスト

サンプルテキスト

ShortCode

サンプルテキスト

 

     マイボックス
(+CSSデザイン)

メモ

メモ

サンプルテキスト

メモ(下線のみ)

メモ

サンプルテキスト

メモ(枠のみ)

メモ

サンプルテキスト

メモ(枠・下線あり)

メモ

サンプルテキスト

注意(下線のみ)

ここに注意

サンプルテキスト

必要なモノ

必要なモノ

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
必要なモノ(ドット下線)

必要なモノ

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
チェックリスト

チェックリスト

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
チェックリスト(ドット下線)

チェックリスト

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
簡単な流れ

簡単な流れ

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
簡単な流れ(ドット下線)

簡単な流れ

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

 

横幅調整のサンプル例

デフォルト

必要なモノ

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

 

横幅を調整

必要なモノ

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

 

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

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

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

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

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

 

  • ボックス関連の記事

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER