この記事は、Cocoonで囲み枠（ボックス）を表示させる方法を説明したものです。
囲み枠とは、例えば以下のようなものです。
先に、簡単に説明します。
ビジュアルエディタで「ブロックの追加」→「フォーマット」→「クラシック」と辿ると「スタイル」のメニューが表示されます。その「スタイル」メニューの中に様々な「ボックス」の項目があるので、好みのものをクリックすれば、囲み枠が表示されるようになります。
やっと囲み枠を出せるようになりました！
ネットを見ているとCSS(スタイルシート)を追加する必要があるとの情報があります。
でも、Cocoonだと簡単に出せます！
詳しい方法は以降の記事をご覧ください。
バージョンが異なると、表示に若干の違いが生じる場合もあるからです。
・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(無言フォローもお気軽に)
コメント
[…] […]
ミサキさん、おかげで枠のつけ方が分かりました。
ありがとうございました。
多くのサイトを彷徨って、ようやく無知なわたしでも理解できる回答のあるこちらへたどり着きました。
「バージョンが異なると、表示に若干の違いが生じる場合もある」
で、わかったのですが、
最新バージョンでは、わたしの好きなさっぱり系囲みは、使えないようです。ざんねん。
これからも、頼りにさせていただきます。
少しでもお役に立てたのなら幸いです。
記事を書いた甲斐があります(^^
・WordPress
・Cocoon
・Gutenberg
ただ段落を囲みたいだけなのに、いろいろ検索してみてもどこの何をいじればいいのかサッパリ…
CSSやらHTMLやらの世界に行くしかないかと尻込みしていたところ、こちらの記事に出会うことができ無事に解決しました！！
どうやらクラシックエディターへの切り替えのところでつまずいていたようです。
この記事を作ってくれたミサキさんに感謝！
ありがとうございました(^O^)／
このようなご報告、嬉しいです！