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(無言フォローもお気軽に)

スポンサーリンク
記事を書いている人
ミサキ

プログラマ(@東京の国立研究所)として働きながら,占い師(の卵)としても活動しています.そのため,占いモニターを定期的に募集しています!⇒占いモニターのページ.実は,天文学の博士でもあります☆彡

詳しいプロフィールはこちら

ミサキをフォローする
Cocoon WordPress
スポンサーリンク
ミサキをフォローする
プログラマー&天文博士&占い師 ミサキのブログ

コメント

  1. […] […]

  2. ひとま(一間) より:

    ミサキさん、おかげで枠のつけ方が分かりました。
    ありがとうございました。

    多くのサイトを彷徨って、ようやく無知なわたしでも理解できる回答のあるこちらへたどり着きました。

    「バージョンが異なると、表示に若干の違いが生じる場合もある」
    で、わかったのですが、

    最新バージョンでは、わたしの好きなさっぱり系囲みは、使えないようです。ざんねん。

    これからも、頼りにさせていただきます。

  3. REM より:

    ・WordPress
    ・Cocoon
    ・Gutenberg

    ただ段落を囲みたいだけなのに、いろいろ検索してみてもどこの何をいじればいいのかサッパリ…
    CSSやらHTMLやらの世界に行くしかないかと尻込みしていたところ、こちらの記事に出会うことができ無事に解決しました!!
    どうやらクラシックエディターへの切り替えのところでつまずいていたようです。

    この記事を作ってくれたミサキさんに感謝!
    ありがとうございました(^O^)/

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