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のテーマVIEW!使用感をレ…

    私がブログを始めて1年経ち、研究のために他のブログを参考にすることがあるんですが、余計な文字が多いと…

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

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

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

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

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

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

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

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

  6. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

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

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

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

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

スポンサーリンク

さくらとXサーバーの速度比較

最近の記事

PAGE TOP