【WordPress】テーマ「スワロー」のカスタマイズ　BOXの追加方法

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

読了時間: 約4分

目次非表示

「スワロー」BOXの種類
追加方法
①考えごと風
②交差線風
③めくれたテープ風
④ラベルのようなリボン風
まとめ

「スワロー」BOXの種類

「スワロー」BOXの種類は、他の有料テーマと比べたら少ないです。

補足説明

注意説明

シンプルな枠で囲む

7種類の色付きボックス

7種類の色

red_box
yellow_box
green_box
pink_box
blue_box
glay_box
black_box

この4種類しかありません。これでは他の有料テーマに比べて少し物足りなさを感じます。しかし後からいくらでも追加出来るので、気に入ったBOXを使ってみましょう。

今回4つのボックスを紹介します。こちらの記事を参考にしています。（コードは一部改変しています）

参考サイト

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください…

追加方法

手順

「外観」をクリック
「CSS編集」をクリック
「追加CSS」に貼り付け
公開ボタンクリックで完了

nformation

注意

CSSのカスタマイズは自己責任で行ってください

①考えごと風

ここに文章

<div class="box1">ここに文章</div>

考えごと風


.box1 {
position: relative;
margin: 2em 0 2em 40px;
padding: 8px 15px;
background: #fff0c6;
border-radius: 30px;
}
.box1:before{font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #fff0c6;
}
.box1:after{
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #fff0c6;
}
.box1 p {
margin: 0;
padding: 0;
}

②交差線風

ここに文章

<div class="box2">ここに文章</div>

交差線風


.box2{
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.box2:before, .box2:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.box2:before {left: 10px;}
.box2:after {right: 10px;}
.box2 p {
margin: 0;
padding: 0;
}

③めくれたテープ風

ここに文章

<div class="box3">ここに文章</div>

めくれたテープ風


.box3{
position: relative;
background: #fff0cd;
box-shadow: 0px 0px 0px 5px #fff0cd;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
.box3:after{
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ffdb88 #fff #ffdb88;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box3 p {
margin: 0;
padding: 0;
}

④ラベルのようなリボン風

CHECK

ここに文章

リボンとBOXに影をつけています。色とか適当に変えてください。

<div class="box4-wrapper">
  <div class="box4-content">
  <span class="box4"><i class="fas fa-check-circle"></i> CHECK</span>
  </div>
  <p>ここに文章</p>
</div>

ラベルのようなリボン


.box4-wrapper {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 40px 10px 10px 10px;/*余白の設定*/
	width: 100%!important;
	background: #f1f1f1;/*BOXの色*/
	box-shadow: 4px 4px 4px #d3d3d3;/*影の設定*/
  }
.box4 {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 5px;
  box-sizing: border-box;
  padding: 0 7px;
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
	font-family: 'Quicksand';/*フォントの設定*/
	font-style:italic;
  letter-spacing: 0.1em;
  color: white;
  background: #677C89;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);/*影の設定*/
}
.box4:before {
  position: absolute;
  content: '';
  top: 0;
  left: -7px;
  border: none;
  height: 38px;
  width: 7px;
  background: #677C89;/*色の設定*/
  border-radius: 5px 0 0 5px;/*丸みの設定*/
}
.box4:after {
  position: absolute;
  content: '';
  bottom: -7px;
  left: -5px;
  border: none;
  height: 7px;
  width: 5px;
  background: #c71585;/*色の設定*/
  border-radius: 5px 0 0 5px;
}

ラベルはタイトル(CHECK)の前に「Font Awesome」で装飾しています。「Font Awesome」をもう少し詳しく知りたい方はこちらの記事を参考にしてください。