Csspalette

4 December 2015

ブログ機能でカテゴリ別に何かするためのJavascript

ブログで各画面レイアウトに#fld#を挿入してもその記事のカテゴリ名が表示されるだけで、自動的にリンクが貼られるわけではありませんが、「コレがアレならソレする」という指示を出す簡単なJavascriptをペロっと貼り付けておくと、カテゴリ一覧へのリンクが貼れたり、カテゴリ別に画像を表示させたり、カテゴリ別にCSSを指定できたり、可能性は一気に無限大なります。

単純すぎる超オーソドックスなJavascriptです。レンタルブログとかでも使えます。テンプレ配布者さんもどうぞ使ってください。スクリプトは再配布可/リンク不要/著作権表示も不要です。

・事前にカテゴリのURLを調べる必要があったり、面倒なのでPCから編集できる方向けです。
・Javascriptなので、Javascript無効のブラウザでは機能しません。
#fld#が使える場所(一覧の繰り返し部分と記事画面レイアウトの2箇所)で使えます。
・プレビューではJavascriptは実行されません。保存してから確認してください。
#fld#のシャープは半角に直してから使ってください。

スクリプト自体は単純です

サンプルとして こちら「PatternPalette」をご覧ください。このブログでは一覧画面レイアウトでしか使っていませんが、日付の横のカテゴリ名からカテゴリ一覧へ飛ぶことができます。

これは単純に、

#fld#で表示されるカテゴリ名が

pattern(カテゴリ名)なら

<a href="/mqdesign/blog/2/?FolderID=4">pattern</a>を挿入するという指定になります。

実際使った指定は下記です。
※事前にカテゴリのURLを調べる必要があります。

<script type="text/javascript">
 if('#fld#'==='pattern'){ 
   document.write('<a href="/mqdesign/blog/2/?FolderID=4">pattern</a>'); 
 } 
</script>

この記述を、実際に表示させたい場所に挿入します。
複数カテゴリがあって、それぞれ指定したい場合は必要な分を連続して挿入すればOKです。

<script type="text/javascript">
 if('#fld#'==='pattern'){ 
   document.write('<a href="/mqdesign/blog/2/?FolderID=4">pattern</a>'); 
 } 
</script>
<script type="text/javascript">
 if('#fld#'==='あいうえお'){ 
   document.write('<a href=リンク先"><img src="画像URL"></a>'); 
 } 
</script>
<script type="text/javascript">
 if('#fld#'==='かきくけこ'){ 
   document.write('<img src="画像URL">'); 
 } 
</script>
<script type="text/javascript">
 if('#fld#'==='さしすせそ'){ 
   document.write('<div class="クラス名">ほほほ</div>'); 
 } 
</script>

難易度高めですが、記事全体をカテゴリ毎にデザインすることもできます。
サンプルブログはこちらにあります。

<script type="text/javascript">
 if('#fld#'==='さしすせそ'){ 
   document.write('<div class="sasisu">'); 
 } 
</script>
<script type="text/javascript">
 if('#fld#'==='たちつてと'){ 
   document.write('<div class="tatitu">'); 
 } 
</script>

<!-- ここに記事レイアウト(例) -->
<div class="title">・・・</div>
<div class="category">・・・(※)</div>
<div class="date">・・・</div>
<div class="text">・・・</div>

<script type="text/javascript">
 if('#fld#'==='さしすせそ'){ 
   document.write('</div>'); 
 } 
</script>
<script type="text/javascript">
 if('#fld#'==='たちつてと'){ 
   document.write('</div>'); 
 } 
</script>

(※)記事からカテゴリ一覧にリンクを飛ばしたい時は、更に(※)のところにリンクを貼るためのスクリプトが必要。

/*さしすせそ用スタイルシート*/
.sasisu{  }
.sasisu .title{  }
.sasisu .category{  }
.sasisu .date{  }
.sasisu .text{  }

/*たちつてと用スタイルシート*/
.tatitu{  }
.tatitu .title{  }
.tatitu .category{  }
.tatitu .date{  }
.tatitu .text{  }

スタイルシートで個別にデザインができます。
New entry
    「#幼馴染」のBL小説を読む
    BL小説 BLove
    - ナノ -