【SANGO】ボックスデザインをカスタマイズする方法【具体例あり】

SANGOのボックスデザインのカスタマイズ方法です。

「SANGOのボックスのショートコードって便利だけど、少しだけデザインを変えたいな。」
「けどやり方が分からない。。。」

こういった方向けの内容です。
初心者でもできる簡単なものになっていますので、ぜひ参考にしてみて下さい。

スポンサーリンク

ボックスデザインの変更方法

SANGOのボックスデザインを変更する方法は、冒頭でもお伝えしたように超簡単です。

基本的には子テーマに対して追加CSSを記述するだけ。

具体的にどんな感じか解説していきます。

追加CSSの方法

CSSを追加する方法ですが、流れは下記のようになっています。

  • ①外観→テーマ編集を開く
  • ②スタイルシート(style.css)を開く
  • ③cssを追加する

これを行うだけで、デザインを変更することができます。
一応ですが、右上の「編集するテーマを選択」の部分が「SANGO Child」になっていることを確認しておきましょう。

ここからは具体的に、どのようにcssのコードを追加するのかをお伝えしていきます。

box1のデザインを変えてみる

今回は例として「box1」のデザインの変更を実際に行なってみます。
通常のbox1のデザインは下の画像のようになっています。

これを変更するために、先ほどの手順でスタイルシートに下記の記述を行なってみましょう。

.box1 {

    padding: 0.5em 1em;/*①ボックス内側の距離*/

    margin: 2em 0;/*②ボックス外側の距離*/

    background: #f0f7ff;/*③背景色*/

    border: dashed 2px #5b8bd0;/*④枠線*/

}

.box1 p {

    margin: 0; 

    padding: 0;

}

「ファイルを更新」を押すことで、box1のデザインが変わります。

これでボックスデザインの変更方法は以上となります。

とはいえ、「これだけでは好きなデザインにできない」という方もいらっしゃるかと思います。

そこでここからは、このデザインをベースとしてコードを解説しながら、さらなるカスタマイズを進めていきましょう。

ボックスデザインのカスタマイズ

デザインを変更するにあたって、注目すべきは下記の4点です。

  • ①ボックス内側の距離:padding
  • ②ボックス外側の距離:margin
  • ③背景色:background
  • ④枠線:border

この部分を実際に1つずつカスタマイズしていきます。

①ボックス内側の距離:padding

「padding」は、ボックスの外枠からテキストまでの距離(内側の余白)を指定するためのコードです。

元のコードでは「0.5em 1em」となっていますが、これを少し大きくすることでボックス内の余白が大きくなります。

例としてここでは

padding: 2em 2em;/*①ボックス内側の距離*/

に変更してみました。

paddingでは値が2つの場合、左側が上下の余白・右側が左右の余白を指定する値となるので、それぞれ好きな値を入れていきましょう。

②ボックス外側の距離:margin

ボックスの外側の余白を指定できるのが「margin」の部分です。

ボックスはテキストの間に入ることが多く、距離がつまっていると非常に読みづらいです。
こういった部分を解決することができます。

今回は変化が分かりやすいように、例として

margin: 5em 5em;/*②ボックス外側の距離*/

としてみました。

値を大きくすることでボックスの外側の余白が大きくなり、テキストとの間も開きます。

③背景色:background

ボックスの背景の色を指定できるコードです。

カラーコードと言われる「#f0f7ff;」の部分を、好きな色のコードに変更するだけで変化します。
メインのテキストは黒で構成することが多いため、この場合は薄めの色がオススメですね。

ここでは

background: #ffecf3;/*③背景色*/

に変更してみます。

こうすることで背景色が変化しました。

色とカラーコードに関しては[カラーコード]で検索すれば出てくるので、自分の好きな色を探して指定してみてください。

④枠線:border

ボックスの枠に関する指定をできる部分です。

「2px」の部分が線の幅、「#5b8bd0;」は点線の色の指定ができます。

幅はカッコよく仕上げるなら「1px」、可愛く仕上げるなら「2px以上」がオススメです。
色に関してはボックス背景と同系色の、少し濃いめの色を指定してあげるとバランスが取りやすいです。

なのでここでは

border: dashed 1px #d08cbc;/*④枠線*/

と指定してみます。

こうすることで線が変化しました。
点線を消したい場合はこの部分を削除するだけですし、通常の枠線にしたい場合は「dashed」を「solid」に変更すればOKです。

これでSANGOのボックスデザインのカスタマイズは以上となります。
今回の内容である程度のデザインであれば、作ることが可能になったかと思います。

なお、追加したcssが反映されない場合は、「記述ミスの確認」と「ブラウザの履歴の削除」を行なってみて下さい。

オススメ【初心者向け】WordPress学習におすすめしたい3冊の本

オススメ【収益化】おすすめのアフィリエイトASP5選【すべて登録でOK】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA