AFFINGER

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

2020年9月23日

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

 

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

 

 

 

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

 

こんな感じになります。

 

 

他のにも、

 

デフォルト

サンプル

 

カスタマイズしたら

サンプル

 

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

 

 

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

>>WPテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

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

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

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

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

 

枠の色を変えるやり方

 

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

 

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

 

タグ>ボックスデザイン>マイボックス>しかく(枠のみ)

 

 

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

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

 

 

こんな感じになります。

 

 

ムロ
めちゃくちゃ簡単でしたね!!

 

ムロ
今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER5の使い方がよくわかります。【最新版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 見出しテキストの色

 

 

見出し(全角15文字)

こんな感じに変更しました

 

ココがポイント

  • fontawesome="" に値を何も入力しなければ、アイコンは非表示になります。
  • アイコンタグは2つの方法で呼び出すことができます。

 

 

AFFINGER5のタグからの方法

 

 

アイコン専用サイトから呼び出す方法

 

アイコンサイト(font awesome.com)

カラーコード一覧

 

カラーコードはAFFINGER5のタグからでも選択できますが、専用のページを覚えとくと色のバリエーションが増えます。

 

カラーコード一覧表こちらからどうぞ

 

AFFINGER5からでは

タグ>ショートコード補助>HTMLカラーコード、ででます。

 

 

枠線の太さ

 

ココがポイント

  • 【borderwidth=""】には、直接数字を入力します。
  • 大きな数値を入力すればするほど、枠線が太くなります。

 

見出し(全角15文字)

サンプル

 

枠線の丸み

 

ココがポイント

  • 【borderradius=""】には、直接数字を入力します。
  • 大きな数値を入力すればするほど、枠線が丸みを帯びます。

 

見出し(全角15文字)

サンプル

 

まとめ:自分好みのボックスデザインでブログをお洒落にしよう

 

AFFINGER5は人気のWordPress有料テーマです。

 

カスタマイズした自分だけのオリジナルボックスを作りましょう

 

 

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

>>WPテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

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

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

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

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

 

 コチラも読まれています

>>【AFFINGER5】ブログのトップページをカスタマイズするやり方

>>【AFFINGER5】スライドボックスを作り、枠で囲む作り方

>>【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

 

 

 

  • この記事を書いた人
  • 最新記事

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間10万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いていますので、よろしくです!!

人気記事一覧

1

  転職サイトの大手3社をまとめて紹介します。   リクナビ、マイナビ、doda   転職したい人でも、どこのサイトに登録したら良いの迷いますので。   それぞ ...

2

悩む男性アフィリエイトで稼ぐコツが知りたい。いま、個人ブログを運営しているけど月1,000円未満です・・月5万円を目指したい。   悩む女性収益化するためには、どうしたらいいですか? &nb ...

3

  悩む女性個性的なブログはアクセスあるの?   悩む男性ブログの独自性ってどうすればいいの?   悩む男性オリジナリティって一体なに?     こん ...

4

悩む男性ブログの書き方がわかりません、どうすれば良い記事が書けるようになるんでしょうか   悩む女性ブログの構成ってどのようにづればいいいですか?   悩む男性どのように書けば読ま ...

-AFFINGER

© 2021 MURO BLOG Powered by AFFINGER5