Cocoonカスタマイズ まとめ記事公開中

【WordPress】コピペ可!おしゃれなボックスデザイン9選!

WordPress
スポンサーリンク
疑問くん
疑問くん

・WordPressでオシャレなボックスって無いのかな?
・コピペだけ!みたいな簡単なカスタマイズ方法って無いかな?

そんな声に対して、今回はコピペでできるオシャレなボックスデザインを紹介!

今回は、有名WordPressテーマ「SANGO」「swell」「Jin」でも使われているボックスから9つのボックスデザインをピックアップ!

MEMO

今回のカスタマイズはCocoon限定ではなく、基本的にどのテーマでもご利用いただけます。

以下のコードはFont Awesome 4, 5両バージョンに対応しています。

Font Awesomeって何?という方はこちらを御覧ください。

スポンサーリンク

コピペで簡単!ボックスデザイン

ボックス1:メモ用

MEMO

 ここにテキストを入力することができます。
 ここにテキストを入力することができます。
 ここにテキストを入力することができます。

CSS – Font Awesome 4

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s_memo {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #fff9e5; /* 背景色を変える場合はここを変更 */
    color: #545454;
}
.s_memo_ttl {
    margin-bottom: 5px;
    color: #ffb36b; /* タイトルの色を変える場合はここを変更 */
    font-weight: bold;
}
.s_memo_ttl:before {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 6px 0 0;
    border-radius: 50%;
    color: #fff;
    font-family: FontAwesome;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
    background-color: #ffb36b; /* アイコンの色を変える場合はここを変更 */
    content: "\f040"; /* アイコンを変える場合はここを変更 */
}

CSS – Font Awesome 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	    font-size: 16px;
    }
    .box-inside {
	    font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s_memo {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #fff9e5; /* 背景色を変える場合はここを変更 */
    color: #545454;
}
.s_memo_ttl {
    margin-bottom: 5px;
    color: #ffb36b; /* タイトルの色を変える場合はここを変更 */
    font-weight: bold;
}
.s_memo_ttl:before {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 8px 4px 0;
	border-radius: 50%;
	color: #fff;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
	background-color: #ffb36b;
	content: "\f303";
	font-size: 17px;
}

HTML

<div class="s_memo box-inside">
    <div class="s_memo_ttl title-box">MEMO</div>
    ここにテキストを入力
</div>

ボックス2:メモ2

ここにタイトル
ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。

CSS – Font Awesome 4

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ffcb8a;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
    display: inline-block;
    position: relative;
    top: -14px;
    left: 10px;
    padding: 0 9px;
    margin: 0 7px;
    background: #fff;
    color: #ed8583;
    line-height: 1.4;
}
.s-box .s-box-title:before {
    content: "\f00c"; /* アイコンを変える場合はここを変更 */
    padding-right: 4px;
    font-family: FontAwesome;
}
/* 
 * ボックス4でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s-yellow {
    border: solid 3px #ffcb8a; /* 囲んでいる枠線の色を変える場合はここを変更 */
}
.s-yellow .s-box-title:before {
    content: "\f00c";
}
.s-yellow .s-box-title {
    color:#ffcb8a; /* タイトルの文字色を変える場合はここを変更 */
}

