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

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

WordPress
2019.10.18
疑問くん
疑問くん

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

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

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

MEMO

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

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

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

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

ボックス１：メモ用

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>

ボックス２：メモ２

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

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>

ボックス３：注意

注意

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

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>

ボックス４：注意２

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

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>

ボックス５：対角線

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

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>

ボックス６ : 点線

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

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>

ボックス７ : 両サイド

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

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>

ボックス８ : 鍵括弧

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

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>

ボックス９：黒板

黒板風

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

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を知らないという方は以下のリンクをお読みください。
【WordPressプラグイン】AddQuickTagの使い方
WordPressで記事を書くときに最も使うプラグインと言っても過言ではない「AddQucikTag」例えば、AddQuickTagを使えばメリット何時でも何処でも簡単に呼び出せる記事を書くのが早くなるカスタマイズが楽しくなるのような、ボッ...
y-k-studio.com
2020.03.18

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

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

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

ご利用頂いたサイト紹介！
★193万円受給しながら転職可能★
「MamaEdu」プロジェクトは、Web・ITの専門スキルを持ち、活き活きと働く女性を増やしていくことを目的とした活動！

自立支援教育訓練給付金や高等職業訓練促進給付金のフォローを受けることができるため、最大193万円の給付金を貰いながら転職活動が可能です！
無料カウンセリングの申し込みはこちらから
この記事を書いた人
Yoshitaka

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

＼Y&K Studio のフォローはこちら／
WordPress
cocoonsangowordpressカスタマイズボックス
スポンサーリンク
＼ SHARE BUTTONS ／
Yoshitaka

コメント

  1. 名前:zzz : 投稿日：2020/04/08(水) 22:37:14 ID：U2OTcxOTY

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

    返信
    • 名前:Yoshitaka : 投稿日：2020/04/08(水) 23:39:46 ID：A0MzYzODI

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

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

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

      返信
  2. 名前:Ｇｅｎｅ．Ｐａｐ : 投稿日：2020/04/16(木) 03:03:30 ID：E1Mjk0NjE

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

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

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

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

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

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

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

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

    返信
    • 名前:Yoshitaka : 投稿日：2020/04/16(木) 15:00:13 ID：k4OTk2MDM

      Ｇｅｎｅ．Ｐａｐさん
      当ブログを御覧くださりありがとうございます。

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

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

      返信
      • 名前:Gene.pap : 投稿日：2020/04/17(金) 17:03:33 ID：M0NTE5ODk

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

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

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

        返信
        • 名前:Yoshitaka : 投稿日：2020/04/17(金) 17:32:43 ID：IzMzI1MDY

          Gene.papさん

          解決できて何よりです！

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

          返信
  3. 名前:Ｇｅｎｅ．Ｐａｐ : 投稿日：2020/04/17(金) 17:28:39 ID：M0NTE5ODk

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

    　・ボックス２：メモ２

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

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

    返信
    • 名前:Yoshitaka : 投稿日：2020/04/17(金) 17:45:24 ID：IzMzI1MDY

      Gene.papさん

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

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

      返信
  4. 名前:ブログ初心者でも簡単！おしゃれなボックス | 0からチャレンジ : 投稿日：2020/07/07(火) 21:04:29 ID：M3MzIyODM

    […] 僕はコードをかけないのでいったんY&K　Studioさんの【WordPress】コピペ可！おしゃれなボックスデザイン９選！　へ飛んでください。 […]

    返信
タイトルとURLをコピーしました