アジアンビートカンケリキッズ

アジアの子供はほとんど裸足だ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

カテゴリカスタマイズ

[custom] カテゴリイメージ

エントリのカテゴリをイメージにできますよという話。アイコン風のイメージでちょこんと置いておくとアクセントにもなります。bookカテゴリは本のアイコン、tvカテゴリならテレビのアイコンとか。

HTMLの任意の位置に以下のようなものを挿入します。よくある形としては<%topentry_title>の周辺、というかこれを囲む<h3>とか<div class="entry_title">とかの中に置くのがよさげです。

<img src="
<%url>file/cno<%topentry_category_no>.gif"
width="15" height="15" alt="<%topentry_category>"
title="<%topentry_category>">

太字の部分は自由に変えてください。ファイル名はそれぞれのカテゴリの固有番号(<%topentry_category_no>の部分に入る)を含めるようにしてください。カテゴリページのURLの数字部分が(…/blog-category-3.html)がその番号です。例えば本のカテゴリの番号が5だとしたら、本アイコンのファイル名をcno5.gifなどにします。

ちなみにイメージとタイトルの縦位置が合わないってことがよくあります。文字よりも画像が上に表示されたり。そんなときはvertical-alignとかposition: relative;とか、marginとかpaddingとかで調節したりします。

これが1番苦戦すると思うので、カテゴリイメージを作るときに適当な余白のあるものを作成するってのも手です。

これと似たようなものとして、<%topentry_hour>を使って時刻別にアイコンや背景色が変わるとか、<%topentry_youbi>を使って曜日別に以下同文ができます。追記を使わないことを条件にすれば<%topentry_more>を使って、もっともっとおもしろいことができると思います。

[custom] カテゴリ名置換

カテゴリ名を英数にしたけども、サイドメニューのカテゴリリストでは日本語で表示したい場合や、その逆の場合のためのカスタマイズです。

サイドメニュー版

HTMLのカテゴリ部分(<!––category––>)か、カテゴリプラグインのHTMLを以下のように変更します。固有番号(詳しくは上のカスタマイズを参考に)と太字の部分を合わせるようにします。以下の例では番号が1のとき雑記、2のとき読書。

<ul>
<!––category––>
<li>
<a href="<%category_link>">
<span class="c <%category_name>1">雑記</span>
<span class="c <%category_name>2">読書</span>
<span class="c <%category_name>3">ウェブ</span>
(<%category_count>)/a>
</li>
<!––/category––>
</ul>

そしてCSSに以下を加えます。太字は元のカテゴリーで数字は固有番号です。

.c { display: none; }
.zakki1, .reading2, .web3 { display: inline; }

エントリ版

HTMLのエントリ内のカテゴリ表示(<%topentry_category>)の部分を以下のように変更、もしくは<!––topentry––>内の別の場所に以下を追加します。太字や数字の意味はサイドメニュー版と同じ。

<a href="<%topentry_category_link>">
<span class="ce <%topentry_category>1">雑記</span>
<span class="ce <%topentry_category>2">読書</span>
<span class="ce <%topentry_category>3">ウェブ</span>
</a>

そしてCSSに以下を加えます。こちらも意味はサイドメニュー版と同じ。

.ce { display:none }
.zakki1, .reading2, .web3 { display: inline; }

備考

参考:http://blog.fc2.com/forum/viewtopic.php?t=35

別のことにも使えますね。JavaScriptでやらなきゃならなそうなことがCSSでもできるという例。

スポンサーサイト
  1. 2005/10/23(日) 01:42:22|
  2. custom
  3. | コメント:24

コメント

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2009/06/20(土) 05:51:17 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2009/04/27(月) 22:23:42 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2009/04/02(木) 20:53:36 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2009/03/25(水) 14:19:39 |
  2. |
  3. #
  4. [ 編集 ]

2008年ヴィトン、シャネルバッグ財布最新品、新素材入荷!!

◆ 当社唯一のURL: http://www.98shopping.com

ルイヴィトン、ブラダ、シャネル、エルメス、バレンシアガ、
グッチ、ティファニー、フェンディ、クロエ、バーバリー、セリーヌ 、
ドルチェ&ガッバ―ナ、ミュウミュウ

