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のドット部分をアイコンでリスト化する方法

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

関連記事

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

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

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

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

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

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

  4. サムネイルを活したセンスが良いTCDのテーマVIEW!使用感をレ…

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

最近の記事

PAGE TOP