ミニカスタマイズ １４
課題：
カテゴリーごとにタイトルの画像をかえる（JavaScript版）
カテゴリーごとにタイトルの画像をかえる（JavaScript版）
ミニカスタマイズ１３と同じことを別の方法で実現します。
１３では、
FTP機能(Pro版)とHTMLテンプレートを編集を使いました。
１４では、
HTMLテンプレートにJavaScriptで動作します。
では、説明に移ります。
まずは、下ごしらえです。
HTMLテンプレートで下記のコードを追加します。
だいたい大さじ２杯･･じゃなくて、bodyタグのあとぐらい？ですか。
つぎに、
を、
にします。
では、盛り付けです。
まずは、保存。そして再構築。
あ、そうそう。
イメージの設定は各自変更してくださいね。
image_list["カテゴリー名"] = "url(<$BlogUrl$>ファイル名)";
をきちんと設定してくださいね。
カテゴリー名が間違ってもだめです。
ファイル名が間違ってもだめです。
うまく設定してください。念入りに。。
つぎに、現状は、左端にイメージが表示されるようになってます。
右端に設定したい場合などは、スタイルをうまく書き換えましょう。
それでは、よいブログカスタマイズ生活を。。。
ふ〜〜、なんとか動いてる。
サンプル：
-------------------
ほかのミニカスタマイズも見てみようか
１３では、
FTP機能(Pro版)とHTMLテンプレートを編集を使いました。
１４では、
HTMLテンプレートにJavaScriptで動作します。
では、説明に移ります。
まずは、下ごしらえです。
HTMLテンプレートで下記のコードを追加します。
だいたい大さじ２杯･･じゃなくて、bodyタグのあとぐらい？ですか。
<script for="window" event="onLoad" type="text/javascript"><!--
var image_list = new Array;
// ここでイメージを設定する（必要なカテゴリーのみでＯＫ）
image_list["日記"] = "url(http://blog.livedoor.jp/takoashi/diary.PNG)";
image_list["ぶろぐ関連"] = "url(http://blog.livedoor.jp/takoashi/blog.PNG)";
image_list["ニュース"] = "url(http://blog.livedoor.jp/takoashi/news.PNG)";
image_list["テレビ"] = "url(http://blog.livedoor.jp/takoashi/tv.PNG)";
image_list["WinTips"] = "url(http://blog.livedoor.jp/takoashi/wintips.PNG)";
var titlelst = document.getElementsByTagName("h1");
for( var i=0 ; i<titlelst.length ; i++ ){
if( titlelst[i].getAttribute("cate") != null ){
set_bgimage( titlelst[i], titlelst[i].getAttribute("cate") );
}
}
function set_bgimage(tag, key){
var image = image_list[key];
if( image != null ){
tag.style.backgroundImage = image;
tag.style.backgroundRepeat = "no-repeat";
tag.style.backgroundPositionX = "right";
tag.style.backgroundPositionY = "top";
}
}
// -->
</script>
つぎに、
<h3 class="title"><$ArticleTitle ESCAPE$></h3>
を、
<h3 class="title"
<IfArticleCategory> cate="<$ArticleCategory$>"</IfArticleCategory>
>
<$ArticleTitle ESCAPE$>
</h3>
にします。
では、盛り付けです。
まずは、保存。そして再構築。
あ、そうそう。
イメージの設定は各自変更してくださいね。
image_list["カテゴリー名"] = "url(<$BlogUrl$>ファイル名)";
をきちんと設定してくださいね。
カテゴリー名が間違ってもだめです。
ファイル名が間違ってもだめです。
うまく設定してください。念入りに。。
つぎに、現状は、左端にイメージが表示されるようになってます。
右端に設定したい場合などは、スタイルをうまく書き換えましょう。
それでは、よいブログカスタマイズ生活を。。。
ふ〜〜、なんとか動いてる。
サンプル：
-------------------
ほかのミニカスタマイズも見てみようか
参考になりました？応援だと思って
お願いします。
トラックバックURL
この記事へのトラックバック
1. カテゴリごとに異なるテキストを表示させるカスタマイズ - アフィリエイトで月に100万稼いで株で２倍に増やす [2005年05月05日 11:43]
この記事へのコメント
1. Posted by BLUEPIXY [2004年08月26日 01:44]
onLoadって今は使っても大丈夫なんだっけ？
2. Posted by takoashi [2004年08月26日 01:46]
ダメなの？？
3. Posted by nico [2004年08月26日 08:51]
わぁ、すごい！
果たして私にできるだろうか…
週末トライします！
ありがとうございます！！！
果たして私にできるだろうか…
週末トライします！
ありがとうございます！！！
4. Posted by ぱじゃぷう [2004年08月26日 10:06]
いいなぁ・・すごいなぁ。。
画像貼ると雰囲気が変わりますね。
なんでも出来るんですね〜
takoashiさん、スクリプト本だして！ d(￣(ｴ)￣d)
画像貼ると雰囲気が変わりますね。
なんでも出来るんですね〜
takoashiさん、スクリプト本だして！ d(￣(ｴ)￣d)
5. Posted by takoashi [2004年08月26日 10:36]
> nico さんへ
トライしてみてください。
かっこよくなるといいですね。
> ぱじゃぷう さんへ
本ですか。いいですね〜〜〜
印税生活！！ ＞むりだヾ(-_-;)
トライしてみてください。
かっこよくなるといいですね。
> ぱじゃぷう さんへ
本ですか。いいですね〜〜〜
印税生活！！ ＞むりだヾ(-_-;)
6. Posted by BLUEPIXY [2004年08月26日 18:39]
>ダメなの
前に、更新にonloadを使ってるってのあったじゃないすか、
この場合トップページだからいいのかな。
前に、更新にonloadを使ってるってのあったじゃないすか、
この場合トップページだからいいのかな。
7. Posted by takoashi [2004年08月26日 18:42]
つい最近まで個別記事でもonload使ってた。
じゃまだからはずしましたけど、、、
コメントのページにonloadがなければＯＫ？
そういうこと？？
じゃまだからはずしましたけど、、、
コメントのページにonloadがなければＯＫ？
そういうこと？？
8. Posted by takoashi [2004年08月26日 23:06]
手書きの文字がなんか気に入ってきた。 ＞自画自賛
いやー、、いいアイデアだ。nicoさんありがと。
いやー、、いいアイデアだ。nicoさんありがと。
9. Posted by まるっち [2005年05月05日 11:48]
takoashiさん、はじめまして。
私はカテゴリごとに異なるテキストを表示させたいと考え、こちらのカスタマイズを参考にさせていただきました。
どうも有り難うございました。
私はカテゴリごとに異なるテキストを表示させたいと考え、こちらのカスタマイズを参考にさせていただきました。
どうも有り難うございました。
この記事にコメントする
