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

ワードプレス画面 ワードプレスCocoon

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

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

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

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

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

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

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

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

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

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

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

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

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

リストのボタンの変え方

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

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

  • リスト
  • リスト

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

  1. リスト
  2. リスト

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

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

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

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

アイコンリストを選択

方法は簡単です。

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

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

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

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

設定は以上です!

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

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

ワードプレスCocoonリスト

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

ワードプレスCocoonリスト

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

耳寄り情報

エックスサーバーを使いながらドメインは『お名前.com』や『ムームードメイン』などを利用しているというかたへ

ドメインをエックスドメイン に変更すればエックスサーバーと一元管理できてとっても楽です。

Xサーバー、Xドメインの管理画面です。サーバーとドメインが同じ画面で管理できてすっきりします。ミニマリストさんにもおすすめです。

エックスサーバー、エックスドメイン管理画面

◆エックスドメインただいまキャンペーン中

2021年3月31日までの期間限定で.jp .com .net他8種類ドメインの移管料金が利用料込みでなんと1年間110円(税込み)になるキャンペーン中です。

出典:エックスドメイン
詳しくはこちら→エックスドメイン

◆エックスサーバー以外のサーバーを利用しているというかたへ

エックスサーバー では、2021年4月1日(18:00)まで

“ドメイン永久無料&初期費用0円キャンペーン”を実施中です。

なんとエックスサーバーでアカウントを取るとドメインが1つ無料でもらえます。そしてそのドメインはエックスサーバーと契約している限りずっと無料で使っていいというのです。

ドメインの移管でもこのキャンペーンの対象となるのでこの機会にサーバーとドメインをXサーバーで統一してみてはいかがでしょうか?初回10日間は無料でお試しできます。

わたしはキャンペーンの少し前にXサーバーにドメイン移管をしてしまいました…。みなさんはこの機会をお見逃しなく!

\エックスサーバーキャンペーン中/

さらに上を行くWordpressのテーマはこちら↓

【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群

インターネット接続キャッシュバックでお得です↓

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