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. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

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

  2. 【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

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

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

  4. wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

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

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

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

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

  7. WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

  8. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

PAGE TOP