おこもりさんも大海の夢を見る

諦めず、焦らず、時に倒れても海を目指して、ほふく前進する引きこもりの雑記ブログ

レスポンシブ のグローバルナビ設置 / カテゴリの階層化とパンくずリストもマルッと変更!

ブログランキング・にほんブログ村へ

2020.03.02.15:30頃:▶︎がズレてる問題が解決したので、「サイドバーのカテゴリーのタイル表示取り消し」の下に追記しました。

 

ここのところ、ずーっと、グローバルナビの設置とその前準備に取り組みんでいた。失敗しては戻し、また起き上がってチャレンジしてと。

ようやく、少々納得の行かない部分はあるものの、執念がそれなりに実った。

すっごい疲れたよ。

この記事、長いです。長いですが、グローバルナビ に関わる一連の作業の記録が総てあります。

皆さんのご参考になりますよう、健闘を祈ります!

 

使用しているテーマ

まず、このブログは「510」というテーマを使用させていただいていまして、私はこれを大変気に入っているのです。

一度気にいると、使い倒す気質により、デザインcssなんて、すごい量になっとります。

設定もあちこち、えらいことに・・・。それでも、レスポンシブの具合や、PCで自分が見たときの、バランスがお気に入りだから。

他の二つのブログはそれぞれ別のテーマを使っているのですが、やはりコレがお気に入りなんです。

blog.hatena.ne.jp

 

カテゴリーの階層化

あちらこちらググって、はてなマスターともいえる先達たちの解説を読ませていただいた結果、サイドバーを概ねこんな感じにするべく目指しました。

f:id:sakuran_blog:20200307022435j:plain



  1. 「デザイン」→「サイドバー」→「カテゴリ」で「並び替え順」を「アルファベット順」にする。
  2. カテゴリの名前をそれぞれ変える。頭に「1.」〜「5.」と数字を入れたのは表示順番をガッツリ決めるため。(下の画像のサブカテゴリは無視してください。とりあえず一階層の5個の親カテゴリだけ変えました。)
  3. 「適用」をポチり、「変更を保存」もポチる 

f:id:sakuran_blog:20200307023044j:plain


 

  1. ブログのトップページのサイドバーの名称が変わっているのを確認
  2. 第一階層カテゴリの分けたいもの(私の場合「1.レビュー」)をクリックして、一覧ページを開く
  3. その中でサブカテゴリを「1.映画」にしたい記事を探し、編集画面にて「新しいカテゴリ」を作る。このとき名前を「親カテゴリ-サブカテゴリ」とする。私の場合サブカテゴリにも順番を付けたいので「1.レビュー-1.映画」とした。片方を英字にした方が良かったかなと思わないでもない。
  4. 続いてサブカテゴリを同様に作っていく(とりあえず1記事ずつ改変すれば良い)
  5. 「適用」をポチり「公開する」をポチる

※この作業は「デザイン」→「サイドバー」→「カテゴリ」で行っても良いかもしれない。

※カテゴリは、ややこしいことが起きないよう、1記事につき親カテゴリ1つと、その直下のサブカテゴリ1つだけにしました。

二つの問題が露見
  1. サイドバーのカテゴリーが「タイル表示」のテーマである
  2. パンくずリストにサブカテゴリの階層が表示されない

どちらも由々しき問題にて、放っておくことはできない。

 

 パンくずリストに全階層を表示させる

彷徨って、こちらにたどり着きました。

blog.wackwack.net

 

この記事の1〜3は終わっているので、やることは

 4.スクリプトの設定

 5.スタイルシート(css)の設定

だけで、どちらもコピペのみで終わります。

これで、パンくずリストは全階層が表示されました

 

残すは、サイドバーのカテゴリがタイル表示になっている問題

これが難航を極めたんです。

ググっても「タイルにする方法」はあっても「タイルを解除する方法」が見つからなかった。

そこで、私が最終的に行ったのが・・・。おっと、その前にグローバルナビを設置しよう。

グローバルナビを設置

どうせだからスマホは「ハンバーガー」にしたかったので、こちらを参考に、手探りでがんばりました。

blog.minimal-green.com

まず、上の記事のお教えの通りにコピペしたりします。

f:id:sakuran_blog:20200307023115j:plain

スマホに使える!2階層対応レスポンシブメニュー - Minimal Green より

 

白文字の名称を自分のカテゴリに合わせて変更し、「<a href="#">」の「#」を自分のブログのそれぞれのカテゴリ一覧のページのurlに変えます。

私の場合ですと、こんな感じ

サブカテゴリのないタイプの親カテゴリ 

f:id:sakuran_blog:20200302041234p:plain

サブカテゴリのあるタイプの親カテゴリ

サブカテゴリは親カテゴリの直下に記入

f:id:sakuran_blog:20200302042308p:plain

サブカテゴリの二つ目も続けて記入

f:id:sakuran_blog:20200302042328p:plain

サブカテゴリがある親カテゴリの閉めを忘れないこと

</ul> をサブカテゴリの後に付け足す。

これは親カテゴリの記述の最後の「<ul class・・・」を閉じる言葉です。

 

その下にある、PCに表示されず、スマホなどで表示されるものは、画像とプロフィールだけをとりあえず表示しました。

画像は「はてなフォトライフ」にアップロードしたものを使っています。

「フォトライフ」で画像を選択すると、右上の端っこに「リンク」ってあるので、これを押すと下の段に「<img src="https:・・(中略)・・.png">という長いアドレスとファイル名が出てきます。この" "の中が画像のアドレスです。

 

しかしタイル表示問題は当然ながら残っており、さらにタイルから▶︎がはみ出て気になる気になる。そこで、タイル表示を打ち消してみようと思い立ちました。

サイドバーのカテゴリーのタイル表示取り消し

こちらの「タイル表示にするcss」を借用しました。 

www.thoughts-make-things.com

その一部がこちら

f:id:sakuran_blog:20200307023145j:plain

 

これを「デザインcss」にコピペしました。

そして、これの中をいじっては、サイドバーの様子を見て、ってのを繰り返して、理由はようわからないけれど、これで今の状態にまで出来ました。

後一歩、▶︎が文字の左横に並んで入って欲しい!どなたかご存知じゃないでしょうか。

あ、これ、破れかぶれで改変したやつなので、参考程度に見てくださいね。まんま使わないように。ブログが総崩れしても、私にゃ何も出来ません。

f:id:sakuran_blog:20200307023204j:plain

 

みにまる神様降臨にて追記 

何と!みにまる様がコメントで丁寧に教えてくださいまして、▶︎がズレてる問題が解決しました!

バンザーイっ!破れかぶれcssもスッキリ!

「.hatena-module-category .hatena-urllist li a 」に「display:inline-block;」という言葉を入れると「整列!」ってなるんですって。

「block」でなぜ並ばないんだとジタバタしていましたが、「inline-block」でしたか。

「inline」・・・なるほど。

f:id:sakuran_blog:20200307023308j:plain

今回お世話になった方々

blog.minimal-green.com

blog.wackwack.net

www.thoughts-make-things.com

saruwakakun.com

www.htmq.com

 

履歴に埋もれてしまって、わからないのですが、そのほかにも沢山の方のブログに助けられました。

ありがとうございます。

 

cssやhtmlに振り回された所感

何しろ英語と面倒臭いことが嫌いなので、お金があったら、専門家に発注したいわ、って思いました。

しかし、貧乏な上に、まだいくつか何とかしたいことがある。ちょっと日を置いてがんばろー。