CSS – Font Awesome 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	    font-size: 16px;
    }
    .box-inside {
	    font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ed8583;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
    display: inline-block;
    position: relative;
    top: -14px;
    left: 10px;
    padding: 0 9px;
    margin: 0 7px;
    background: #fff;
    color: #ed8583;
    line-height: 1.4;
}
.s-box .s-box-title:before {
    content: "\f00c"; /* アイコンを変える場合はここを変更 */
    padding-right: 4px;
    font-family: "Font Awesome 5 Free";
}
/* 
 * ボックス4でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s-yellow {
	border: solid 3px #ffcb8a;
}
.s-yellow .s-box-title:before {
	content: "\f00c";
}
.s-yellow .s-box-title {
	color: #ffcb8a;
}

HTML

<div class="s-box s-yellow box-inside">
	<div class="s-box-title title-box">ここにタイトル</div>
	<div class="s-box-content">
		<div>ここにテキストを入力</div>
	</div>
</div>

ボックス3:注意

注意

 ここにテキストを入力することができます。
 ここにテキストを入力することができます。
 ここにテキストを入力することができます。

CSS – Font Awesome 4

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s_memo {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #fff9e5;
    color: #545454;
}
.s_memo_ttl {
    margin-bottom: 5px;
    color: #ffb36b;
    font-weight: bold;
}
.s_memo_ttl:before {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 6px 0 0;
    border-radius: 50%;
    color: #fff;
    font-family: FontAwesome;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
	background-color: #ffb36b;
	content: "\f040";
}
/* 
 * ボックス1でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s_memo.s_alert {
    background: #ffebeb;
}
.s_memo.s_alert .s_memo_ttl {
    color: #ff8376;
}
.s_memo.s_alert .s_memo_ttl:before {
    background: #ff8376;
    content: "\f12a";
}

CSS – Font Awesome 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s_memo {
	margin-bottom: 1.5em;
	padding: 1em;
	background: #fff9e5;
	color: #545454;
}
.s_memo_ttl {
	margin-bottom: 5px;
	color: #ffb36b;
	font-size: 1.2em;
	font-weight: bold;
}
.s_memo_ttl:before {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 8px 4px 0;
	border-radius: 50%;
	color: #fff;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
	background-color: #ffb36b;
	content: "\f303";
	font-size: 17px;
}
/* 
 * ボックス1でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s_memo.s_alert {
	background: #ffebeb;
}
.s_memo.s_alert .s_memo_ttl {
	color: #ff8376;
}
.s_memo.s_alert .s_memo_ttl:before {
	background: #ff8376;
	content: "\f12a";
}

HTML

<div class="s_memo s_alert box-inside">
	<div class="s_memo_ttl title-box">注意</div>
 ここにテキストを入力
</div>

ボックス4:注意2

ここにタイトル
ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。

CSS – Font Awesome 4

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ed8583;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
    display: inline-block;
    position: relative;
    top: -14px;
    left: 10px;
    padding: 0 9px;
    margin: 0 7px;
    background: #fff;
    color: #ed8583;
    line-height: 1.4;
}
.s-box .s-box-title:before {
    content: "\f071";
    padding-right: 4px;
    font-family: FontAwesome;
}

CSS – Font Awesome 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ed8583;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
	display: inline-block;
	position: relative;
	top: -14px;
	left: 10px;
	padding: 0 9px;
	margin: 0 7px;
	background: #fff;
	color: #ed8583;
	font-size: 19px;
	line-height: 1.4;
	font-weight: bold;
}
.s-box .s-box-title:before {
	content: "\f071";
	padding-right: 4px;
	font-family: "Font Awesome 5 Free";
}

HTML

<div class="s-box box-inside">
	<div class="s-box-title title-box">ここにタイトル</div>
	<div class="s-box-content">
		<div>ここにテキストを入力</div>
	</div>
</div>

ボックス5:対角線

ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。

CSS – Font Awesome 4

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ed8583;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
    display: inline-block;
    position: relative;
    top: -14px;
    left: 10px;
    padding: 0 9px;
    margin: 0 7px;
    background: #fff;
    color: #ed8583;
    line-height: 1.4;
}
.s-box .s-box-title:before {
    content: "\f071";
    padding-right: 4px;
    font-family: FontAwesome;
}
/* 
 * ボックス2または4でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s-box-2 {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 1em;
    border: solid 2px #ffcb8a;
    border-radius: 3px 0 3px 0;
}
.s-box-2:before {
    right: -12px;
    bottom: -12px;
}
.s-box-2:after {
    top: -12px;
    left: -12px;
}
.s-box-2:before, .s-box-2:after {
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 2px #ffcb8a;
    border-radius: 50%;
    content: "";
}

CSS – Font Awesome 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ed8583;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
	display: inline-block;
	position: relative;
	top: -14px;
	left: 10px;
	padding: 0 9px;
	margin: 0 7px;
	background: #fff;
	color: #ed8583;
	font-size: 19px;
	line-height: 1.4;
	font-weight: bold;
}
.s-box .s-box-title:before {
	content: "\f071";
	padding-right: 4px;
	font-family: "Font Awesome 5 Free";
}
/* 
 * ボックス2または4でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s-box-2 {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 1em;
    border: solid 2px #ffcb8a;
    border-radius: 3px 0 3px 0;
}
.s-box-2:before {
    right: -12px;
    bottom: -12px;
}
.s-box-2:after {
    top: -12px;
    left: -12px;
}
.s-box-2:before, .s-box-2:after {
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 2px #ffcb8a;
    border-radius: 50%;
    content: "";
}

HTML

<div class="s-box s-box-2 box-inside">
	<div>ここにテキストを入力</div>
</div>

ボックス6 : 点線

ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。

CSS – Font Awesome 4, 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
.s-box-3 {
    margin: 2em 0;
    padding: 1.5em 1em;
    border: dashed 2px #FFBC61;
    background: #FFF4E0;
}

HTML

<div class="s-box-3 box-inside">
    <p>ここにテキストを入力</p>
</div>

ボックス7 : 両サイド

ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。

CSS – Font Awesome 4, 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
.s-box-4 {
    margin: 2em 0;
    padding: 1.5em 1em;
    border-right: double 7px #FFBC61;
    border-left: double 7px #FFBC61;
    background: #FFF4E0;
}

HTML

<div class="s-box-4 box-inside">
    <p>ここにテキストを入力</p>
</div>

ボックス8 : 鍵括弧

ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。

CSS – Font Awesome 4, 5

/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
.s-box-5 {
    position: relative;
    padding: 1.5em 1em;
}
.s-box-5:before, 
.s-box-5:after {
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 30px;
    content: "";
}
.s-box-5:before {
    right: 0;
    bottom: 0;
    border-right: solid 1px #FFBC61;
    border-bottom: solid 1px #FFBC61;
}
.s-box-5:after {
    top: 0;
    left: 0;
    border-top: solid 1px #FFBC61;
    border-left: solid 1px #FFBC61;
}

HTML

<div class="s-box-5 box-inside">
    <p>ここにテキストを入力</p>
</div>

ボックス9:黒板

黒板風

  • ここに文字を入力
  • ここに文字を入力
  • ここに文字を入力
  • ここに文字を入力

CSS – Font Awesome 5

.blackboard{
	position: relative;
	max-width: 640px;
  margin: 0 auto 2em;
  border: 16px solid #edd3a6;
  background: #497e57;
	color:white;
	padding: 1.8em;
}
p.blackboard__title {
	margin: 0 !important;
	font-size: 36px !important;
	font-weight: bolder;
}
.blackboard ul {
	padding: .5em .5em .5em 0;
  margin: 0 0 2em;
  list-style: none;
}
.blackboard ul li {
	font-size: 17px !important;
	font-weight:bolder;
	position: relative;
	padding: .7em 0 .5em 2em;
}
.blackboard ul li:before {
	font-family: "Font Awesome 5 Free"!important;
	content: "\f14a";
	top: 0;
	left: 0;
	font-size: 30px;
	position: absolute;
	color: #ffc679;
	font-weight: bold;
}
@media screen and (max-width: 1030px) {
.blackboard{
    padding: 1em;
}
p.blackboard__title {
		font-size: 30px !important;
	}
}

HTML

<div class="blackboard">
    <p class="blackboard__title">黒板消し風</p>
    <ul>
        <li>ここに文字を入力</li>
        <li>ここに文字を入力</li>
        <li>ここに文字を入力</li>
        <li>ここに文字を入力</li>
    </ul>
</div>
スポンサーリンク

ボックスを実装する手順

ボックスパターンに記されているCSSとHTMLをコピー&ペーストすることで使えるようになります。

CSSのコピー手順は以下の通り。

CSSをコピー
CSSのコードを外観 > テーマエディター > style.cssにペーストしてください。

HTMLのコピー手順は以下の通り。

HTMLをコピー
HTMLをコピーしてQuickTagにペーストしてください。
QuickTagを知らないという方は以下のリンクをお読みください。
スポンサーリンク

導入済みのブログをサイト紹介させて頂きたいと思います!

「この記事を見てボックスを導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

コメント

  1. 注意2のタイトル色が color: #ffcb8a; になってます。おそろく間違いとおもいます。

    • コメントありがとうございます。

      ご指摘の通り、間違って表記しており、先ほど修正させて頂きました。

      教えて頂きありがとうございます。

  2. お疲れ様です。超初心者で、がんばってみたのですが、降参でお尋ねさせてください。

    ①「AddQuickTagの使い方」https://y-k-studio.com/programming/wordpress/addquicktag/

     を参考に、このページの「ボックス2:メモ2」を追加CSSに張り付けて使ってるのですが、

     アイコン・ボックス共に表示されません。(文字だけ表示になります)

     いまのところ、他のボックスの枠は表示されています。

    ②すべて、アイコンが「□」に表示されています。
     

    ③Font Awesome 5に対応するには、どうすればよろしいでしょうか??

    Cocoon側は最新です。他に余計なCSSは入れていません。
    素人で大変申し訳ございません。解決のヒント頂ければ独自でがんばってみたいと思いますので、お手数ですがお教えくださればうれしいです。

    • Gene.Papさん
      当ブログを御覧くださりありがとうございます。

      本記事に記載してあるコードは全てFont Awesome4のみに対応していました。
      さきほど、全てのCSSにFont Awesome 5に対応したコードを追記しましたので、そちらのコードをコピーペーストしてください。

      それでも動かない場合はまたご連絡頂ければ対応させて頂きます。

      • 先日ご質問しました、Gene.papと申します。
        解決しました!誠にありがとうございます。

        不思議なのは、追加CSSに入れると動かないのですね。
        (style.cssでは問題なく動きます。当たり前なのでしょうが、初心者にはわけがわかりません)

        今後とも参考にさせていただきます。ありがとうございました。

        • Gene.papさん

          解決できて何よりです!

          >不思議なのは、追加CSSに入れると動かないのですね。
          普通は動くはずなのですが、もしかしたらキャッシュなどの関係で動かないのかもしれませんね。
          私も普段からstyle.cssに追記していますので、他のカスタマイズでもstyle.cssに追記してください!

  3. お世話になっております。
    すみません、もう一度検証してみたのですが、

     ・ボックス2:メモ2

    だけ、機能しませんでした。
    ボックス4:注意2 と同じ表示になります。

    HTMLに問題がありそうですが・・・。
    「答え」がわかれば、学びが得られそうです。ご教授のほど、お願いいたします。

    • Gene.papさん

      こちら側の不手際でCSSのコードが一部間違っており、ただいま修正いたしました。
      一応これで解決できているとは思うのですが、もし上手くいかない場合は、
      上手く表示されていない記事を1つリンクを貼っていただけばこちらから問題を発見できると思います。

      お手数をおかけして申し訳ありません。