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

2020 2/16

2020.02.16 2020.02.16

Cocoonで囲い枠を作りたい
黒板とかホワイトボード風の枠が作りたいな

こんな要望に答えます。

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

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

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

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

✔ 記事の内容

Cocoonで囲み枠を作る方法：黒板編
Cocoonで囲み枠を作る方法：ホワイトボード編

Cocoon（コクーン）で囲み枠を作る方法：黒板編

完成形はこんな感じ。

タイトル本文

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

「抜粋」にコード貼り付け
「カスタム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（コクーン）で囲み枠を作る方法：ホワイトボード編

完成形はこんな感じ。

タイトル本文

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

「抜粋」にコード貼り付け
「カスタム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;

}