HOMECOLUMN>WEB&PCブログカスタマイズ16【カテゴリごとに画像を付ける】

2005年06月27日

ブログカスタマイズ16【カテゴリごとに画像を付ける】

次項有カテゴリごとに画像を付ける
…せっかく画面さっぱりさせたのに…なんだか寂しくなってしまったのです…
一目見て、「このカテゴリ」だと分かるようなものが欲しかったのよおぅ。
はじめはカテゴリごとに背景チェンジとか考えたんですが、
それはどーもJava Scriptでなきゃムリげなので諦めましたたらーっ(汗)

HTMLタグだけで可能なことが分かりました〜詳しくは追記部分を読んでください。
いや、とりあえず勉強してみたんだけど分からなかったのよ〜
そりゃそうだ、ここでようやくHTMLがだいたい読めるようになっただけのシロートなんだし。
(読めるが書けないレヴェルやね)
じゃあバナーならどうだ。
なんかできそうな記事を見たことがある気がする…そうだ〜いつものペルソナさま頼りで行きマショウ!
というわけで(どんなわけでしょう)毎度おなじみペルソナさまのPERSONA@BLOB(辞書登録済み)の記事から
カテゴリ毎のページにそのカテゴリの説明文を
を参考に、ちょこっといじらせて頂きました
説明文出さずに、画像だけ表示させたのです。







1とりあえずバナーを作る
…こんなカテゴリ用の素材なんかありえませんから、自作しました。
今のとこ、「ガンダムSEED」「十二国記」「成長記録・有紀」のみ。
他のは、もしかしたら素材屋さんから借りてきて自分で加工するかも知れません。
キラと陽子のアイコン、自作…初めてドットアイコン作ってみましたが、どうでしょうか?
ゲーム用のアイコンを参考に作ったから、わりと似てると思うんですが…自画自賛かな〜
でも、ちょっと楽しくなってきました。
もっとたくさん作ってみようかなあ。
2デザイン→コンテンツ→記事→HTML編集
■オリジナルタグ
<% if:page_name eq 'category' -%>
<div class="title"><% category.name %></div>
<% if:category.name eq 'カテゴリ1の名前' %>
<div class="text">カテゴリ1の説明文。</div>
<% /if %>
<% /if -%>



■変更後
<% if:page_name eq 'category' -%>
<!-- ▼カスタマイズカテゴリページごとにカテゴリ説明文▼ -->
<% if:category.name eq 'カテゴリタイトル' %>
<img src="画像URL">
<% /if %>

<% if:category.name eq 'カテゴリタイトル' %>
<img src="画像URL">
<% /if %>

<% if:category.name eq 'カテゴリタイトル' %>
<img src="画像URL">
<% /if %>
<!-- ▲カスタマイズカテゴリページごとにカテゴリ説明文▲ -->

<% /if %>

これで保存→再構築かけて終わり。

きむさまが、カテゴリが増えても再構築なしで画像表示させる方法を教えてくださいました





《追記》
【再構築なしで画像表示させる】
下準備として
■すべてのカテゴリに対応した画像を用意する。
■画像の名前は「カテゴリのアドレス.gif」にしてアップしておく
ことが必要です。


1デザイン→コンテンツ→記事→HTMLの編集
<% if:page_name eq 'category' -%>

<!-- ▼カスタマイズカテゴリページごとにイメージ画像▼ -->
<img src="自分のブログアドレス/画像をアップしたディレクトリの名前/<% category.id %>.gif">
<!-- ▲カスタマイズカテゴリページごとにイメージ画像▲ -->

<% /if -%>

でオッケーです。
これなら、カテゴリが増えても対応した画像をアップするだけでオッケー!
カテゴリを増やしたと同時にアップしないと、「画像がアップできてへんぞボケマーク」→×が出てきちゃうから、それだけ注意。





【カテゴリごとに背景チェンジ】
下準備として
■画像の名前は「カテゴリのアドレス.gif」にしてアップしておく


コメントできむさまがおっしゃっているように、おそらくスタイルシートを利用して背景画像としてアップすれば画像を用意してなくても「×」マークは出ないはず。
教えて頂いた、無料ブログでビジネスブログさまの記事記事タイトルを色分け
を元に考えると、
1スタイルシート編集
.カテゴリアドレス
{
background-image:url(自分のブログアドレス/ディレクトリ名/○○.gif);
background-repeat:no-repeat;
background-position:left top;
}

って追加。(background-positionとか位置はお好みで変えてみましょう)

2デザイン→コンテンツ→記事→HTMLの編集
…どの部分を背景チェンジさせるかによってタグを書く場所が違うと思います。
とりあえずタイトルの上あたりの背景チェンジの場合。
<% if:page_name eq 'category' -%>

<!-- ▼カスタマイズカテゴリページごとにイメージ画像▼ -->
<div class="<% article.category.id %>">

