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. お名前.comから独自ドメインを取得してwordpressをイン…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PAGE TOP