使いにくさで定評のあるアメブロですが、その中でも気になるのが記事にタグを設定できないことと、カテゴリーを複数設定できないことです。
これじゃ閲覧者も不便ですしアクセスにも影響があるってもんです。
そこで、半分手動ではあるのですが、比較的楽にタグを実装する方法を考えましたのでご紹介したいと思います。
この記事の上、テーマの下に『タグ』という項目があると思います。
好きなタグをクリックしていただければ、そのタグの付いている記事の一覧が表示されます。
このような形での実装をしてみたいと思います。
●タグ表示用の記事を作る
うちのブログで言うところのこのページにあたります。ソースを見ていただければわかるかと思いますが、手動でブログの全記事のタグを書いています。
こう書くと大変そうですが、そもそもタグは各記事に自分で設定するものなので、それに毛が生えた程度の手間だと思います。
書式もソースを見てもらえるとわかると思いますが、次のような感じに地道に記述します。
<div class="taggedentry">
<p class="title">記事のタイトル</p>
<p class="url">記事のURL</p>
<p class="tags">,タグ1,タグ2,タグ3,</p>
</div>
これを記事の数だけ、古い記事から順番に手動で書きます。
記事の数が多い人は大変なので、タグを付けたい記事だけにするとか、任意の日付以降の記事にタグを付けるとか、少し絞ったほうがいいかもしれません。
新しい記事を書いた時は一番上に足していきます。
●CSSを編集する
以下のCSSを一番下に追記してください。div.taggedentry,div.taggedentry p.url,div.taggedentry p.tags{
display:none;
}●フリープラグインにスクリプトを追記する
以下のスクリプトをフリープラグインに追記してください。※追記：タグクラウドに対応できるようにコード改変しました。(11/25)
<script type="text/javascript">
(function($){
var loc = location.href;
$.ajax({
url: "http://ameblo.jp/blog-lab/entry-11080656524.html",
cache: false,
success: function(html){
/*
ここに後でタグクラウドの処理を書きます。
*/
if(loc.search('entry-11080656524') === -1 && $('article').length){
$('article').each(function(){
var self = this;
var aloc = $('a:eq(0)',self).attr('href');
var newhtml = $('.articleText:eq(0)',html).html()
.replace(aloc,'<span class="matchurl">'+aloc+'</span>');
($('span.matchurl',newhtml).length) && (
$('span.matchurl',newhtml).each(function(){
var parent = ($(this).parents('div.taggedentry'))[0];
$('.articleTheme:eq(0)',self)
.after('<br><span class="articleTags">タグ：</span>');
var tags = $('p.tags:eq(0)',parent).html().split(',');
tags = tags.slice(1,tags.length-1);
for(var i = 0,l = tags.length;i < l;i++){
$('.articleTags:eq(0)',self)
.append(
'<a href="http://ameblo.jp/blog-lab/entry-11080656524.html?tag='+
encodeURI(tags[i])+'">'+tags[i]+'</a> '
);
}
})
);
});
}else if(loc.search('entry-11080656524') !== -1){
$('.articleDetailArea').css('display','none');
$('.articleText br').remove();
var tag = decodeURI(loc.split('?tag=')[1]);
$('.skinArticleHeader2 h1 a:eq(0)').html('タグ『'+tag+'』記事一覧');
var articleTxt = $('.articleText:eq(0)');
articleTxt.html(
articleTxt.html()
.replace(
new RegExp(','+tag+',', 'g'),'<span class="matchtag">'+tag+'</span>'
)
);
$('.taggedentry:has(span.matchtag)').each(function(){
$(this).css('display','block');
$('p.title:eq(0)',this).wrap('<a href="'+$('p.url',this).html()+'"></a>');
});
}else{
}
}
});
}(jQuery));
</script>
※『entry-11080656524』は、タグ表示用の記事のURLの一部分に書き換えてください。
※『http://ameblo.jp/blog-lab/entry-11080656524.html』は、タグ表示用の記事のURLに書き換えてください。
これでタグ(手動)が実装できました！
手動な割に、記事の追加やタグの編集がとてもしやすいので、意外と便利に使えますw
次回はこれを使って『アメブロでタグクラウド』でもつくってみようと思います！
※一部コードにミスがあったので修正しました。