[Cocoon2021]ワードプレス簡単リストアイコンカスタマイズCSS変更なし!

エディタはGutenberg(グーテンベルグ)、テーマはCocoon

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

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

ワードプレスCocoonの標準リスト表示

グーテンベルグエディタでのリストの出し方

リストのボタンは下の画像、ワードプレス投稿編集画面の左上か右横の(⊞マーク)を押して探します。

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

右上の⊞マークを押した場合

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

右横の⊞マークを押した場合

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

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

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

リストのボタンの変え方

文字の前にくるマークをドット(・)にするか番号(1,2,3…)にするかは上の画像ので囲った部分で変更することができます。

ドットを使用したリストはこちら↓

  • リスト
  • リスト

番号を選択した時は下のように表示されます。

  1. リスト
  2. リスト

Cocoonリストのカスタマイズ方法

こちらの方法だとCSSを変更することなく

色も変えられます!
枠もつけられます!
背景に色も!!

このようなアイコンに変更することができます。順番に見ていきましょう。

アイコンリストを選択

方法は簡単です。

⊞のマークを押してその中の“アイコンリスト”をクリックします。

ワードプレスCocoonリストカスタマイズ画面

すると上の画像のような状態になると思います。この状態で画面右側の“ブロック”エリアからアイコンを選んだり、アイコンの色を変えたりできます。色設定の下には枠の色や背景を設定できる場所もあります。

これらを組み合わせると、先ほどのようないろいろなリスト表示ができるようになります!

設定は以上です!

最後に1つ注意していただきたいこと

“アイコンリスト”を選択していても下のような状態にしかならない!(リストのカスタマイズができない!)ということが出てくるかと思います。

ワードプレスCocoonリスト

これは、リストの部分(下の画像のの部分)を選択してしまっているのが原因です。

ワードプレスCocoonリスト

の部分をクリックすれば、カスタマイズができる状態に戻ります。

さいごに

その他ワードプレスCocoonの設定方法はこちらです。分かりやすい説明を心がけています。

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

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

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

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

A8.net

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

A8.netではアフィリエイト初心者セミナーが年に数回開催され、こちらも無料で参加することができます(Zoomでのウェビナーです)。私も参加したことがありますが、とても参考になりました。

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

バリューコマース

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

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

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



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

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

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

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

もしもアフィリエイト

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

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

参考記事

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

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

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

アクセストレード

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

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

アクセストレードのトップページでは広告数や人気の広告主を見ることができるほか、アフィリエイトの始め方の記事を読むことができます。こちらも無料の初心者向けセミナー(Zoom)が時々開催されます。

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

afb(アフィビー)

カンファレンスバナー

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

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

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