【SANGOカスタマイズ】ボックス3の色を変更する方法【初心者でも簡単】

「SANGO」のカスタマイズで悩む人

SANGOの文字装飾のボックス3の色を変更したいんですけど、やり方が分かりません。

初心者にも分かりやすくできる、簡単な変更方法を教えてください！

今回は、ワードプレスのテーマ「SANGO」のカスタマイズのこんな悩みを解消していきましょうー！

今回お伝えするカスタマイズで、出来るのはこんなイメージ↓

デフォルトではボックス3では水色の背景ですが、カスタマイズすることで、写真のように灰色(or好きなカラー)に変更できます！

ザッキー

僕もプログラミングは分からず、HTMLやCSSには疎うとくて、このカスタマイズが出来るまでめっちゃ苦労しました(^◇^;)

そんな僕でもできた簡単な方法をお伝えしていきます！

きっと同じような初心者の方や、プログラミングが苦手な人には役立つ簡単な方法だと思います(*´∀｀*)

このカスタマイズで出来ること

・ボックス3の色を変える

・デフォルトのボックス3は残しつつ、オリジナルのボックス3を作成

では早速カスタマイズしていきましょうーッ！

ボックス3の色を変更する
- CSSコードのコピー
- CSSコードの貼り付け手順
オリジナルのボックス3を作成する
デフォルトのボックスはオリジナルで作れる
おわりに

ボックス3の色を変更する

まずはデフォルトの水色のボックス3の色を、好きな色に変更するカスタマイズの方法です。

CSSコードのコピー

まずは以下のCSSコードをコピーしましょう！

.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f5f5f5;/*背景色*/
}
.box3p {
    margin: 0;
    padding: 0;
}

.box3 {

padding: 0.5em 1em;

margin: 2em 0;

color: #2c2c2f;

background: #f5f5f5;/*背景色*/

}

.box3p {

margin: 0;

padding: 0;

}

補足

背景色はお好みの色に変更して下さい。

background: #f5f5f5;/*背景色*/の、赤字の部分を変更でOK！

CSSコードの貼り付け手順

コピーできれば、以下の手順でCSSコードを貼り付けいていきます！

STEP.1

トップページ

トップページへいきます

STEP.2

カスタマイズ

カスタマイズをクリックします

STEP.3

追加CSSをクリック

STEP.4

コードの貼り付け

先ほどコピーしたCSSコードを貼り付けます

STEP.5

完了

公開にすれば、以上で完了です！

変更されていればOKです！

どうですか？♪( ´▽｀)

上手く好きな背景色に変更できましたか？

キャッシュの削除は必須

カスタマイズしても上手く変更されていない場合は、まずはキャッシュを削除して確認してください！

オリジナルのボックス3を作成する

「SANGO」のカスタマイズで悩む人

ボックス3の色の変更方法は分かりました！

でもデフォルトのボックス3は残したままで、オリジナルのボックス3を作成したいんですが…それってできますか？

デフォルトのボックス3は汎用性が非常に高いので、そのまま残しておきたい人も多いと思います。

そんな人に向けて、デフォルトのボックス3は残したまま、オリジナルのボックス3の作成方法をお伝えしていきます！

CSSコードのコピー

まずは以下のCSSコードをコピーしましょう！

.mybox3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f5f5f5;/*背景色*/
}
.mybox3p {
    margin: 0; 
    padding: 0;
}

.mybox3 {

padding: 0.5em 1em;

margin: 2em 0;

color: #2c2c2f;

background: #f5f5f5;/*背景色*/

}

.mybox3p {

margin: 0;

padding: 0;

}

補足

背景色はお好みの色に変更して下さい。

background: #f5f5f5;/*背景色*/の部分を好きな色に変更でOK！

CSSコードの貼り付け手順

コピーできれば、先程と同じで以下の手順でCSSコードを貼り付けいていきます！

STEP.1

トップページ

トップページへいきます

STEP.2

カスタマイズ

カスタマイズをクリックします

STEP.3

追加CSSをクリック

STEP.4

コードの貼り付け

先ほどコピーしたCSSコードを貼り付けます

STEP.5

完了

以上で完了です！

ショートコードで書き込む

でもここで終わりではないんです(^◇^;)

オリジナルボックスを作成する際には、もう一手間が必要になります。

ブログ記事を書く際には、以下のコードを使う必要があります。

以下のコードを使って書けば、オリジナルのボックス3が使えちゃいます♪( ´▽｀)

投稿の際にテキストページで上のショートコードで書き込めば、オリジナルボックス3として、色違いのボックス3を使うことができます♪( ´▽｀)

以上のように入力していけば、オリジナルの好きな色のボックス3を使うことができます◎

ぜひお試しあれ♪( ´▽｀)

デフォルトのボックスはオリジナルで作れる

SANGOで最初からデフォルトで搭載されているボックスは、全てオリジナルバージョンで作れます。

作り方は、前述の【オリジナルのボックス3を作成する】と一緒です。

CSSのコードを変えるだけでOKなんで、初心者の方にも簡単♪( ´▽｀)

各ボックスのコードは、以下のサルワカさんのページを参考にして下さい！

参考【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30サルワカ

どんどんオリジナルのカラーのボックスを作っていきましょうー！

おわりに

いかがでしたでしょうか？

お伝えした方法は、初心者の方にも簡単だったと思います◎

どんどんオリジナルのボックスや、デフォルトのカラーを変えて、自分好みのデザインに変えていきましょう！

最後までお読み頂きありがとうございました！