WordPress Cocoonの囲み枠の表示方法 グーテンベルクエディタ

パソコン関係

本記事ではWordPressテーマCocoonとグーテンベルク(ブロック)エディタで簡単に囲み枠を表示させる方法を解説します。HTMLの知識が全くなくてもできる方法です。

このような枠(ボックス)を表示させる方法です。

囲み枠の表示方法

真ん中or右側の+のブロック追加アイコンをクリックします。

Cocoonブロックをクリックします。

表の中から使いたいボックスをクリックします。

ボックスの本文が表示されている内部ではなく枠の部分をクリックすると色設定が右側に表示されます。

枠の色や背景色を変更できます。

Cocoonブロック13種類の紹介

アイコンボックス

おはよう!Fumiです。おはよう!Fumiです。おはよう!Fumiです。

案内ボックス

こんにちは!Fumiです。こんにちは!Fumiです。こんにちは!Fumiです。

白抜きボックス

こんばんは!Fumiです。こんばんは!Fumiです。こんばんは!Fumiです。

付箋風ボックス

ブログ初心者のFumiです。Fumiです。Fumiです(。´・ω・)?

タブボックス

コーヒーが好きなFumiです。 ^^) _旦~~

吹き出し

Fumi
Fumi

こんにちは!Fumiです。

ブログカード

ボタン

囲みボタン

アフィリエイトリンクなどをボタン化する用

トグルボックス

3,376m クリックした人だけに詳しい情報を表示させることができます。

検索案内

タイムライン

タイムラインのタイトル
  • ラベル

    年末まであと 0日

アイコンリスト

Fumiってどんな人?
  • コーヒが好き
  • ギターが好き
  • 読書が好き
  • モンハンにハマっている
  • 出来れば引きこもっていたい
  • 大人数が苦手
  • どうでもいい人との雑談が苦手

リストのアイコンを変えたり枠で囲ったり背景色を変えることができます。

Cocoon汎用ボックス

見出しと内容を書き込めるボックスです。3種類あって見出しのデザインによって使い分ける感じで良いと思います。

見出しボックス

見出し

こんばんは!Fumiです。

タブ見出しボックス

見出し

こんばんは!Fumiです。

ラベルボックス

見出し

こんばんは!Fumiです。

以上!ノシ

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