kindle3ヶ月99円キャンペーン中

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

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

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

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

 

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

 

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

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

 

ザッキー

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

 

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

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

 

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

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

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

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

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

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

 

CSSコードのコピー

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

補足

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

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コードをコピーしましょう!

 

補足

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

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サルワカ

 

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

おわりに

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

 

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

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

 

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