CSS

グーテンベルグでも可能！リストマーカーをCSSで画像にするやり方

グーテンベルグでも可能！リストマーカーをCSSで画像にするやり方

前回、CSSを使ってリストマーカーを変更する方法をまとめました。

青い★リストマーカーも簡単！箇条書きリストのCSSを使った装飾のやり方
青い★リストマーカーも簡単！箇条書きリストのCSSを使った装飾のやり方
2020.12.9
箇条書きの・(点)をいろいろと変えてみよう。CSSで簡単に変えることができますよ。...

今回はその続きです。今回はCSSで、準備されているリストマーカーでも文字や記号でもなく、画像を使ったリストマーカーにしてみましょう。基本的な考え方は同じです。

CSSを書く場所などはこちらをご覧ください。

WordPressサイトのカスタマイズに必要なCSSを書く場所や書き方
WordPressサイトのカスタマイズに必要なCSSを書く場所や書き方
2020.12.4
WordPressをカスタマイズするために必要な基本知識をまとめました。CSSを書く場所やCSSの書き方を理解して、自分のオリジナルデザインのサイトを作りましょう。...

CSSでリストマーカーを画像にする方法

１．画像の準備

まずは画像の準備です。イラストACやMaterial Iconsなどの無料で画像をダウンロードできるサイトがあるので、リストマーカーにしたい画像を準備しましょう。

私の場合は、よく見るタイプの左の画像をリストマーカーにしてみます。


２．画像のアップロード

WordPress管理画面の左サイドバーメニュの『メディア』⇒『新規追加』をクリックします。

すると以下の画面が表示されますから、マーカーにしたい画像をドラッグアンドドロップするか、または『ファイルを選択』をクリックし、リストマーカーにしたい画像を選択し『開く』をクリックします。

画像がアップロードされ、下のような画面が表示されますから、『編集』をクリックします。

次に表示される画面の「ファイルのURL」をメモしておきましょう。『URL をクリップボードにコピー』をクリックして、テキストエディターかメモ帳などに張り付けておくとよいと思います。

これで画像のアップロード作業は完了です。

３．CSSの追加

HTML

<ul class="check-box-red">
    <li>箇条書き１</li>
    <li>箇条書き２</li>
    <li>箇条書き３</li>
</ul>

CSS

ul.check-box-red {
  list-style-type:none;
}

ul li{
  background-image: url('ここにメモした画像URL');
  background-repeat:no-repeat;
  background-position:left center;
  background-size: contain;
  -moz-background-size:contain; /*古いアンドロイド端末のための設定です。*/
  -webkit-background-size:contain; /*古いアンドロイド端末のための設定です。*/
  padding-left: 1.8em;
}

以下のようにリストマーカーが変わりましたね。

  • 箇条書き１
  • 箇条書き２
  • 箇条書き３

グーテンベルグでHTMLにclassを追加する方法

１．「高度な設定」を利用する方法

投稿画面の左上『＋』⇒『リスト』をクリックし箇条書きを書きます。

箇条書きが終わったら、カーソルはそのままリストのブロックの中に置き、右上の『歯車マーク』をクリックします。上部タブが「ブロック」になっていることを確認して、『高度な設定』をクリックします。開いた『追加 CSS』の欄にHTMLに追加したいclass名を半角英数字で入力します。例えば上の私の例でしたら、『check-box-red』と入力することになります。

２．「HTMLとして編集」を利用する方法

箇条書きが終わったら、上部メニュー右端の『縦三点』⇒『HTMLとして編集』をクリックします。すると変種画面がHTMLになりますから、手打ちで入力しましょう。終わったら同じ要領で『ビジュアル編集』をクリックすると元の画面に戻ります。

CSSは子テーマか、カスタマイズの『追加 CSS』の欄に記入してください。

最後に

おすすめの記事