気のみ気のままなブログ

カテゴリのタイトルを表示する方法



『スタイルに広告コードを埋め込む方法』　を応用してカテゴリ毎にカテゴリタイトルを表示する方法を紹介します。





このブログの　カテゴリアーカイブ　の項目で表示確認ができます。

投稿記事が多くなってくるとカテゴリは、読んでもらう人にとっては大事なナビゲーターの役割を果たします。
カテゴリはそのタイトルに沿った記事をまとめたものなので、ちょっと見栄えよくカテゴリタイトルをつけてみます。

前回にも登場した window.location　でURLを収得し、indexOf　で文章に含まれる文字を検索しカテゴリタイトル別に分岐するコードを作ります。
カテゴリの　category_1　等はブログでカーソルを合わせるとブラウザ下に表示されますのでそこで確認ください。
赤文字の部分がカテゴリタイトル毎に変更する部分です。

var strTitle = "";
var strSearch = window.location+"";
if( strSearch.indexOf( "category_1" ) != -1){
strTitle = "カテゴリ１";
}
if( strSearch.indexOf( "category_2" ) != -1){
strTitle = "カテゴリ２";
}
if( strSearch.indexOf( "category_3" ) != -1){
strTitle = "カテゴリ３";
}


検索ワードが見つかったものは、strTitle　にカテゴリタイトルが代入されます。
次にタイトルが存在したときに文字を書き出すコードを作ります。


if(strTitle != ""){
document.writeln('
');
document.write('アーカイブ：　'+strTitle);
document.writeln('
');
}


この場合、書き出される文字は次のとおりです。


　アーカイブ：カテゴリ１


コードをまとめると以下の様になります。


<!--　アーカイブタイトルの表示　ここから　-->
<script type="text/javascript">
<!--
var strTitle = "";
var strSearch = window.location+"";
if( strSearch.indexOf( "category_1" ) != -1){
strTitle = "カテゴリ１";
}
if( strSearch.indexOf( "category_2" ) != -1){
strTitle = "カテゴリ２";
}
if( strSearch.indexOf( "category_3" ) != -1){
strTitle = "カテゴリ３";
}

if(strTitle != ""){
document.writeln('<br />');
document.write('アーカイブ：　'+strTitle);
document.writeln('<br />');
}
//-->
</script>


設置をしたら動作確認をします。
文字の切り替えが問題なく表示されたでしょうか。
コードの設置箇所については、　『スタイルに広告コードを埋め込む方法』　を参考にしてください。