ライフハック・ Apple・ 愛犬・ ランニング

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

読了時間: 約536

スポンサードサーチ

「スワロー」BOXの種類

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

補足説明

補足説明

注意説明

注意説明

シンプルな枠で囲む

[aside type=”boader”]シンプルな枠[/aside] シンプルな枠

7種類の色付きボックス

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

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


今回4つのボックスを紹介します。
こちらの記事を参考にしました。
参考 【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30サルワカ

①考えごと風

ここに文章

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

これをHTMLで出力してください。

MEMO
プラグイン「AddQuicktag」(アドクイックタグ)を使うと便利です
考えごと風

.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>
「CSS編集」を開き下の様にコードを追加します。 コードを追加
貼り付ける場所です。
追加CSSに貼り付け
以下の3つも同様のやり方でコピペしてください。

②交差線風

ここに文章

<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;
}</code></div>

③めくれたテープ風

ここに文章

 

<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;
}</code></div>

④コードボックス風

codeここに文章

<div class="box4"><span class="box-title"><i class="fa fa-code" aria-hidden="true"></i> code</span>ここに文章</div>
コードボックス風

.box4 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box4 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #62c1ce;
color: #dcdcdc;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box4 p {
margin: 0;
padding: 0;
}</code></div>
コードボックスはタイトルの前に「Font Awesome」で装飾しています。
「Font Awesome」が分からない方はこちらの記事を参考にしてください。
Font Awesomeアイキャッチ画像WordPressで 「Font Awesome」を使う簡単な方法

まとめ

他にもまだ色々ありますが、今回は4つボックスを紹介しました。
参考になれば幸いです。
以上、お読みいただきありがとうございました。