デジタルサポート

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

※この記事は以前、はてなブログで書いていた時の記事です。その後、こちらのワードプレスに引っ越しました。

ブログのカスタマイズをしたくなってきた

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

f:id:shalala_claudia:20190518182621j:plain

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

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

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

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

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

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

手順としては、

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

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

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

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

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

f:id:shalala_claudia:20190518165344j:plain

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

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

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

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

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

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

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

↓↓↓↓↓

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

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

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

f:id:shalala_claudia:20190518175838j:plain

なんか、すごい発見をしたようでとても嬉しかったです。

もう一つ、やったことは、デザイン → スマホ → 記事 のところにある、パンくずリストのチェックを外すこと。チェックをしたままだと、はてなブログの公式パンくずリストが適用されてしまい、うまく階層化表示できないので。

まとめ

  今回「小さな星がほらひとつ」さんと「太陽がまぶしかったから」さんの記事とを何度も何度も行ったり来たりしているうちに、いくつかのヒントをもらって、ようやく自分なりに納得の行くデザインにたどり着くができました。
結果的には、PCとスマホのデザインで異なるスクリプトを使うことになっています。それがよいのかどうかわかりませんが、今のところ、問題なく作動しています。

それにしても、この http → https に変えることは、ずいぶん色々な記事を検索して読んだけれど、私にはどこでも見つけることができませんでした。なぜかわかりませんが、もしかしたら、皆さん、当然のこととしてご存じなのかもしれません。素人の私がたどり着いた解決策であり、決してこれが正しい方法とは言えないけれど、それでも一人でも困っている方がいらっしゃれば、少しでもお役に立てればと思い、私の体験を載せておこうと思いました。

自律神経を整えよう。免疫力を高めよう。心も体も健やかに…

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA