スポンサーリンク

WordPress【Cocoon】囲みボックスを作る方法

スポンサーリンク
Wordpress【Cocoon】
スポンサーリンク

こんにちは!(仮)です😄

果たして、このブログを何回か見に来てくれてる方が居るのか…

今回もよろしくお願いします!

皆さんのブログを見てると囲みボックスを上手く使ってて、

非常に見やすい編集されてますよね?

て事で、私も囲みブロックに挑戦させていただきました!

スポンサーリンク

WordPress【Cocoon】囲みボックスを活用しよう!

WordPressの「Cocoon」で囲み枠(ボックス)を作りたいけど

やり方がわからないと悩んでいませんか?

やってみると、めちゃ簡単♪

初心者でも、直感的に作成できます!

画像付きで説明していきますね😄

これは、白抜きボックスを使いました!

ボックスの作り方は、次の画像挿入手順と、

途中迄ほぼ同じなので参考にして下さい。

【囲いボックス】アイコンボックスに画像を入れてみた!

まずは、ボックスなるものが、何処にあるのか?

呼び出し方から説明させていただきます。

ブロックを選択すると、右側の「+」をクリックしていただき、

メニューから全ての表示をクリックしていただきます。

そうしますと、左側にメニューが展開されるので、検索で「ボックス」

※最初のメニューの検索からでもOKです!

そうすると、10種類のボックスが表示されます。

今回は、アイコンボックスを使用します。

アイコンボックスの配置が完了したので画像を選択して挿入します。

画像の挿入もアイコン内のブロックの「+」からメニューを開き画像を選択

普通に文章を入れていく場合は、囲い内でブロックを追加して

記事を書いて下さいね。

それでは、画像挿入です。

アップロード選択が出てきますので画像を選んで決定です!

囲いだと、画像だけでなく文章も囲い内に入れる事が出来るんです!

下のアイコンボックスの画像、こちらが作業終了した例になります。

めちゃくちゃ簡単ですよね♪Cocoon優秀すぎます🤩

ここにコメント

同じ手順で、カスタムHTMLを選択して広告を挿入してみました!

ココナラさんは登録無料で、優秀なクリエイターと繋がれる♪

困った時には覗くのも一考です😄

囲いボックスにリストを入れる方法

それでは、白抜きボックス内にリストを入れていきます。

他の説明だと難しいこと書いてたのですが、いたって簡単♪

上の手順と同じで、白抜きボックスを選択し、設置します。

囲い内のブロックの「+」からメニューを開き「リスト」を選択

コメント記載してEnterしていただき完成です!

かなりCocoonの運営さん優秀なのでアプデで簡単になったのだと思います😄

  • コメント
  • こめんと
  • コメント
  • こめんと