menu

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

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

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

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

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


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

使用したCSSコード

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

まとめ

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

合わせて見たい記事

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

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

最新情報をお届けします

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

スポンサーリンク

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

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

関連記事

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

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

  2. 【動画解説】wordpressをさくらからエックスサーバーへ引っ…

    当ブログはさくらインターネットのスタンダードプランに契約していたのですが、80記事を超えてきてから、…

  3. wordpressど素人がWordCamp Kansai 201…

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

  4. 【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

  5. 本気でスキルを身に付けたい人におすすめのプログラミングスクール5…

    本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みた…

  6. 誰でもできるcontact form 7にボタン画像を設定する方…

    contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。 以前、…

  7. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

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

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

PAGE TOP