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

【WordPress】SANGO風のボックスにカスタマイズする

WordPress

有料テーマの「見出し」や「ボックス」はデザインが素敵なものが多いですよね。

でも、有料テーマを購入するお金が無いから、無料テーマのシンプルなボックスを使うかぁ……って諦めてませんか?

今回は、おしゃれなボックスを誰でもコピペするだけで使用できるようにカスタマイズする方法をご紹介します

MEMO

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

以下のコードはFont Awesome 4に対応したものです。
Font Awesomeって何?という方はこちらを御覧ください。

スポンサーリンク

ボックスパターン

ボックス1:メモ用

MEMO

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

/* 
 * 全ボックス共通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"; /* アイコンを変える場合はここを変更 */
}
<div class="s_memo box-inside">
    <div class="s_memo_ttl title-box">MEMO</div>
    ここにテキストを入力
</div>

ボックス2:メモ2

ここにタイトル
ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。
/* 
 * 全ボックス共通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;
}

/* 
 * ボックス4でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s-yellow {
    border: solid 3px #ffcb8a; /* 囲んでいる枠線の色を変える場合はここを変更 */
}
.s-yellow .s-box-title:before {
    content: "\f02e";
}
.s-yellow .s-box-title {
    color:#ffcb8a; /* タイトルの文字色を変える場合はここを変更 */
}
<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 
 * 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";
}
<div class="s_memo s_alert box-inside">
	<div class="s_memo_ttl title-box">注意</div>
 ここにテキストを入力
</div>

ボックス4:注意2

ここにタイトル
ここにテキストを入力することができます。
ここにテキストを入力することができます。
ここにテキストを入力することができます。
/* 
 * 全ボックス共通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: #ffcb8a;
    line-height: 1.4;
}
.s-box .s-box-title:before {
    content: "\f071";
    padding-right: 4px;
    font-family: FontAwesome;
}
<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 
 * 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: "";
}
<div class="s-box s-box-2 box-inside">
	<div>ここにテキストを入力</div>
</div>

ボックス6 : 点線

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

/* 
 * 全ボックス共通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;
}
<div class="s-box-3 box-inside">
    <p>ここにテキストを入力</p>
</div>

ボックス7 : 両サイド

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

/* 
 * 全ボックス共通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;
}
<div class="s-box-4 box-inside">
    <p>ここにテキストを入力</p>
</div>

ボックス8 : 鍵括弧

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

/* 
 * 全ボックス共通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;
}
<div class="s-box-5 box-inside">
    <p>ここにテキストを入力</p>
</div>

スポンサーリンク

ボックスを実装する手順

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

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

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

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

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

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

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

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

コメント