AmaDemoAmaDemoWEBマーケティングWordPressTOOLGADGETホームWEB【SANGO】ボックスデザインをカスタマイズする方法【具体例あり】2019/07/09SHAREツイートシェアはてブGoogle+PocketLINESANGOのボックスデザインのカスタマイズ方法です。「SANGOのボックスのショートコードって便利だけど、少しだけデザインを変えたいな。「けどやり方が分からない。」こういった方向けの内容です。初心者でもできる簡単なものになっていますので、ぜひ参考にしてみて下さい。追加CSSの方法box1のデザインを変えてみるボックスデザインのカスタマイズ1ボックス内側の距離:padding2ボックス外側の距離:margin3背景色:background4枠線:borderボックスデザインの変更方法SANGOのボックスデザインを変更する方法は、冒頭でもお伝えしたように超簡単です。基本的には子テーマに対して追加CSSを記述するだけ。具体的にどんな感じか解説していきます。追加CSSの方法CSSを追加する方法ですが、流れは下記のようになっています。1外観→テーマ編集を開く2スタイルシート(style.css)を開く3cssを追加するこれを行うだけで、デザインを変更することができます。Child」になっていることを確認しておきましょう。ここからは具体的に、どのようにcssのコードを追加するのかをお伝えしていきます。box1のデザインを変えてみる今回は例として「box1」のデザインの変更を実際に行なってみます。通常のbox1のデザインは下の画像のようになっています。これを変更するために、先ほどの手順でスタイルシートに下記の記述を行なってみましょう。0;}「ファイルを更新」を押すことで、box1のデザインが変わります。これでボックスデザインの変更方法は以上となります。いえ、「これだけでは好きなデザインにできない」という方もいらっしゃるかと思います。そこでここからは、このデザインをベースとしてコードを解説しながら、さらなるカスタマイズを進めていきましょう。ボックスデザインのカスタマイズデザインを変更するにあたって、注目すべきは下記の4点です。1ボックス内側の距離:padding2ボックス外側の距離:margin3背景色:background4枠線:borderこの部分を実際に1つずつカスタマイズしていきます。1ボックス内側の距離:padding「padding」は、ボックスの外枠からテキストまでの距離(内側の余白)を指定するためのコードです。1em」となっていますが、これを少し大きくすることでボックス内の余白が大きくなります。2em;/*1ボックス内側の距離*/に変更してみました。paddingでは値が2つの場合、左側が上下の余白・右側が左右の余白を指定する値となるので、それぞれ好きな値を入れていきましょう。2ボックス外側の距離:marginボックスの外側の余白を指定できるのが「margin」の部分です。ボックスはテキストの間に入ることが多く、距離がつまっていると非常に読みづらいです。いった部分を解決することができます。5em;/*2ボックス外側の距離*/としてみました。値を大きくすることでボックスの外側の余白が大きくなり、テキストとの間も開きます。3背景色:backgroundボックスの背景の色を指定できるコードです。カラーコードと言われる「#f0f7ff;」の部分を、好きな色のコードに変更するだけで変化します。メインのテキストは黒で構成することが多いため、この場合は薄めの色がオススメですね。#ffecf3;/*3背景色*/に変更してみます。することで背景色が変化しました。色とカラーコードに関しては[カラーコード]で検索すれば出てくるので、自分の好きな色を探して指定してみてください。4枠線:borderボックスの枠に関する指定をできる部分です。「2px」の部分が線の幅、「#5b8bd0;」は点線の色の指定ができます。幅はカッコよく仕上げるなら「1px」、可愛く仕上げるなら「2px以上」がオススメです。色に関してはボックス背景と同系色の、少し濃いめの色を指定してあげるとバランスが取りやすいです。#d08cbc;/*4枠線*/と指定してみます。することで線が変化しました。点線を消したい場合はこの部分を削除するだけですし、通常の枠線にしたい場合は「dashed」を「solid」に変更すればOKです。これでSANGOのボックスデザインのカスタマイズは以上となります。今回の内容である程度のデザインであれば、作ることが可能になったかと思います。追加したcssが反映されない場合は、「記述ミスの確認」と「ブラウザの履歴の削除」を行なってみて下さい。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。