menu

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

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

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

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

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


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

使用したCSSコード

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

まとめ

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

合わせて見たい記事

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

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

最新情報をお届けします

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

スポンサーリンク

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

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

関連記事

  1. 【動画版】wordpress初心者でもバックアップし復元する方…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

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

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

  3. facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  4. WordPressを始める初心者におすすめ!テーマ選びの5つのポ…

    これから、Wordpressを始める人にとって、Wordpressテーマを決めるのは、重要ですよね。…

  5. 【動画版】子テーマでのバイラルメディア風facebookボタン設…

    この記事が気に入ったらいいね!しようというバイラルメディア風オリジナルSNSボタンの設置方法について…

  6. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  7. たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法…

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

  8. WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

PAGE TOP