4 December 2015
ブログ機能でカテゴリ別に何かするためのJavascript
ブログで各画面レイアウトに
単純すぎる超オーソドックスなJavascriptです。レンタルブログとかでも使えます。テンプレ配布者さんもどうぞ使ってください。スクリプトは再配布可/リンク不要/著作権表示も不要です。
・事前にカテゴリのURLを調べる必要があったり、面倒なのでPCから編集できる方向けです。
・Javascriptなので、Javascript無効のブラウザでは機能しません。
・
・プレビューではJavascriptは実行されません。保存してから確認してください。
・
これは単純に、
実際使った指定は下記です。
※事前にカテゴリのURLを調べる必要があります。
この記述を、実際に表示させたい場所に挿入します。
複数カテゴリがあって、それぞれ指定したい場合は必要な分を連続して挿入すればOKです。
難易度高めですが、記事全体をカテゴリ毎にデザインすることもできます。
サンプルブログはこちらにあります。
(※)記事からカテゴリ一覧にリンクを飛ばしたい時は、更に(※)のところにリンクを貼るためのスクリプトが必要。
スタイルシートで個別にデザインができます。
#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{ }
スタイルシートで個別にデザインができます。