カラーユニバーサルデザインに配慮しています

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

読了時間: 約4

「スワロー」BOXの種類

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

補足説明

補足説明

注意説明

注意説明

シンプルな枠で囲む

シンプルな枠

7種類の色付きボックス

7種類の色
  • red_box
  • yellow_box
  • green_box
  • pink_box
  • blue_box
  • glay_box
  • black_box

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



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

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

追加方法

追加CSS設定方法
手順
  1. 「外観」をクリック
  2. 「CSS編集」をクリック
  3. 「追加CSS」に貼り付け
  4. 公開ボタンクリックで完了
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」をもう少し詳しく知りたい方はこちらの記事を参考にしてください。

あわせて読みたい

アイキャッチ画像【Font Awesome 5】をWordPressで使う簡単な設定方法

まとめ

他にもまだ色々ありますが、今回は4つボックスを紹介しました。参考になれば幸いです。



以上、お読みいただきありがとうございました。