「SANGO」のカスタマイズで悩む人
初心者にも分かりやすくできる、簡単な変更方法を教えてください！
今回は、ワードプレスのテーマ「SANGO」のカスタマイズのこんな悩みを解消していきましょうー！
今回お伝えするカスタマイズで、出来るのはこんなイメージ↓
デフォルトではボックス3では水色の背景ですが、カスタマイズすることで、写真のように灰色(or好きなカラー)に変更できます！
ザッキー
そんな僕でもできた簡単な方法をお伝えしていきます！
きっと同じような初心者の方や、プログラミングが苦手な人には役立つ簡単な方法だと思います(*´∀｀*)
・ボックス3の色を変える
・デフォルトのボックス3は残しつつ、オリジナルのボックス3を作成
では早速カスタマイズしていきましょうーッ！
もくじ
ボックス3の色を変更する
まずはデフォルトの水色のボックス3の色を、好きな色に変更するカスタマイズの方法です。
CSSコードのコピー
まずは以下のCSSコードをコピーしましょう！
.box3 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #f5f5f5;/*背景色*/
}
.box3p {
margin: 0;
padding: 0;
}
背景色はお好みの色に変更して下さい。
background: #f5f5f5;/*背景色*/の、赤字の部分を変更でOK！
CSSコードの貼り付け手順
コピーできれば、以下の手順でCSSコードを貼り付けいていきます！
トップページへいきます
カスタマイズをクリックします
追加CSSをクリック
先ほどコピーしたCSSコードを貼り付けます
変更されていればOKです！
どうですか？♪( ´▽｀)
上手く好きな背景色に変更できましたか？
オリジナルのボックス3を作成する
「SANGO」のカスタマイズで悩む人
でもデフォルトのボックス3は残したままで、オリジナルのボックス3を作成したいんですが…それってできますか？
デフォルトのボックス3は汎用性が非常に高いので、そのまま残しておきたい人も多いと思います。
そんな人に向けて、デフォルトのボックス3は残したまま、オリジナルのボックス3の作成方法をお伝えしていきます！
CSSコードのコピー
まずは以下のCSSコードをコピーしましょう！
.mybox3 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #f5f5f5;/*背景色*/
}
.mybox3p {
margin: 0;
padding: 0;
}
背景色はお好みの色に変更して下さい。
background: #f5f5f5;/*背景色*/の部分を好きな色に変更でOK！
CSSコードの貼り付け手順
コピーできれば、先程と同じで以下の手順でCSSコードを貼り付けいていきます！
トップページへいきます
カスタマイズをクリックします
追加CSSをクリック
先ほどコピーしたCSSコードを貼り付けます
ショートコードで書き込む
でもここで終わりではないんです(^◇^;)
オリジナルボックスを作成する際には、もう一手間が必要になります。
ブログ記事を書く際には、以下のコードを使う必要があります。
以下のコードを使って書けば、オリジナルのボックス3が使えちゃいます♪( ´▽｀)
投稿の際にテキストページで上のショートコードで書き込めば、オリジナルボックス3として、色違いのボックス3を使うことができます♪( ´▽｀)
以上のように入力していけば、オリジナルの好きな色のボックス3を使うことができます◎
ぜひお試しあれ♪( ´▽｀)
デフォルトのボックスはオリジナルで作れる
SANGOで最初からデフォルトで搭載されているボックスは、全てオリジナルバージョンで作れます。
作り方は、前述の【オリジナルのボックス3を作成する】と一緒です。
CSSのコードを変えるだけでOKなんで、初心者の方にも簡単♪( ´▽｀)
各ボックスのコードは、以下のサルワカさんのページを参考にして下さい！
参考 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30サルワカ
どんどんオリジナルのカラーのボックスを作っていきましょうー！
おわりに
いかがでしたでしょうか？
お伝えした方法は、初心者の方にも簡単だったと思います◎
どんどんオリジナルのボックスや、デフォルトのカラーを変えて、自分好みのデザインに変えていきましょう！
最後までお読み頂きありがとうございました！
