menu

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

ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の好きな形でリスト化できるので良いですよね。
でもどうすればいいかわからないですよね。それで今回、そのようにお悩みの方にul,liのドット部分に画像を挿入する方法について紹介したいと思います。

画像を挿入したリストの例

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

アイコン画像の切り取りとリサイズ

アイコン画像について画像編集サイトBeFunkyを使って、画像素材を切り取ってサイズを変更する方法について動画で解説しました。
アイコン画像の切り取りとリサイズ

ul,liのドット部分に画像を挿入する方法

wordpressの場合「管理画面」→「メディア」→「ライブラリ」から入り
下のとおりにライブラリからURLを画像URLに貼り付けます。

2015-12-30_00h26_22以上のようにライブラリからコピーしてliタグの中に貼り付けるだけで画像を挿入することができます。

まとめ

いかがでしたでしょうか?簡単にできたかと思います。アイコン画像を利用して、表現豊かなサイト作りのお役に立てていただけたら幸いです。

使用したサイト

BeFunkyのサイトBeFunky

当ブログでもBeFunkyの使い方を紹介しています。

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

最新情報をお届けします

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

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

After EffectsでCMのグラブル風オープニングを作成してみよう。After EffectsでCMのグラブル風オープニングを作成してみよう。

関連記事

  1. スライダー表示可!wordpressでサイドバーを固定するQ2W3 Fixed Widget

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

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

  2. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾はお手のもの

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

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

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

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

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

  4. thumb-575033_1280

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

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

  5. 40762277_m

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

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

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

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

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

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

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

    ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。…

  8. wordpressのドメインを変更しGoogleに通知する方法

    wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

PAGE TOP