2019年10月5日

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

スポンサーリンク

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

wordpress 番号なしリスト

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

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

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

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

黒丸を絵文字に変える

手順は、

  1. 設定したい画像を選んでwordpressにアップデート
  2. CSSを追記
  3. HTMLの追記

の3段階です。

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

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

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

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

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

リストマーク画像保存方法

保存はできましたか?

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

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

パソコン内の画像保存

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

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

wordpress メディア新規追加

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

wodpress 画像アップロード画面

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

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

画像アップロード後URL画面

 

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

まとめると

  • 気に入ったリストマークの上で右クリックで保存
  • wordpressに画像をアップロード
  • アップロードした画像のURLをテキストに張り付け

です。

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

CSSを追記する

追記するCSSは以下です。

.sample-list-1 {
list-style-image: url(画像をアップロードしたURL名
);
}

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

CSSの追記は、

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

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

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

カスタマイズ

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

wordpress 追加CSS画面

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

wordpress CSS追記画面

これで完了です!

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

外観→テーマ編集

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

wordpress スタイルシート画面

これで完了です。

CSSの部分をまとめると

  • 用意してあるCSSに画像URLを張り付ける
  • 外観→カスタマイズ→CSS追記か外観→テーマ編集→スタイルシートのいずれかで張り付ける

となります。

CSSも意外と簡単ですよね?続いてHTMLに移っていきます~!

HTMLの追記

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

<ul class=”sample-list-1″>
<li>〇〇〇</li>
<li>〇〇〇</li>
<li>〇〇〇</li>
</ul>

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

wordpress 記事執筆画面

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

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

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

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

      • <ul>の横に

    class=”sample-list-1″を追記する

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

リストマーク変更する手順まとめ記載したホワイトボード

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

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

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

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

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

こちらも読まれています!

Table of Content Plusでカテゴリーのみのサイトマップを作成する方法

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

この記事が気に入ったら
いいね ! しよう

Twitter で
スポンサーリンク