Cocoonで２カラムレイアウトを使用してレスポンシブな説明用吹き出しを実現する方法

２カラムレイアウトを使用してレスポンシブな説明用吹き出しを実現する方法
Cocoonの２カラムレイアウト
吹き出しのCSS

２カラムレイアウトを使用してレスポンシブな説明用吹き出しを実現する方法

２カラムレイアウトって見やすくて便利ですよね。

左カラムに画像を置いて、右カラムに説明の文章をおくと非常に理解しやすいレイアウトになります。

この右カラムの説明を吹き出しにできると見た目もgoodでいい感じだと思います。

にゃーん
左側の画像や表を右側のカラムで説明するよ！

Cocoonの２カラムレイアウト

Cocoonの２カラムレイアウト使用します。

エディタのツールボックス・タグから２カラムを選びます。

エディタ上に２色に別れた記入領域が現れます。

例えば左側に入力する内容というところに画像を貼り付け、

右側に入力する内容というところに説明する文章を貼り付けます。

右側の説明文章を吹き出しにしたいと思います。

吹き出しのCSS

画面の横幅が６００px以下(スマホとか)になると吹き出しが下に移動するレスポンシブ対応です。

PCやタブレットなどの大きいディスプレイで表示すると吹き出しが横に表示されますが、

⇩スマホなんかの横幅の狭いディスプレイで表示するとこんな感じになります。

吹き出しが下に回っていい感じですね。

/*吹き出しレスポンシブ*/

.column-wrap .column-right {
    border-left: none;
}

.fukidashi {
border: #ccc solid 4px;
position: relative;
background: #fff;
padding: 12px 10px;
border-radius: 13px;
margin-bottom:1em;
}
.fukidashi:before {
border-right: 40px solid #ccc;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
top: 30%;
content: "";
position: absolute;
left: -40px;
}
.fukidashi:after {
content: "";
position: absolute;
border-right: 39px solid #fff;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
top: 30%;
left: -32px;
}

@media screen and (max-width: 600px) {
.container .column-wrap > div {
    width: 100%;
    padding: 0 0;
}   
.fukidashi {
border-radius: 6px;
background: #fff;
margin-top: 7px;
border: solid 2px silver;
}
.fukidashi:before {
border-bottom: 20px solid silver;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -40px;
content: "";
position: absolute;
left: 40%;
}
.fukidashi:after {
border-bottom: 20px solid #fff;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -37px;
content: "";
position: absolute;
left: 40%;
}
}

このCSSを外観⇨テーマエディターを立ち上げて最下部に貼り付けます。