【ブログの楽しみ方】カテゴリの前に画像のリストマークをつける
こんなことできるかな?と試してみたらできたので、覚え書きとしてメモしておきます。
この記事は、『cocologの楽しみ方』というカテゴリと『テスト』というカテゴリに分類していますが、この、「テスト」という文字の前に付いているのがリストマークです。箇条書きなどの行頭に付ける「・」とかそういうものです。
要するにカテゴリ名に画像が表示できるか、という実験で、結果は可能でした。
手順としては、
1.リストマークとして使用する画像は管理画面の「コントロールパネル」→「ファイルマネージャー」で、アップロードしておきます。
2.その画像のURLを取得し、下のHTMLタグの「画像のURL」の部分に記述します。(「border="0"」というのは画像の周囲に枠が付かないようにするため。記述しなくてもいいかも知れません。)
<img border="0" src="画像のURL" />
3.管理画面「ブログ」→「設定」→「カテゴリー」のカテゴリ設定画面でカテゴリ名の前にこのHTMLタグを追加します。
ここで記述しているのは具体的には下記の通りです。
<!-- 990 --><img border="0" src="http://daishi100.cocolog-nifty.com/buhin/listmark.gif" /> test
ところで、赤く色を付けた「<!-- 990 -->」というのはカテゴリを自分の好みに並び替えるために記述したものです。
詳しくは以前の記事『【ブログ主覚書】cocologのカテゴリの順番を変える際のコツ、生命保険の配当、他【ココログ/PC】』で説明しましたが、「<!-- 」と「 -->」はHTMLタグを記述するときにコメント(メモ書き)をするために使うもので、この間に記述した内容はHTMLタグとしては無視されます。
サイトを表示したときにはコメントは表示されないということを利用して、「<!-- 990 -->」のように番号を振り、この順に並べています。
ココログではカテゴリは並列的で、大分類、中分類、小分類などという構造にはできませんが、ある記事に対してカテゴリを設定するとき、「複数のカテゴリーを指定」を選択し、上の3つのカテゴリ全てを選択しておくと擬似的に構造化できるというわけです。
最近のコメント