こんにちは HARU（ @HARU ）です。
Blogger ブログでは難しいと思っていた、ラベル別に自動で階層表示させる方法が見つかりました！
これにより、ラベル機能でカテゴリーとタグを区別させることができます。
今回、QooQ のテンプレートをベースに実装したため、他のテンプレートではうまく表示するかわかりません。
うまく実装できなかった場合、参考元の記事を読んで頂くか、コメント頂ければわかる範囲で調べようと思いますので、お気軽にコメントください。
テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。
不安な方は以下の関連記事を参照してください。
最初に
本記事の内容 は id="Label1" にのみ対応しています。
現在、ラベルガジェット（ リスト、クラウド表示を含む ）を使用している方は、以下の手順を実施する前に、ラベルガジェットを削除してから実装することをオススメします。
削除しなくてもわかるよって方は、そのまま進んで大丈夫です。
実装イメージ
ラベル別に羅列されるだけの表示から、トグルボタンにて開閉も行え、カテゴリーとタグを区別して表示させることができるようになります。
JQuery の導入
JQuery を導入していない場合、以下の script を <head> の直下に記述します。
<!-- JQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
ラベルガジェットの追加
以下の手順でラベルガジェットを追加します。
（１）Blogger の管理画面から [ レイアウト ] をクリック
（２）ラベルを階層表示したい場所で [ ガジェットを追加 ] をクリック
（３）ラベルのガジェットを追加
（４）[ 保存 ] をクリック
※ 設定は後で変更可能
（５）ラベルガジェットが実装されたことを確認
※ [ 配置を保存 ] を忘れずにクリック
ラベル階層表示 Script
以下の Script を </body> の直上に記述します。
<!-- ラベル階層化 -->
<script type='text/javascript'>
$(function(){
$("#Label1").addClass('widget2');
// 選択中のラベルを取得
var selLabel = "";
if($('.status-msg-body').length > 0)
{
selLabel = $('.status-msg-body').children('b').text();
}
var list = $('div#Label1 div ul > li');
var dest = $("<ul style='display: none;'/>");
var nodes = new Array();
$(list).each(function(){
var work;
var selected = false;
var targetText = "";
if($(this).children('a').length>0){
targetText = $(this).children('a').text();
work = targetText.split("/");
$(this).children('a').text(work[work.length-1]);
}else{
targetText = $(this).children('span:first').text();
work = targetText.split("/");
$(this).children('span:first').text(work[work.length-1]);
}
if(selLabel==targetText)
{
selected = true;
}
var key="";
$(this).addClass("categoryLabel");
var target=$(this);
$(work).each(function(i){
if (i == work.length-1){
if (key == ""){
dest.append($(target).clone(true));
}else{
nodes[key].append($(target).clone(true));
}
$(target).remove();
}else{
var parent = null;
if (i>0){
parent = nodes[key];
key = key + "/";
}
key = key + work[i];
if (nodes[key] == null){
var item = $("<li class='categoryLabel'>" + work[i] + "</li>");
var temp = $("<ul style='display: none;'/>");
item.append(temp);
nodes[key] = temp;
if (parent == null){
dest.append(item);
}else{
parent.append(item);
}
}
}
});
// ラベルを選択中の場合、該当ノードを表示する
if(selected)
{
work = selLabel.split("/");
key = "";
$(work).each(function(i){
if (i>0){
parent = nodes[key];
key = key + "/";
}
key = key + work[i];
$(nodes[key]).css('display','block');
});
}
});
$('div#Label1 div ul').html($(dest).html());
});
//トグル処理
$(function(){
var open = 'data:image/gif;base64,'+
'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACEYyPoAvG614LQFg7ZZbxoR8UADs=';
var close = 'data:image/gif;base64,'+
'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACFIyPoAu2spyCyol7W3hxz850CFIA'+
'ADs=';
$('.categoryLabel:has(ul)')
.click(function(event){
if (this == event.target) {
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(' + close + ')' : 'url(' + open + ')');
}
})
.css('cursor','pointer');
$('.categoryLabel:has(ul)').css('cursor','pointer');
// 子ノードの表示状態で初期表示アイコンを変更する
var list = $('.categoryLabel:has(ul)');
$(list).each(function(){
if($(this).children().css('display') == 'none')
{
$(this).css('list-style-image','url(' + close + ')');
}else{
$(this).css('list-style-image','url(' + open + ')');
}
});
$('.categoryLabel:not(:has(ul))').css({
cursor: 'pointer',
'list-style-image':'url(' + open + ')'
});
$('#Label1Cover').show();
});
// フッタの表示ラベルをサブカテゴリのみにする
$('.post-labels').children("a").each(function(){
var work = $(this).text().split("/");
$(this).text(work[work.length -1]);
});
</script>
途中経過確認
JQuery と script を追加することで、各ラベルの右側にトグルボタンが表示されるようになります。
CSS 追記
以下の CSS を Blogger テンプレートの CSS 欄に記述します。
私は個別アイテム欄の一番下に記述しました。
/* 階層ラベルデザイン */
.section:first-child .widget2:first-child {
margin-top: 0;
}
.widget2 ul {
padding-left: 1em;
}
使い方
カテゴリー/タグ のように記事のラベルを設定することで、カテゴリー内のタグとしてラベルが階層分けされるようになります。
カテゴリーラベルにリンクが無い
カテゴリー/タグ のラベル設定をした場合、当たり前ですがカテゴリーに指定したラベル単独でリンクは作成されません。
例えば「 ブログ/カスタマイズ 」というラベルを作成した場合、「 ブログ 」カテゴリーでのリンクは作成されないということです。
カテゴリーラベルへの単独リンクが必要な場合、別途、カテゴリーラベルを記事に設定することでリンクを作成することができます。
方法としては以下の２通りがあります。
「 カテゴリー 」ラベルを追加する
「 カテゴリー/タグ 」というラベルの他に、「 カテゴリー 」というラベルを追加設定する方法です。
この場合、例えば「 ブログ/カスタマイズ 」と「 ブログ 」というラベルを記事に設定します。
この方法のデメリットとしては、ラベルを階層表示したときにカテゴリーラベルが複数になってしまうことです。
「 カテゴリー/カテゴリー 」ラベルを追加する
「 カテゴリー/タグ 」というラベルの他に、「 カテゴリー/カテゴリー 」というラベルを追加することでも、カテゴリーのリンクが作成できます。
この場合、例えば「 ブログ/カスタマイズ 」と「 ブログ/ブログ 」というラベルを記事に設定します。
この方法のデメリットとしては、ラベルを階層表示したときにカテゴリー内にカテゴリーへのリンクが格納されてしまうことです。
参考元からの変更点
widet2 クラス追加
参考元と違う点は widget2 というクラスを追加しているところです。デザインの調整のためですね。
参考元（ Bloggerのラベルを階層化を導入したのに階層化されない時の対応 ）では、widget というクラスを削除することも追加してありますが QooQ の場合、デザインが崩れしてしまったのでそれは無くしました。
ラベルのクラウド表示の変更
階層表示とは別にラベルをクラウド表示したとき、タグ（ サブカテゴリ ）のみ表示するようになっていましたが、すべて表示するようにしました。
タグ（ サブカテゴリ ）のみ表示したい場合は、参考元の記事を参照してください。
0 件のコメント:
コメントを投稿