番号なしリンクに画像の設定

トップページのリストに画像を付け加えました。

りんご
いちご
みかん
ぶどう

上記のような文字列を番号なしリストにする場合、テキスト画面が作りやすいようです。
1、はじめにリンゴの上の空きの部分にカーソルを入れて、「ul」をクリック
この時、クリックしたアイコンを見ると、 ul が /ul に変わっています。
次にぶどうの下の空きの部分にカーソルを入れて「/ul」をクリック

2、今度は、りんご の左にカーソルを置いて「li」をクリック
タブが効いて、左に下がります。
次に、りんごの後ろにカーソルを置いて、 変化した「/li」をクリック
文字列の間がひらきますのが、詰めることもできます。

3、いちご みかん ぶどうと同じように繰り返すと、出来上がりです。
ビジュアルを見ると、頭に「・」が入ります。

  • りんご
  • いちご
  • みかん
  • ぶどう

4、この「・」を画像に変えるには、まず、頭につけたい画像maruをメディアにアップロードします。
編集に行って、この画像のリンク先のurlをコピーします。 パーマリンクではいけません。

5、ulのタグの中に次のように記入します。
style=”list-style-image : url(http://homeken.sakura.ne.jp/mukago/wp-content/uploads/2013/09/maru.gif);”
 
ul2

こんな感じ。赤い画像が少し上過ぎるのが気になります。
この画像についている影のせいで、画像の下と、文字の下が揃わないみたいです。
手作りして、ただの赤い丸にすると良いかも知れません。

  • りんご
  • いちご
  • みかん
  • ぶどう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です