XHTML対策

XHTML対策

PERSONA@BLOG

キリ番リスト

2006年02月11日 管理用カテゴリ毎にアイコンを付ける

カテゴリ Seesaa BLOG カスタマイズ


【メニュー内のカテゴリ サンプル】

私の日記
ペットのタマちゃんの日記
最近買ったゲームの日記


【記事内のカテゴリ サンプル】

posted by 管理人 at 17:22 | Comment(0) | TrackBack(0) | 私の日記



上記のサンプルのように、カテゴリ毎にアイコンを付けるカスタマイズ方法です。


カスタマイズ方法としては、

1)今後の更新が直感的にしやすい『タグぶち込みカスタマイズ』。
2)カテゴリ名の変更、カテゴリ数の増減のたびにカスタマイズが必要になる『変数・関数カスタマイズ』。
3)JavaScriptを使用した『JavaScriptカスタマイズ』。

上記のようなカスタマイズ方法が考えられるのですが、1)〜3)にはそれぞれメリット・デメリットがあります。

1)のメリット
 ・更新が簡単♪
1)のデメリット
 ・管理画面の『記事カテゴリ』が少し見づらくなる。
 ・管理画面の『記事一覧』が少し見づらくなる。
 ・アイコンにもリンクがかかる。(←こういうの、嫌な人はすごく嫌だと思います。)
  (アイコンにかかるリンクのアンダーラインが嫌だなぁ。。。
   ぐらいでしたら、スタイルシートの設定でアンダーラインをなくすのも手です。)

2)のメリット
 ・アイコンにはリンクがかからないようにできる。
2)のデメリット
 ・カテゴリ名の変更のたびにカスタマイズが必要になる。
 ・カテゴリ数の増減のたびにカスタマイズが必要になる。

3)のメリット
 ・メリットはあまりないかも。。。(笑)
3)のデメリット
 ・JavaScriptを無効にしている訪問者にはアイコンが表示されない。


1)〜3)の方法をすべて紹介してもいいのですが、今回は誰にでも直感的に簡単にできると(私が)思う、『 1) 』の方法のみを紹介します。




管理画面 > デザイン > コンテンツ > カテゴリ > コンテンツHTML編集
と進み、HTML内の下記の部分を探します。

<% category.name | tag_break %>


上記を下記のように書き換えます。

<% category.name %>


『保存』をクリックして、

管理画面 > デザイン > HTML
と進み、現在『適用』中のHTML名をクリックして、HTML内の下記の部分を探します。
(HTML内の上の方にあります。)

<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>


上記に下記のように赤字の部分を追記します。

<title><% blog.title %><% if:extra_title %>: <% extra_title | tag_strip %><% /if %></title>


『保存』をクリックします。





管理画面 > 記事 > 記事カテゴリ
と進み、アイコンを付けたい『記事カテゴリ名』をクリックします。

カテゴリ名
私の日記(例)


上記のような画面になると思いますので、上記に下記のように赤字の部分を追記します。

<img src="アイコンのアドレス" alt="カテゴリ名" border="0" /><span style="padding-right:5px;"></span>私の日記(例)



※1
少しでも『記事カテゴリ』や『記事一覧』を見やすくしたい場合は、アイコンのアドレスを、
『http://・・・・・・・・・・.gif(絶対パス)』ではなく、
『/image/・・・・・.gif(相対パス)』でもOKです。

(ただ、相対パスで設定した場合、管理画面でのカスタマイズ時の『プレビュー』時に、アイコンが表示されません。)

「絶対パス? 相対パス? 何言ってるの? 訳わかんないや。。。」

と思われた方は、アイコンのアドレスは、『http://・・・・・・・・・・.gif』のように記述しておいて下さい♪

※2
アイコンの上にマウスを乗せた際に表示される『alt』が不要な場合は、『alt="カテゴリ名"』の部分を削除してしまってもOKです。

※3
アイコンとカテゴリ名の間のスペースを調整したい場合は、『padding-right:5px』の部分の『5』を、『3』にしたり、『10』にしたりして、調整して下さい。

アイコンとカテゴリ名の間にスペースが不要な場合は、『<span style="padding-right:5px;"></span>』の部分を削除して下さい。


上記のようにカテゴリ名の前にタグを追記する事で、カテゴリ毎に違ったアイコンを表示させる事が可能になります。


【重要】

Seesaaでは、カテゴリ内容の変更がすぐに反映されないため、上記のカスタマイズを行った後、

「あれ??? アイコンなんて出ないじゃん???!!!」

という状況になる可能性があります。

