「SANGO」のカスタマイズで悩む人
初心者にも分かりやすくできる、簡単な変更方法を教えてください!
今回は、ワードプレスのテーマ「SANGO」のカスタマイズのこんな悩みを解消していきましょうー!
今回お伝えするカスタマイズで、出来るのはこんなイメージ↓
デフォルトではボックス3では水色の背景ですが、カスタマイズすることで、写真のように灰色(or好きなカラー)に変更できます!
ザッキー
そんな僕でもできた簡単な方法をお伝えしていきます!
きっと同じような初心者の方や、プログラミングが苦手な人には役立つ簡単な方法だと思います(*´∀`*)
・ボックス3の色を変える
・デフォルトのボックス3は残しつつ、オリジナルのボックス3を作成
では早速カスタマイズしていきましょうーッ!
もくじ
ボックス3の色を変更する
まずはデフォルトの水色のボックス3の色を、好きな色に変更するカスタマイズの方法です。
CSSコードのコピー
まずは以下のCSSコードをコピーしましょう!
1 2 3 4 5 6 7 8 9 10 | .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コードをコピーしましょう!
1 2 3 4 5 6 7 8 9 10 | .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サルワカ
どんどんオリジナルのカラーのボックスを作っていきましょうー!
おわりに
いかがでしたでしょうか?
お伝えした方法は、初心者の方にも簡単だったと思います◎
どんどんオリジナルのボックスや、デフォルトのカラーを変えて、自分好みのデザインに変えていきましょう!
最後までお読み頂きありがとうございました!