Cocoon(コクーン)で囲み枠を作る方法【黒板・ホワイトボード編】

Cocoon(コクーン)で囲み枠を作る方法【黒板・ホワイトボード編】Wordpress
  • Cocoonで囲い枠を作りたい
  • 黒板とかホワイトボード風の枠が作りたいな

こんな要望に答えます。

 

Cocoonであれば、専門知識なしで作成可能です。

 

記事内で紹介するコードをコピーして貼り付けするだけでOK(丸パクりOK)。

 

今回は「黒板」「ホワイトボード」風の囲い枠の作り方を解説します。

 

本記事を参考にすると、CSSをいじったりもせずリスクなしで、簡単に作ることができます。

 

記事の内容

  • Cocoonで囲み枠を作る方法:黒板編
  • Cocoonで囲み枠を作る方法:ホワイトボード編
スポンサーリンク

Cocoon(コクーン)で囲み枠を作る方法:黒板編

Cocoon(コクーン)で囲み枠を作る方法:黒板編

完成形はこんな感じ。

タイトル本文

 

Cocoonであれば、リスクなしで簡単に作成することができます。

  1. 「抜粋」にコード貼り付け
  2. 「カスタムCSS」にコード貼り付け

 

編集ページの一番下に下記のような画面があるので、その場所に本記事で紹介するコードを貼り付けるだけでOK。

位置

 

【抜粋】

<div class="kokuban-t1"><span class="title-t1">タイトル</span>本文</div>

(※テキスト画面にも貼り付けしましょう)

 

【カスタムCSS】

.kokuban-t1 {
position: relative;
margin: 2em auto;
padding: 3.2em 1em 1em;
width: 100%;
background-color: #1f3134;
color: #fff;
border: 8px solid #8b4513;
border-radius: 2px;
box-shadow: 0 0 5px #333;
}
.kokuban-t1::before,
.kokuban-t1::after {
position: absolute;
content: '';
bottom: 0;
}
.kokuban-t1::before {
right: 10px;
border: solid 3px #e60033;
width: 20px;
border-radius: 3px 2px 0 2px;
}
.kokuban-t1::after {
right: 40px;
border: solid 3px #fff;
width: 15px;
border-radius: 8px 5px 2px 5px;
}
.title-t1 {
position: absolute;
left: 1em;
top: .5em;
font-weight: bold;
font-size: 1.1em;
color: #e60033;
}

 

ガオ
ガオ

「タイトル」「本文」を自由に書き換えて使いましょう!

ホイケル
ホイケル

 

Cocoon(コクーン)で囲み枠を作る方法:ホワイトボード編

Cocoon(コクーン)で囲み枠を作る方法:ホワイトボード編

完成形はこんな感じ。

タイトル本文

 

手順は黒板の時と全く同じ。

  1. 「抜粋」にコード貼り付け
  2. 「カスタムCSS」にコード貼り付け

 

【抜粋】

<div class="wboard-w2"><span class="title-w2">タイトル</span>本文</div>

(※テキスト画面にも貼り付けしましょう)

 

【カスタムCSS】

.wboard-w2 {
position: relative;
margin: 2em auto;
padding: 3.2em 1em 1em;
width: 100%;
background-color: #fff;
color: #000000;
border: 5px solid #c6c6c6;
box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.wboard-w2::before,
.wboard-w2::after {
position: absolute;
content: '';
bottom: 4px;
width: 25px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
}
.wboard-w2::before {
right: 60px;
border: solid 3px #333;
transform: rotate(0deg);
}
.wboard-w2::after {
right: 22px;
border: solid 3px #e60033;
transform: rotate(0deg);
}
.title-w2 {
position: absolute;
top: .6em;
left: 1em;
font-weight: bold;
font-size: 1.1em;
color: #e60033;
}

 

ジミー
ジミー

ヌニョッキ!

ガオ
ガオ

『ヌニョッキ!』だそうです!

 

Cocoon(コクーン)で囲み枠を作る方法:まとめ

まとめ

Cocoonであれば、子テーマなどをいじらずに簡単に囲い枠が作成可能です。

要所で使用すれば記事が見やすくなるので、うまく活用しましょう。

 

また、他の役に立つブログ記事は下記にまとめていますので、ご活用下さい。

ブログ記事一覧へ≫

 

人気記事 おすすめのASP5選+1を徹底比較【アフィリエイトで稼ぐ裏技あり】

人気記事 おすすめ動画配信サービス5選!値段・機能を徹底比較

コメント

プロフィール

ガオの顔

ガオ
現在21歳。ブログ開始5ヵ月で新卒の平均給料を達成。当サイト『ガオのノート』ではブログにおける有益かつ再現性の高い情報を発信しています。

【 実績 】

  • 3ヵ月で14万pv
  • 5ヵ月で収益20万
  • 書籍出版の依頼獲得
  • 5ヵ月でフォロワー数1万人
  • 大手企業より取材依頼を獲得
  • 企業コンサルタント依頼獲得

>>取材依頼等はこちら

>>ライティング依頼はこちら

 

お問い合わせ

お問い合わせは下記に必要事項を記入し送信してください。

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