はてなブログの記事下の表示をカテゴリ毎に変える方法

f:id:chibikujira:20171010021909j:plain

こんにちは、元社内SEのちびくじらです。

今回は、はてなブログの記事下の表示をカテゴリ毎に変える方法を記入してみた。

毎回、記事下(文末)に、カテゴリ毎でお決まりの定型文をコツコツ手で挿入している人なんかは、このコードを使うと楽にすむだろう。一応、このコードはまだまだ改良の余地があるので、自分好みにカスタマイズしてほしいと思う。

 

 

 

はてなブログの記事下の表示をカテゴリ毎に変える方法

参考にしたサイト

この、特定のカテゴリで広告を非表示にするというソースがめちゃくちゃ使えるソースで、指定したカテゴリがある時に、指定の文字列を出力するというもの。コードの改変もOKということだったので、修正して今回作成してみた。

hapilaki.hateblo.jp

 

記事下の表示をカテゴリ毎に変えるソース

<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/

showHTMLByCategoryWord1='hoge1';
showHTMLByCategoryWord2='hote2';
var pageTags=document.getElementsByTagName('meta');
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ('article:tag'==pageTags[i].getAttribute('property')) && (showHTMLByCategoryWord1 == pageTags[i].getAttribute('content') ) ){
document.write('test1');
break;
}else if( ('article:tag'==pageTags[i].getAttribute('property')) && (showHTMLByCategoryWord2 == pageTags[i].getAttribute('content') ) ){
document.write('test2');
break;
}
}
}
adsFilter();
</script>

記事下の表示をカテゴリ毎に変えるソースの使い方

ソースのイメージ

イメージとしては、文末に特定の文章を表示するカテゴリを決めておいて、
そのカテゴリが表示したページのカテゴリと一致するときに、
特定の文章をHTMLの形式で出力するというもの。

 

ソースの使い方

貼り付ける場所は、PC、またはモバイルの記事下に貼り付けると良い。
ソースの修正箇所は、任意のカテゴリ(’hoge1′, ‘hoge2’)を任意のカテゴリ名に変えて、test1、test2部分に任意のhtmlを記入すると良い。

またカテゴリを追加するときは、分岐するときに使う変数(カテゴリ)と、else if による新たな分岐、そして、そのカテゴリがページと一致したときに出力するHTMLを記入すると良い。

 

使用例

今回、検証するために、”広告非表示”と”海外”のカテゴリで、特定の文字列”test1″と”test2″を出力できるか確認した。結果はこのようになった。

 

▶︎カテゴリ=”広告非表示”

f:id:chibikujira:20171010033637p:plain

 

▶︎カテゴリ=”海外”

f:id:chibikujira:20171010033733p:plain

 

コードの使用条件および免責事項

コードは著作権の変更をしない限り改変してもらって大丈夫だ。
また、使用にあたり、なんらかの損害が発生しても責任を負わないものとする。

▶︎hapiakiさんのはてブコメント

f:id:chibikujira:20171010151249p:plain

 

*2018/8/13:追記
⇒ document.write(””)内にHTMLを書くとクオテーションをうまくエスケープしないといけないので、以下の記載してあるツールからHTMLをStringで書くとOK
https://qiita.com/WabisabiApp/items/0c8b762e25851913ce41

タイトルとURLをコピーしました