<img src="自分のブログアドレス/画像をアップしたディレクトリの名前/<% category.id %>.gif">

</div>
<!-- ▲カスタマイズカテゴリページごとにイメージ画像▲ -->
<% /if -%>

とか書けば平気なんだと…思います。
この場合、全部の画像を用意しなくていい代わりに、カテゴリが増えたらスタイルシートを追加して、スタイルシートの再構築をするって手間がかかってしまいますが。
ちょっと試してないので何とも言えませんが…違ってたらご指摘くださいあせあせ(飛び散る汗)


ブログメインのとこの背景表示のさせ方はちょっと分からないなあ…
だってもう背景画像使ってるわけだし。
現在背景指定してないところを利用するとかかなあ。
ん〜??


どちらがいいかはお好みるんるんかな?


きむさま、本当にありがとうございました〜ぴかぴか(新しい)

posted by モモカ at 10:29 | Comment(6) | TrackBack(1) | COLUMN>WEB&PC
この記事へのコメント
どうも、こんにちは^^

これに関しては、「無料ブログでビジネスブログ」様に別解と言える内容があったのでちょっと書いときます。
http://inqsite.seesaa.net/article/3111354.html

前提条件は「全部のカテゴリにアイコンがある事」です。
カテゴリIDを利用して画像URLを切り替えます。
<img src="〜/<% category.id %>.gif">


紹介させていただいている記事にある様に、CSSに画像指定を組み込んであげると画像を用意していなくても上手く表示できるかも・・・

ちょっとしたおせっかいではありましたが、少しでも楽に出来るならとご紹介させていただきましたm(_ _)m
Posted by きむ at 2005年06月28日 00:53
失敗しました・・・
もう一回だけ書いときます。ごめんなさい。
Posted by きむ at 2005年06月28日 00:56
きむさまいらっしゃいませ[ラヴ]
どれどれ…とご紹介の記事を見てみる…
うおお、これは私が読んだ当時では理解できなかった記事!(笑)
そうか、これはそう言うことを言っていたのね…と今更理解。
そしてそれを応用だなんて〜すごすぎ!
さすがきむさま!

これはちょっと長期戦になりそうな構えですが、
やってみたい、うずうず。
色々お聞きしながら挑戦してもいいですか?

しょっぱなから教えてください〜先生!質問質問!
タグを貼る場所などは変えなくて、イメージタグをきむさまのものに変える…ってことで…あ、合ってます?(とほほ、いまいち自信がない。いっぺんで理解できないオツムをお許しください[(汗)(汗)])
で、バナーの名前を「カテゴリーと同じ数字.gif」にしてアップロードする…で、合って…ます…?どきどき。

ものすごい変な解釈だったらごめんなさい〜。Excelの関数やマクロを組むのはできるんですが、数学とかパズルは脳内回路がショートしてまして…

Posted by 結城廉 at 2005年06月28日 10:01
あ、タグ自体は「無料ブログでビジネスブログ」さまの記事のようにdivタグで囲んでイメージタグ、だと思ってるんですが…[(汗)]
Posted by 結城廉 at 2005年06月28日 10:10
どもども[にこっ]
では、早速ご説明させていただきます。

結城さんが思っている通りに、記事の方でになっている部分を『カテゴリーと同じ数字.gif』の書き方に変える。で、正解です。
※カテゴリ名は同じ名前で登録出来るので数字にしてます。普通にやる分にはカテゴリ名.gifでも支障は無いです。

また、恐らくお判りになられているかとは思いますが下の記述が不要になります。
<% if:category.name eq 'カテゴリタイトル' %>

<% /if %>
上の書き方は、Excel関数で言うとIF(A,1,IF(B,2,IF(…って感じですかね?

divタグの件は『どっちでも良い』のですが、表示位置の決め易さを考えるとdivタグで囲っておくのがベターでしょう。

こんな感じで如何でしょうか?
Posted by きむ at 2005年06月29日 01:07
きむさまグレイト〜[♪]
できましたよ!
再構築がいらないって言うのは目からウロコというか…すばらしい!

わたしも、も少し分かってきたら再構築のシェイプアップ計ってみようかなあ…
今はまだ、自分の首を絞めそうで怖いからやれないんですが…[|||]

ありがとうございました[ラヴラヴ]
Posted by 結城廉 at 2005年06月29日 16:28
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/4659913
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

カテゴリに説明を付けましょう。
Excerpt: API攻略第7回です。 第4回の解決法と言う事で、JavaScriptを使って強引にって感じですが解決しましたのでご報告します。個人的にJavaScript多用は好きではないのですがこれ位は出来ないと..
Weblog: きむっちのBlog::五線譜に思いを乗せて・・・
Tracked: 2005-06-28 02:39
アクセス解析
×

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