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のグラブル風オープニングを作成してみよう。

SHARE LIFEを書いています

中川憲治

動画編集やWEB関連などを当ブログに書き出して2年後、12年間働いていた消防士を辞め、自分のやりたいことを仕事にしたいと考えてWEB業界に転職する。

自身の体験談などを踏まえたブログを書くことにより少しでも読者に近づけていけたらなと思ってます。学びや気づきなど書いていきます。

スポンサーリンク

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

最近の記事

PAGE TOP