Cocoonで囲み枠(ボックス)を表示させる方法 | WordPress

この記事は、Cocoonで囲み枠(ボックス)を表示させる方法を説明したものです。
囲み枠とは、例えば以下のようなものです。

先に、簡単に説明します。
ビジュアルエディタで「ブロックの追加」→「フォーマット」→「クラシック」と辿ると「スタイル」のメニューが表示されます。その「スタイル」メニューの中に様々な「ボックス」の項目があるので、好みのものをクリックすれば、囲み枠が表示されるようになります。

ミサキ
ミサキ

やっと囲み枠を出せるようになりました!
ネットを見ているとCSS(スタイルシート)を追加する必要があるとの情報があります。
でも、Cocoonだと簡単に出せます!
詳しい方法は以降の記事をご覧ください。

一応、検証で使ったWordPressとテーマのバージョンを記載します。
バージョンが異なると、表示に若干の違いが生じる場合もあるからです。
・WordPress 5.2
・Cocoonバージョン: 1.7.7.2
・Cocoon Childバージョン: 1.0.6

囲み枠の出し方

ダッシュボードで「投稿」→「新規追加」をクリックして、ビジュアルエディタが表示されている状態にします。

ビジュアルエディタが表示されない人は以下を参考にして下さい。
https://caprico.xsrv.jp/190513-wordpress-visual-editor/

「ブロックの追加」→「フォーマット」と辿り「クラシック」をクリックします。

そうすると左上に「スタイル」のメニューが表示されます。

その「スタイル」メニューをクリックすると、様々な「ボックス」の項目があるので、好みのものをクリックすれば、囲み枠が表示されるようになります。

囲み枠の種類一覧

ボックス(アイコン):メモ

ボックス(案内):プライマリー

ボックス(白抜き)

ボックス(タブ):チェック

ボックス(付箋風)

おわりに

WordPress 5.0 から導入された新エディタ Gutenberg (グーテンベルグ)だと、今回の囲み記事にしても吹き出しにしても、出すのに手間がかかりますね。
もしかして、旧エディタ (クラシックエディタ)を標準にした方が良いかも知れませんね。
今後、旧エディタを標準にする方法を検討してみます。
では。


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)

コメント

  1. […] […]

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