◆ スタイルが多い、品質がよい、価格が低い、実物写真!
◆ ご入金頂いてから最速4日、遅くとも7日程度でご指定場所へ発送出来る予定でございます
◆ 商品送料を無料にいたします
◆信用第一、良い品質、低価格は 私達の勝ち残りの切り札です。
◆ 当社の商品は絶対の自信が御座います。
◇ S級品質 シリアル付きも有り 付属品完備!
  1. 2008/12/09(火) 19:02:09 |
  2. URL |
  3. 英子SS #/5UrdHk2
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/18(日) 23:47:04 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/18(日) 23:46:37 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/17(土) 00:04:07 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/17(土) 00:03:34 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/17(土) 00:03:05 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/15(木) 15:41:30 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/14(水) 05:45:31 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/13(火) 06:36:19 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2008/05/05(月) 12:59:13 |
  2. |
  3. #
  4. [ 編集 ]

ウホッ!すごいあっさりと・・・(笑)
情報ありです <(_ _)>
  1. 2006/05/24(水) 01:09:09 |
  2. URL |
  3. bisco #al/HeSp6
  4. [ 編集 ]

ヌルッと変数が追加されたみたいです(祝)
http://blog.fc2.com/forum/viewtopic.php?t=4584
  1. 2006/05/23(火) 20:42:49 |
  2. URL |
  3. 耳呈 #UYppvBwQ
  4. [ 編集 ]

あれ?そのテンプレートのプレビューから飛んできたので、てっきりそうだと思っていました。間違えてたみたいですね。すみません!失礼致しました。
  1. 2005/12/25(日) 16:38:18 |
  2. URL |
  3. chocola #-
  4. [ 編集 ]

えーと、テンプレートDL画面にて「john」で検索すればわかりますが、そちらのテンプレの作者は私ではないです(汗)。
それはともかく、どちらの「説明通り」にやったのか(と、できたらブログのURL)がわからないと答えようがないです。とりあえず画像のタグがおかしいのだということはわかりますが(border="0"の前に>がある等)。
  1. 2005/12/23(金) 23:44:18 |
  2. URL |
  3. bisco #al/HeSp6
  4. [ 編集 ]

アジカンさん、初めまして。アジカンさん作のテンプレート、「john」を使わせていただいています。そのテンプレートについての質問なのですが、画像を挿入使用し、画像を右に寄せて、文字を回り込ませたかったので、説明通りやってみたのですが、なぜか border="0"> という文字がブログの画面上に出てきてしまいます。それに、0になってるはずなのに、太線が出たままなんですが、どうしたらよいでしょうか?お返事よろしくお願いします。
  1. 2005/12/23(金) 18:25:40 |
  2. URL |
  3. chocola #-
  4. [ 編集 ]

いえいえ、カテゴリを英語にすると長くなる場合が多いんで、書いておくに越したことはないと思うので。/
そうですねー、カテゴリがヘタに多いとウザいかもですね。カテゴリすら使ってない自分としてはあまり関係ない(暴言!)から、まぁひとつ書くネタができたということで。何か他のことに応用が利くことなんで、これ読んで何か思いついてくれたら万々歳ですよ。
  1. 2005/10/24(月) 01:31:28 |
  2. URL |
  3. bisco #al/HeSp6
  4. [ 編集 ]

ただサイドメニューなど一ヶ所だけで使う場合は、HTML直書きでもいいようにも思います。どうせカテゴリ名変えたり、追加するたびにCSS修正しなきゃいけないし。
かといってエントリ内で繰り返させる場合に、カテゴリ数が10以上あったりするとソースが延々と… そんなわけで断念!
  1. 2005/10/24(月) 01:25:13 |
  2. URL |
  3. 耳呈 #UYppvBwQ
  4. [ 編集 ]

あ、もし注文つけたと勘違いさせてたらごめんなさい。
少し前に気づいてやろうかと思ったのですが、display:noneしてもソース上は全部出力されちゃうので、ウチでは止めました。
  1. 2005/10/24(月) 01:15:29 |
  2. URL |
  3. 耳呈 #UYppvBwQ
  4. [ 編集 ]

できますできます。今書いてます。
  1. 2005/10/24(月) 00:47:58 |
  2. URL |
  3. bisco #al/HeSp6
  4. [ 編集 ]

サポフォにあったこの方法を併用して、
クラス名にした英数のカテゴリ名を、強引に日本語に置換表示させられませんか。
すごく面倒くさそう。ソースも長くなるし。
http://blog.fc2.com/forum/viewtopic.php?t=35

ウチのカテゴリ「zakki」は、本当は「雑記」にしたいんですけどね。
  1. 2005/10/23(日) 04:47:28 |
  2. URL |
  3. 耳呈 #UYppvBwQ
  4. [ 編集 ]

<%template_post\comment>


管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。