menu

ul、liのドット部分をアイコンでリスト化する方法

ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。しかし、CSSでコードを書いていくのは難しいからできないなとお悩みの方は必見です。
アイコンでリスト化するまでの工程を紹介しています。簡単に済ませたい人はコピペもできますので、ご覧いただけたらと思います。

このようなリストが作れます

  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト

アイコンを使ったリストの作り方


いかがでしたでしょうか?そんなに難しくなかったと思います。
位置や大きさは設定している値を変えるだけで好みのレイアウトを設定できますので、ご自分でカスタムも可能だと思います。

使用したCSSコード

テーマによってレイアウトが異なりますので、liにpaddingを追加して調整したり、アイコンの位置やサイズをleft、top、font-sizeで調整してみて下さい。

まとめ

 以上でアイコンを使いリスト化する方法について説明しました。ドットをアイコンで表現できれば、ブログやサイトの表現力が高まると思いますので、ぜひ、参考にしていただけたらと思います。

合わせて見たい記事

当記事を見ていただければ、今回使用したFont Awesomeサイトのアイコンの使い方やAddQuicktagを使いワンクリックで入力する方法が解説してありますので、参考になると思います。

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

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

スポンサーリンク

動画編集におすすめのフリーBGM10選【youtubeオーディオライブラリ】

ul、liのドット部分を画像でリスト化する方法

関連記事

  1. 誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

  2. スライダー表示可!wordpressでサイドバーを固定するQ2W…

    スクロールする際に、サイドバーのウィジェットを常に表示させたい時ってありますよね。いろいろ探した…

  3. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

  4. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  5. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  6. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  7. ずっと挫折し続けた私が念願叶ってHTML/CSSサイトをWord…

    WordPressはCMSで世界で最も使われており、導入していて当たり前になってきてると思いますが「…

  8. TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

PAGE TOP