ブログ

【図解付き】アフィンガーのボックス(囲み枠)デザイン解説【誰でもサクッと簡単にできます】

どうもみっちゃんです。

今回は、こんな悩みを解決していきたいと思います。

よくブログでボックスデザインを見かけるけど、
みんなどうやって作っているの?

ケロくん
みっちゃん

解説していきます

このブログを書いている人

  • みっちゃん:ブロガー、SNS運用
  • オンラインスクール「MUPカレッジ」の生徒。2020年5月参加〜

この記事を読むとどうなるか

  • ボックス(囲い枠)デザインの使い方が分かります
    この記事を読まないと分かりません

そもそもボックスってなに?

よくブログなんかで四角い枠で囲まれた文を見たりしたことはないですか?

この記事でいうと、この部分ですね。

https://mittyanchannel.com/wp-content/uploads/2020/09/7dd4c3f74f006b34bb1d70d7adebd54e-1-1024x536.png

この素敵な枠は私がわざわざ作っているわけではなく、私が使っているブログテーマ「アフィンガー5」に元から入っているものなんです。

今でこそ、当たり前のように、どの記事を書く時にも、このボックスデザインを使っているわけですが、

ブログを始めた頃なんて、ボックスデザインがあることすら知りませんでした。

ブログの先輩型の記事を読んでいて、ボックスデザインを使っている方が多く、

この四角い枠なんだ!?私の記事にも取り入れたいと思いましたね。

ただ、調べる時に、なんて検索したら良いのか分からなくて、答えにたどり着く前に少し時間がかかっちゃいましたけどね。

なんて調べて良いか分からないって、初心者🔰ブログあるあるですよね?(もしかして私だけかな(^_^;)。。。)

ですので、この記事にたどり着いたあなたは、今日ここでボックスデザインをマスターして、

さらに、あなたのブログはレベルアップします。(※マスターしないとレベルアップしませんよ😓)

ボックスの使い方

私と同じブログテーマ「アフィンガ5」使っている方であれば、

これから画像付きで説明する手順通りに進めていけば簡単にボックスが作成できます。

3分もあれば理解できると思うので、3分でボックスをサクッと学んで、

皆さんのブログをレベルアップしていきましょう。

本文の画面をクリックすると
右側にプラスボタンが出てくるので、それを押します
ラスボタンを押すと一覧が出てくるので、
その中からSTINGERを探します
ラスボタンを押すと一覧が出てくるので、
その中からSTINGERを探します

ここまで進むことができたのなら、もうゴールは間近です。

あとは、この4つの中から好きなボックスを選んでもらって、自分が気に入るものを使えば良いだけなのですが

それでは、解説の意味がなくなってしまうので、

私がボックスをどういう時に、どういう風に使っているのか?を皆さんにお伝えできればと思います。

私のボックスの使い方

私が必ずと言って良いほど、この2つのボックスデザインは使います。

それが『STINGER:マイボックス』と『STINGER:見出し付きフリーボックス』です。

この記事の最初の方にこの2つのボックスデザインを使っていたのは、気づいてくれましたか???

私はこの2つのボックスを以下のように使いわけをしています。

ボックスの使い分け

  • 『STINGER:マイボックス』→記事の最初と最後のまとめに良く使っています
  • 『STINGER:見出し付きフリーボックス』→自分の自己紹介用にいつも使っています

STINGER:マイボックス

『STINGER:マイボックス』を開くと、下の図のような画面になります。

ここから色んな設定をして、デザインを変えていきます。

私が大きく変更する部分は2つで、下の2箇所になります。

少し見づらいですが、チェックのマークと
カタカナで書かれた「ポイント」という文字を変更していきます

チェックマークと文字の変更は右にあるこの部分で簡単に変更できます。

文字変更は「ポイント」と書かれた部分を自分の好きな文字に書き換えてあげれば、自動的に反映されるので問題ありません。

例えば、こんな感じに打ち直してあげると、簡単に変更ができます。

チェックマークは「チェック(v)」の部分をクリックすると一覧がたくさん出てくるので、

用途に合わせて好きなマークを選んであげてください。

この2つをマスターするだけで、私の記事の冒頭にあった同じボックスデザインが作れるようになります。

こんな感じのデザインが簡単に作れますよ

STINGER:見出し付きフリーボックス

『STINGER:見出し付きフリーボックス』を開くと、下の図のような画面になります。

この図を見て気づいた人がいるかもしれませんが、デザインの変更の仕方は

1つ前で説明した『STINGER:マイボックス』と全く同じなんです。

ただ、私の記事での『STINGER:見出し付きフリーボックス』は色付けをしているので、

色付けの仕方を私がどうやっているかを踏まえながら、説明していきたいと思います。

もちろん、この色付けの仕方は『STINGER:マイボックス』でも同じようにできますので参考にしてください。

『STINGER:見出し付きフリーボックス』を開いたあと、右側の画面を少し下にスクロールしていくと、

ボーダー設定や色設定という文字が出てくると思います。

この画面までたどり着くことができたら、自分の好きなようにボーダーの太さであったり、ボックスの色を変えいきます。

私の記事を例にすると、私はこのよう設定をしています。

私の場合、ボーダーの太さは「5」、丸みは「10」に設定指定います
私の場合は色を3種類使って、タイトルに黒色、ボーダーに黄色、背景に薄いピンク色を設定しています

今回は詳しくは説明をしていませんが、4つのボックスのうち残り2つの

『STINGER:バナー風ボックス』と『STINGER:メモ』も同じようできるので、是非試して見てください。

まとめ

今回は、アフィンガ 5のボックスデザインについて学んでいきました。

学んだこと

アフィンガ 5のボックスデザイン!

特に、『STINGER:マイボックス』と『STINGER:見出し付きフリーボックス』の使い方

ボックスデザインを使えるようになることで、ブログ記事にまとまり感を出せたりできますので、

全体的にスッキリとした記事に仕上げることができます。

最初のうちは慣れないこともあるかとは思いますが、

数記事書けば、100%マスターできると思いますので、

まとまり感のあるブログ記事を書いていきましょう。

最後までブログを読んでいただきありがとうございました!

-ブログ

Copyright© みっちゃんチャンネル , 2021 All Rights Reserved.