wordpressの番号なしリストを好きな画像に置き換える簡単カスタマイズ方法

利用頻度の高い『番号なしリスト』がいつも「●(黒丸))」だとなんか味気ないし、他のブログのようにもっと素敵な絵文字とかに置き換えたいって思いますよね。

でも、初心者のころってなかなかHTMLとCSSに意識がまわらず苦労するんです。

なので、初心者にも簡単にできる「●(黒丸)」を「」に変換する方法を解説していきたいと思います！

では、いってみましょう！！

番号なしリストの「●」を「画像」に置き換える変更手順

手順は、

の3段階です。

１つ１つは誰でもできる簡単作業です。拒否反応を示さずこなしていきましょー。まずは１の『設定したい画像を選んでwordpressにアップデート』からです。

設定したい画像を選んでwordpressにアップデート

「●」をリストマークと言いますが、今回はこのリストマークを別の画像に置き換えていきます。画像の素材として今回は以下の来夢来人から画像をダウンロードしていきたいと思います。

さっそくサイトにアクセスしてください。アクセスしたら、まずはお気に入り画像を選びましょう。

そして画像が決まったら、画像の上で右クリックして『名前を付けて保存』をしてください。

保存はできましたか？

もし、ここで画面全体の画像など意図しない画像が保存されている場合にはもう一度画像の上で右クリックをしてみてください。

私は下の矢印を保存しました。

では次に、wordpressに保存した画像をアップデートに移っていきます！

wordpressを立ち上げてください。そして、左上の方にあるメディア→新規追加をクリック。

そして『ファイル選択』を押下し、先ほどの画像をアップロードしてください。

次に画像をアップロードしたら、右上側の『URL』の部分をコピーしテキストなどに張り付けておいてください。

のちほどCSSにそのまま貼り付けする際に利用します。

ここまでは大丈夫でしょうか？

まとめると

です。

続いてCSSの追記に入ります。簡単なので気負わないでください！

CSSを追記する

追記するCSSは以下です。

上の『画像をアップロードしたURL名』の部分に先ほどテキストに張り付けておいた『画像アップロード時のURL』を張り付けてください。

CSSの追記は、

• 外観→カスタマイズ→CSS追記
• 外観→テーマ編集→スタイルシート追記

の2パターンどちらからでもOKです。

外観→カスタマイズと進む場合には、

続いて『追加CSS』をクリック。

一番下にペタッと貼り付けてください。

これで完了です！

次に外観→テーマ編集と進んだ場合には

スタイルシートを選択し、最下部にペタッと張り付けてください。

これで完了です。

CSSの部分をまとめると

となります。

CSSも意外と簡単ですよね？続いてHTMLに移っていきます～！

HTMLの追記

通常の番号なしリストのHTMLの変更点は以下の青太文字部分です。(もし上手く反映していなければ「”」が二重で入っていないかチェックしてください)

通常通り文章を打ち、wordpressのビジュアルモードをテキストモードに変更してください。

すると「番号なしリスト」は以下のHTMLが記載されています。

<ul>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
</ul>

この<ul>の横に上の青太文字の『 class=”sample-list-1″』を追記してください。

これでうまく反映していれば成功です！

番号なしリストを好きな画像に置き換える変更手順のおさらい

となります。少しだけ補足です。

CSSとHTML追記をした青太文字の中に“sample-list-1”がありますが、ココは自分の管理しやすい言葉に変更することが可能です。

(ただし、先頭の文字は小文字の英字である必要がありますのでご注意ください)

今回はsample-list-1としておりますが、私の場合であればliz-list-1など変更をしております。

リストマークはいくつかパターンを登録しておくとバリエーションが増えて記事を書くのも少し楽しくなります！ぜひ参考にしてください。

番号付きリストのカスタマイズ方法については以下に記載しています。

今回参考にさせて頂いたサイトは