反映されるまで少し時間をおいて、カスタマイズの状態を確認して下さい。


以上でちゅ。





毎度の事ですが、あまり動作確認できていません。。。(爆)

何か問題点等あれば、コメントでも。





【追記】

おそらく『カテゴリ毎にアイコンを付ける』カスタマイズをする場合、変数・関数によるカスタマイズの方がスマートだと思います。(爆)
(今更言うなよ。。。って感じですが。。。)

でも、こっちの方が変数・関数によるカスタマイズより、超楽チンです♪
(バグや問題点がなければ。。。)

XHTML対策

XHTML対策

タグ この記事に設定されているタグ(キーワード)

XHTML対策

コメント コメント (6) | トラックバック トラックバック (0) | 清き一票 清き一票 | | このブログの読者になる | 更新情報をチェックする | トップページへ | このページの一番上へ | 一つ前の記事へ 一つ後の記事へ
この記事へのコメント
ペルソナ様

こちらの一方的なリクエストに応えて
くださって、本当にありがとう
ございました。

ペルソナ様のお陰で、念願のカテゴリーアイコンを設置することが出来ました。
とてもわかりやすい解説のお陰で、初心者の
わたしでも簡単に設置することができまして
大変感謝しております。

今まで、かなり悪戦苦闘し続けていたので(笑)
感激しております。

ところで、ペルソナ様のテクをお借り
した場合にはわたしのブログを
ペルソナ様へご報告したほうがいいですよね?
超、私的なおバカブログなので
お恥ずかしいのですが、
必要でしたらメールにてご連絡いたしますので
おっしゃってくださいね。

本当にありがとうございました。
マリリン
2006年02月13日 18:44
上手くいったようでよかったです!(^ー^)


> ペルソナ様のテクをお借り
> した場合にはわたしのブログを
> ペルソナ様へご報告したほうがいいですよね?

カスタマイズを公開されているサイトや、アイコン素材を配布されているサイトって、

「リンクをはる事!」
「掲示板に書く事!」
「コメントつけろ!」
「TBしろ!」
「ランキングのクリックよろ!」

みたいなの多いですよね。。。

わたち、公開・配布する立場から言うと、ああいうのもわかるのですが、借りる側から言うと、めんどくさいじゃないですか。。。(爆笑)

だから、別にいいですよん♪(大爆笑)

だって、あんま人には知られたくないサイト・BLOG、事情とかってありますもん♪

ただ、一部のカスタマイズ記事等には、【使用条件】というのを書かせていただいている記事があります。

こういう記事に関しては、【使用条件】は守っていただきたいと思います。

でも今後は、出来る限り、よほど『すげーーーーー!!!!!』という記事でない限り、【使用条件】は付けないつもりでいます。

「うだうだ条件付けるなら、公開するなよ。。。
自慢したいのか?! こいつは。。。」

みたいに思う性格なのです。(大爆笑)


> 超、私的なおバカブログなので

大切なのは、ご本人が楽しく充実した時間を過ごせているかどうかですよん♪

自分自身が楽しけりゃ、それで十分に素敵なものです♪


ご丁寧なコメント、ありがとうございました!(^o^)ノ
ペルソナ このアイコンは投稿者が真の管理人である事を証明します
2006年02月13日 22:38
あぁ〜ペルソナさま、
ご親切でお優しいレスありがとう
ございました。

かさねがさね、お礼を申し上げたい
と思います。

今後もペルソナさんのブログで
べんきょうさせていただきたいです。

よろしくお願いします★
マリリン
2006年02月14日 21:37
×いただきたいです

○いただきます

訂正します(アハハ・・)
マリリン
2006年02月14日 21:38
> かさねがさね、お礼を申し上げたい
> と思います。

こちらこそ、かさねがさねご丁寧なコメントをありがとうございました!(^o^)ノ
ペルソナ このアイコンは投稿者が真の管理人である事を証明します
2006年02月15日 20:37
ペルソナさん

はじめまして、Mirandaと申します。
わたしは変数や関数は全く解らないので、
自分のやりたいことを調べるのにも
苦労していました。
が、その答えをこのページで発見し、
早速自分のページで活用させて頂きました!
本当に、本当に感謝しております。
今後とも、参考にさせて頂きます。
どうぞ宜しくお願いしますね。

取り急ぎお礼まで。
Miranda URL
2007年03月04日 23:40
お名前

MAIL(管理人のみに公開)

URL

コメント


この記事へのトラックバック
この記事へのトラックバックURL(URLをクリックで反転)


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。