ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 画像のリストをつくる

画像のリストをつくる

画像リストの見本

リストは作りたいんだけど、黒丸やら数字ではいまいちパッとしないから嫌だなぁと思っている人は、画像をリストにするのがいいと思います。

画像をリストにすれば、使える種類がグンと増えてきっと自分が気に入るリストを作れると思います。

ちなみにどんな感じになるのかというと、
  1. 甲・乙・丙

  2. 丁・戊・己

  3. 庚・辛・壬・癸

この様になります。マークや数字と全然違った感じになりますよね。

それで実際にどうやってやるのかというと、まずリストの基本を知らない人は
「リストをつくる」から先に読んで下さい。
リストを作る時の<ul>の後ろにSTYLE="list-style-image: url(http://blog~~~.gif);"をつけると画像のリストになります。他の所はそのままで大丈夫です。

個別の画像リストの作り方

実際にどうすればいいのかというと、(上のリストを例にします)
<ul STYLE="list-style-image: url(http://blog61.
fc2.com/r/rgrg/file/cherry.gif);">

<li>甲・乙・丙</li>
<li>丁・戊・己</li>
<li>庚・辛・壬・癸</li>
</ul>
と、この様に記入します。

とても簡単にできますよね。でも1.2回しか使わないならいいけど、ちょこちょこ使うならSTYLE="list~といちいち記入するのは少しめんどくさいですよね。

全体の画像リストの作り方

そんな人は自分の気に入った画像でのリストをスタイルシートに登録しておきましょう。そうすれば、だいぶ楽になると思います。

まずテンプレートの設定からスタイルシートの編集を開きます。開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて、
ul.好きな名前{ list-style-image: url(http://blog~~~.gif); }
と、記入して下さい。※好きな名前は半角英数字を使って下さい。

そして画像つきリストを使う新しい記事を作る時に、
<ul class="さっきつけた名前">
と、ulの後ろにclass="さっきつけた名前"を記入します。他の部分は普通にリストを作るそのままの状態で大丈夫です。

具体的に説明すると好きな名前を「risuto」にしたら、
<ul class="risuto">
<li>かなり楽に</li>
<li>なるんじゃないで</li>
<li>しょうか?</li>
</ul>
この様になります。これだけで登録した画像のリストが使えるようになります。

※もしできなかったら、スタイルシートの編集の時に
好きな名前 .li{ list-style-image: url(http://blog~~~.gif); }としてみて下さい。

名前を変えていくつか登録しておけば、記事を作る時のclass="名前"を変えてあげれば、数種類の画像つきリストが使い分けれます。

カテゴリーなどのリストを画像に変える

スタイルシートの編集をしておけば、トップ画面のカテゴリーや最近の記事・コメントなどの黒丸や黒四角なども簡単に画像つきリストに変える事ができます。

やり方は、プラグインの設定から変えたいプラグインの設定の変更を開いてHTMLを編集するをクリックします。
カテゴリーなら・・・
<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
こうなっているので、1番上のulの後ろにclass="名前"とつけるだけです。

さっきの例を使うと、<ul class="risuto">と、この部分に手を加えるだけでOKです。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
画像リスト
こんにちは。
画像リストの使い方を参考にさせていただいてます!
それで、やってみたのですが、画像が表示されません。
スタイルシートの一番下に
リストマル .li{ list-style-image: url(http://blog-imgs-11.fc2.com/i/z/u/izuminusa/20071103041149.gif); }
リストシカク .li{ list-style-image: url(http://blog-imgs-11.fc2.com/i/z/u/izuminusa/20071103041215.gif); }
と2種類の画像リストを書き込みました。
そして、プラグインの設定から、コメントのHTML変更に行き
<ul class="リストマル">としましたが、表示されませんでした。
何か抜けているのでしょうか?
教えてください!!
izuminusaさんへ
「好きな名前」には日本語ではなくて、半角英数字を使って下さい。
説明不足でごめんなさい。半角英数字にしてもう一度やってみて下さい。
画像リスト
いろいろやってみたら出来ましたー!
アドバイスありがとうございました!!
izuminusaさんへ
できてよかったですね!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/115-90a77684   

Template Designed by DW99