読者です 読者をやめる 読者になる 読者になる

けつあご日記

こんちは.菊地です.なんか浅ーいことをいろいろ書きます

テーマがBlankだとパンくずリストの表示がおかしい【未完成な対策】

はてなブログ


※追記 Blankの作者である半月氏(id:waitingmoon)からコメントを頂きました.なんと解決策を記事にしてくれたようですので,みなさんこんな記事読んでないですぐにこちらへ行ってください.
moonnote.hateblo.jp


※以下,茶番です.読まなくて大丈夫です.

kichiku-kikuchi.hatenablog.com
上の過去記事でいろいろブログを整備してきたわけですが,「パンくずリスト」というやつをまだ導入していませんでした.
パンくずリストってのは,記事の上の方でよく見るアレですね.今見てるページがどの階層にあるかを示すやつです.パンくずリストとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]

どうやらパンくずリストを導入するとSEOに効果的だということで,わたしも使ってみたんですが...Blankというテーマではすこし表示がおかしくなってしまいます.
それをちょっとはまともに見えるようにした.今回はそんなお話です.残念ながら理想的な解決とはなっていません.申し訳ねぇ...

症状

多くのはてなブログユーザーが使っているのは,池田仮名氏 (id:bulldra)が作成したブログパーツでしょう.

bulldra.hatenablog.com

GitHubでソースコードも公開されています.導入方法等は上の池田仮名氏の解説ページに詳しく書かれているので,その通りにやりました.


ほうほう,コピペしただけでいけるわけね...
ありがてぇ..

ぽちっとな!

f:id:kichiku_kikuchi:20151210105618j:plain

うっ!なんだこれ.階層を示す「>」マークがちゃんと入っていないじゃないか!なぜだーやり方は間違っていないはず.テーマとの相性の問題に違いない.
わたしのテーマはBlank.他にBlankでパンくずリストを導入してる人いないかな.と思って探したところ,いました.が,その方のパンくずリストも同じ状況でしたww

ちなみに記事下に入る表示は全く問題ありません.記事上だけがおかしくなります.
これが記事下.
f:id:kichiku_kikuchi:20151210110715j:plain

階層構造じゃなくてもいいなら..

ぐぬぬ.Blankに適した方法はないのか?とりあえず「はてな Blank パンくずリスト」で検索や!

install.hatenablog.com

おっ!こちらでBlank用のパンくずリストが紹介されていますね.

sprint-life.hatenablog.com

あ.でもこれ,カテゴリーを2階層にはできないみたいですね...

「TOP > 親カテゴリ > 子カテゴリ」

じゃなくて

「TOP > カテゴリ1 カテゴリ2」

って感じですかね.

たしかにこれでも悪くない.この表示にしたい人はこの記事通りにやれば問題ないですね.

一応まともに見せる

しかしわたしは階層表示してみたいんや!ソースコードをちょちょいと書き換えればええんや!と意気込んでやってみようとしたんですが,

わたしjavascriptできないっす
(´・ω・`)<デキネ


位置のおかしかった「>」マークを消すことはどうにかできたんで,以下でその方法を紹介します.なんかサーセン.

まず,池田仮名氏のソースコードをGitHubから持ってきます.(本来はforkして編集するのが正しいんだっけ?GitHub全然使ってないから忘れた.あ,あと解説ページによればソースコードの一部転載は禁止されていないようです.ただし,著作者の明記と解説ページへのリンクが必要なので注意.)

GitHub - bulldra/bulldra.github.io
こちらにアクセスして,breadcrumb.jsをコピーします.このコードの最後の関数が出力に関するところだと思われます.ここです.
※ソースコードは圧縮されてますので,適宜改行等しています.

function createCategoryNode(d,c,f){
    var a=getBlogUrl();
    console.log(c);
    var b=document.createElement("span");
    appendCategoryLink(b,"TOP",a);
    null!=f&&(b.appendChild(document.createTextNode(" > ")),b.appendChild(d[f].cloneNode(!0)));
    b.appendChild(document.createTextNode(" > "));
    b.appendChild(d[c].cloneNode(!0));
    return b
}

「>」マークに関するところだけ消して,以下のようにします.

function createCategoryNode(d,c,f){
    var a=getBlogUrl();
    console.log(c);
    var b=document.createElement("span");
    appendCategoryLink(b,"TOP",a);
    null!=f&&(b.appendChild(d[f].cloneNode(!0)));
    b.appendChild(d[c].cloneNode(!0));
    return b
}

んで,こう書き換えたコード全体(つまり↑の関数だけでなく,それ以外のコードも含めて)を,デザイン > カスタマイズ > フッタに貼り付けます.
このとき,池田仮名氏の解説ページ通りにフッタを編集していれば,フッタは,

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

となっていますが,この最後の行が今書き換えたコードに該当するところなので,これを置換します.

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script type="text/javascript">
ここに書き換えたコードを貼る.
</script>

ちょっとフッタが長くなってしまいますねw やっぱりGitHubで書いた方がよかったんだわ.まぁとりあえずいいでしょう!
ともかくこれで「>」マークが消えて,少しはましな見た目になります.こんな感じ.

f:id:kichiku_kikuchi:20151210110422j:plain


階層構造っぽくねーなー!そのうちjavascript勉強してちゃんとなおさなきゃなー.
javascriptできる方は一瞬で直せると思うので,教えていただけると助かりますm(_ _)m