[Cocoon2021]リストをボックスで囲みたい,ボックスの作り方。ワードプレスならHTML不要

ボックス風のリストとは

例えばこのような感じのものです。この他にもボタン1つで色々なボックスを呼び出すことができます。CSSもHTMLも使いません。

  • 『お名前.com』などのドメインを利用している方
  • XサーバードメインならXサーバーと一元管理できてかなり便利です
エックスドメイン キャンペーン中

さらにこのようなことまでボタンで簡単にできてしまいます。

エディタはGutenberg、テーマはCocoon

こちらはWordpress5.5の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています。ワードプレスの投稿画面も日に日にバージョンアップして変わっていくので、2021年に加筆修正しています。

それでは具体的にご説明していきます。

ボックスの作成方法

投稿画面左上か右横の(⊞のマーク)をクリックします。

ワードプレスコクーンリスト&ボックス

左上のをクリックすると下のような画面が、

ワードプレスコクーンリスト&ボックス

右横のをクリックすると下のような画面が出てきます。

ワードプレスコクーンリスト&ボックス

左上の⊞を押したときは下の方にスクロールしていくと『Cocoonブロック』が見つかると思います。かなり下のほうです。その中からお好きなものをクリックします。

ワードプレスコクーンリスト&ボックス

右の⊞をクリックすると上部にはよく使うものが表示されます。その中に“ボックス”が入っていないときは、下に【すべて表示】の文字が出てくるのでそちらをクリックして“ボックス”を探します。

ワードプレスコクーンブロック

それでは実際のボックスがどのようなものかこれからご紹介していきます。

案内ボックス

1行目

2行目

付箋風ボックス

1行目

2行目

アイコンボックス

1行目

2行目

白抜きボックス

1行目

2行目

タブボックス

1行目

2行目

アイコンリスト

  • 1行目
  • 2行目

ざっとこのようなボックスがいとも簡単に作れます。

リストも入れられます

例えば先ほど出てきた『タブボックス』に『リスト』を追加してみると

  • 1行目
  • 2行目

このようになります。違いがお分かりになりますか?

先ほどのただのタブボックスはこちらです。

1行目

2行目

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

タブボックスを出した状態でをクリックします。

ワードプレス コクーン ボックス

『リスト』を選択します。

ワードプレス コクーン リスト

するとボックスの中にリストを入れることができました。

ワードプレス コクーン リスト

もちろん番号付きのリストも作成できます。

  1. ボックス風リスト
  2. グーテンベルグエディタならとにかく簡単!
  3. 参考になったら嬉しいです。

こんな感じになります。

枠と背景の色の変え方

  1. タブボックスに
  2. リストを入れました
  3. 枠の色は紺
  4. 背景色は薄ピンク
  5. 文字色はキーカラーにしました

呼び出したボックスが選択された状態で右側の『ブロック』を見てみると『色指定』が見つかると思います。

ワードプレス コクーン ボックス

『色指定』を開くと枠や背景、文字の色を変更することができます。

ワードプレス コクーン ボックス

現在選択中の色は下のようにチェック✓が入るのでわかりやすいです。

ワードプレス コクーン ボックス

さいごに

ほかにもWordpressの使い方を記事にしています。よろしければご覧ください。

ワードプレスCocoon
WordpressのCocoonテーマでグーテンベルグエディタを使用しての記事の書き方や設定方法をご紹介しています。その他サイト型トップページ作成方法、Cocoon設定一覧など。できるだけ簡単に設定できる方法をご紹介しています。分かりやすい説明を心がけています。

WordPressでアフィリエイトはじめませんか?

私が実際に登録しているASP(アフィリエイトプロバイダー)です。どれも登録料は無料です。

長期間使わなくても成果が出なくても特にペナルティーなどはありませんし、無料の初心者向けオンラインセミナーが開催されているASPもあります。登録しておいて損はないです。

A8.net

会員数、広告主数ともに最大規模を誇るアフィリエイトサービス。登録しておいて間違いはないです。私もA8.netから収益が出ています。

公式ページにはほんの少しですがA8.netで提携できる広告主や、A8.netで収益を上げている方からのメッセージが載っています。

詳しくは公式サイトでご確認ください⇒A8.net

バリューコマース

バリューコマースでは。ネットでよく見かける以下のような複数のアフィリエイトリンクを同時に表示させることができるパーツも作ることができます。

MyLinkBox(マイリンクボックス)という名前です。私はこのマイリンクボックスをよく使っています。収益も出ています。

実際にバリューコマースのマイリンクボックスを使って作ったリンクです↓



以下は実際にマイリンクボックスを使って書いた記事になります。参考にしてみてください。

2021年しゃべる地球儀おすすめ9選比較.レビューや口コミ,購入時のポイントも
しゃべる地球儀はたくさんあります。メーカー、価格、サイズ、情報量などそれぞれに特徴があるのでまとめました。最適な商品を選ぶお手伝いができればと思います。

公式ページではバリューコマースで提携できる50社ほどの広告主を見ることができます。

詳しくはバリューコマース公式サイト⇒https://www.valuecommerce.ne.jp/info/register.html

もしもアフィリエイト

もしもアフィリエイトでも上のバリューコマースのような商品紹介パーツを作ることができます。

実際にもしもアフィリエイトのMyLinkBoxを使って作っています↓

参考記事

カエレバみたいな複数の広告主のアフィリエイトリンクを同時に表示するには?
カエレバのように複数の広告主のアフィリエイトリンクを同時に表示するにはどのサイトのどの機能を使ったらよいのかカエレバ以外に2つご紹介しています。

もしもアフィリエイトのトップページにある“もしもアフィリエイトの教育サービス”では、有名ブロガーさん達のアフィリエイト講座やノウハウ集を読むことができます。

もしもアフィリエイト公式サイト⇒https://af.moshimo.com/

アクセストレード

アフィリエイトのアクセストレード

報酬が税込1,000円から振り込んでもらえるのが良いところです。振り込み手数料も無料です。上の3つのプロバイダーに無い広告もたくさんあります。

アクセストレードのトップページでは広告数や人気の広告主を見ることができるほか、アフィリエイトの始め方の記事を読むことができます。

公式サイトはこちらです⇒https://www.accesstrade.ne.jp

afb(アフィビー)

カンファレンスバナー

アフィビーは最低支払金額が777円で、777円を超えると手数料無しで登録口座に振り込んでくれます。いくつか広告を使わせてもらっています。

何回かセミナーに参加しましたが、スタッフの方の対応も良くて好感の持てるASPです。

afbの公式サイトはこちらです⇒https://www.afi-b.com/
ワードプレスCocoon
osaifullをフォローする
おさいフル
タイトルとURLをコピーしました