ul、liのドット部分を画像でリスト化する方法
wordpress
ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の好きな形でリスト化できるので良いですよね。
でもどうすればいいかわからないですよね。それで今回、そのようにお悩みの方にul,liのドット部分に画像を挿入する方法について紹介したいと思います。
画像を挿入したリストの例
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
アイコン画像の切り取りとリサイズ
アイコン画像について画像編集サイトBeFunkyを使って、画像素材を切り取ってサイズを変更する方法について動画で解説しました。
ul,liのドット部分に画像を挿入する方法
|
1 2 3 4 5 |
<ul> <li style="list-style: url('画像URL');">テキストテキスト</li> <li style="list-style: url('画像URL');">テキストテキスト</li> <li style="list-style: url('画像URL');">テキストテキスト</li> </ul> |
wordpressの場合「管理画面」→「メディア」→「ライブラリ」から入り
下のとおりにライブラリからURLを画像URLに貼り付けます。
以上のようにライブラリからコピーしてliタグの中に貼り付けるだけで画像を挿入することができます。
まとめ
いかがでしたでしょうか？簡単にできたかと思います。アイコン画像を利用して、表現豊かなサイト作りのお役に立てていただけたら幸いです。
使用したサイト
BeFunkyのサイト
当ブログでもBeFunkyの使い方を紹介しています。
ulやolで箇条書きにする際に､ドットや数字の代わりにアイコンを使いたい時ってありますよね。しかし､CSSでコードを書いていくのは難しいからできないなとお悩みの方は必見です。
アイコンでリスト化するまでの工程を紹介しています。簡単に済ませたい人はコピペもできますので、ご覧いただ...
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life