【AFFINGER５】ボックスデザイン枠の色を変えるやり方

【AFFINGER５】ボックスデザイン枠の色を変えるやり方、カスタマイズを紹介

2020年9月23日 2021年2月28日

AFFINGERボックスデザイン枠のカラーを変えたい場合のやり方、ボックスデザインのカスタマイズ方法を詳しく紹介していきます。

ムロ

AFFINGER5は、ボタン1つで色々なデザインのボックスを使えるから便利ですね。
しかも、ボックス内の背景色や線の色などをもっと自分好みに変更することも可能！！めちゃくちゃ、使える機能です

このボックスの枠の色を変えます。→青色に

こんな感じになります。

他のにも、

デフォルト

サンプル

カスタマイズしたら

サンプル

ボックスデザインはたくさんあるのですが、全てでこのカスタマイズができますので自分の好きなようにできます。

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

＞＞WPテーマ「WING（AFFINGER5）」多くのブロガーに愛されているテーマ

「もっと美しく、簡単に。」基本デザインパターンも48種！

無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ。

記事がサクサク書ける！豊富で自由度の高いデザインパーツ

記事作成に欠かせない様々な装飾をクリック1つで設定できる

もくじだよ

1 枠の色を変えるやり方
2 ボックスデザインのカスタマイズの方法
3 まとめ：自分好みのボックスデザインでブログをお洒落にしよう

枠の色を変えるやり方

基本的な例として、枠の色を変えるやり方を説明します。

step
1タグからマイボックスを選ぶ

タグ＞ボックスデザイン＞マイボックス＞しかく（枠のみ）

bordercolorこれが枠のことで、＝”0000FF"これがカラーパターン

これを変更すると枠の色が変えられます。

こんな感じになります。

ムロ

めちゃくちゃ簡単でしたね！！

ムロ

今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER５の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

ボックスデザインのカスタマイズの方法

ここさえ覚えておけば、ボックスデザインを自分の思うようにカスタマイズできますので覚えときましょう！！

このボックスを実例として（見出し付きフリーボックス）

⬇️

見出し（全角15文字）

これのコードはこちら⬇️

 command
[st-midasibox title="見出し（全角15文字）" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold" myclass=""]
 
[/st-midasibox]

title	見出し	bgcolor	背景の色
fontawesome	アイコン	borderwidth	枠線の太さ
bordercolor	枠線の色	borderradius	枠線の丸み
color	見出しテキストの色	titleweight	見出しテキストの色