クラウディアのしゃららダイアリー

アラフィフおひとりさま女が50才を機に新しいことに挑戦している日々のはなし。

はてなブログ スマホ版のカテゴリーとパンくずリストの階層化するのに大事な一つのこと

 

ブログを始めて数ヵ月、デザインのカスタマイズをしたくなってきた

数か月前にブログを始めた。始めた動機は、記事を書いて発信してみたいと思ったから。だから、何の知識もなく、ただ、記事を書いて投稿する作業しかイメージになかった。
 
ところが、いざ、始めてみると、やはり、記事を書き、発信するということは、潜在的に読んでくださる方達に向けて書いている自分に気づいた。
そうなると、記事の内容はもちろんだが、見た目も読みやすいデザインになっていることが大事だ。それでブログデザインのカスタマイズに興味を持つようになった。
ただ、私はブログ初心者で、さらにITの知識も持ち合わせていない、昭和生まれのアラフィフだ。HTMLって?cssって?アフィリエイト?本当に何も知らなかった。こういった用語はちんぷんかんぷんだし、今でもあまり理解できているとは言えない。
それでも、ステキなデザインにされている方のブログを拝見すると、私もここをこんなふうにしたい、というイメージが湧いてくるので、コツコツ一つずつ、カスタマイズして、今に至っている。その際には、ありがたいことに先人の方達がやり方をブログ記事で教えてくださっているので、検索してはそれを参考にして、ありがたく使わせていただいている。
 

f:id:shalala_claudia:20190518182621j:plain

スマホ版のカテゴリー階層化がどうしてもできない

最近は、少しコツもつかめるようになって、大抵は、そういった先人の方達のブログ記事を参考にすれば、以前よりも短い時間でデザインのカスタマイズができるようになっていた。
ところが、何をどうやってもカスタマイズできない壁にぶち当たった。
 
それはスマホ版の「カテゴリーを階層化」し「パンくずリストを階層化表示させる」こと。
 
これには大変、苦労した。
 
先人の方々のブログを読み漁り、色々な方法を試してみたが、全然うまくいかない。散々、試行錯誤した末に、もう私にはできないんだと諦めかけていた、その時、ふと思いついたことを試してみたら、自分なりに納得する表示にすることができた。
 

PC版のカテゴリーの階層化とパンくずリストの階層化表示

まず、PC版のカテゴリー階層化について。これについては「小さな星がほらひとつ」さんのこちらの記事を参考にさせていただいた。
↓↓↓↓↓

blog.wackwack.net

とても有名なので、ご存知の方も多いと思う。

この記事の手順に従って、進めていったところ、すんなり、カテゴリーの階層化とパンくずリストの表示を行うことができた。

 

手順としては、

「公式パンくずリスト」にチェックを入れて有効にする

カテゴリーの表記を階層化に対応するように書き換える

カテゴリー階層化とパンくずリストのスクリプトを設定する

パンくずリストのスタイルシートを設定する

 
 
これで、次のようにデザインを変更することができた。
パンくずリストとカテゴリーの階層化表示ができている。

f:id:shalala_claudia:20190518165344j:plain

 

 それに加えて、サイドバーのカテゴリーもアーカイブ表示することができ、よりシンプルで美しいデザインにもすることができた。

f:id:shalala_claudia:20190518170457j:plain

f:id:shalala_claudia:20190518170515j:plain


「小さな星がほらひとつ」さんの手順の通りに進めていったら、簡単にできた。
本当にありがとうございます!
 

スマホ版のカテゴリーの階層化とパンくずリストの階層化表示

 この調子でスマホの方も同じようにやればいいんだなと思い、取りかかった。ところが、何度やってもPCと同じようにはうまくいかない。どうしたことかしら。
そこで、いくつかのブログを読んで調べたところ、スマホ版の方は、私と同じようにうまくいかないという方が何人かおられた。その方たちの中で、解決策として、別の方の記事を参考にしたということが書かれていた。
それがこちらの池田仮名さんのブログだ。こちらもとても有名なのでご存知の方も多いと思う。
↓↓↓↓↓

www.du-soleil.com

こちらの記事は、「小さな星がほらひとつ」さんも引用されている。

早速、記事の内容に従って、スマホ版の手順を進めた。ところが、全くデザインが変わらない。何度やっても何をどうやっても、全然ダメ。他の方が「この記事を参考にしたら、簡単にできました。」と書かれていたのに、どうしてかしら、なぜ、私はできないのかな、何か重大なことを見落としているのでは…と、自分なりに散々、考えて、色々な方法を試みた。それでも、どうしてもできないので、もう無理かなと諦めようとしていた。

その時、ふと、上のPC版で参考にした、「小さな星がほらひとつ」さんの記事を読み返してみたところ、記事のトップに赤枠で囲ってある次の文章が目に留まった。

↓↓↓↓↓

「2017年10月のはてなブログHTTPS化に伴い、当スクリプトHTTPS化いたしました。既にご利用の方はURLの「http」httpsに修正してください。」

(「小さな星がほらひとつ」さんの記事【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました~より)

 

ん!? もしかして...

 
それで「太陽がまぶしかったから」さんの方の記事のスクリプトを見てみたら、なんと、 2行目と3行目が、http となっていることに気づいた。試しにその部分を http → https に変えてコピペしてみた。(1行目は最初からhtpsになっていた。) さらに記事の内容に従って、スタイルシートをコピペして貼り付けた。すると...今まで何十回、何百回も試したので今度もあまり期待していなかったのだが、あらら、カテゴリーもパンくずリストもきれいに階層化された表示に変わったではないか。
なんとぉー!!!
感動のあまり、涙が出た💦
 
そのスマホ画面がこちら。
↓↓↓↓

f:id:shalala_claudia:20190518175838j:plain

 
なんか、すごい発見をしたようでとても嬉しかった。
 
もう一つ、やったことは、デザイン → スマホ → 記事 のところにある、パンくずリストのチェックを外すこと。チェックをしたままだと、はてなブログの公式パンくずリストが適用されてしまい、うまく階層化表示できないので。
 
今回「小さな星がほらひとつ」さんと「太陽がまぶしかったから」さんの記事とを何度も何度も行ったり来たりしているうちに、いくつかのヒントをもらって、ようやく自分なりに納得の行くデザインにたどり着くができた。結果的には、PCとスマホのデザインで異なるスクリプトを使うことになっている。それがよいのかどうかわからないが、今のところ、問題なく作動している。
 
それにしても、この http → https に変えるということは、ずいぶん色々な記事を検索して読んだけれど、私にはどこでも見つけることができなかった。なぜかしら。
もしかしたら、皆さん、当然のこととしてご存じなのかもしれない。まあ、あくまで素人の私がたどり着いた解決策であり、決してこれが正しい方法とは言えないけど、一人でも困っている方がいれば、お役に立てればと思い、私の体験を載せておこうと思った。
 
自律神経を整えよう。免疫力を高めよう。心も体も健やかに...