2020.03.02.15:30頃：▶︎がズレてる問題が解決したので、「サイドバーのカテゴリーのタイル表示取り消し」の下に追記しました。
ここのところ、ずーっと、グローバルナビの設置とその前準備に取り組みんでいた。失敗しては戻し、また起き上がってチャレンジしてと。
ようやく、少々納得の行かない部分はあるものの、執念がそれなりに実った。
すっごい疲れたよ。
この記事、長いです。長いですが、グローバルナビ に関わる一連の作業の記録が総てあります。
皆さんのご参考になりますよう、健闘を祈ります！
- 使用しているテーマ
- カテゴリーの階層化
- パンくずリストに全階層を表示させる
- グローバルナビを設置
- サイドバーのカテゴリーのタイル表示取り消し
- 今回お世話になった方々
- cssやhtmlに振り回された所感
使用しているテーマ
まず、このブログは「510」というテーマを使用させていただいていまして、私はこれを大変気に入っているのです。
一度気にいると、使い倒す気質により、デザインcssなんて、すごい量になっとります。
設定もあちこち、えらいことに・・・。それでも、レスポンシブの具合や、PCで自分が見たときの、バランスがお気に入りだから。
他の二つのブログはそれぞれ別のテーマを使っているのですが、やはりコレがお気に入りなんです。
カテゴリーの階層化
あちらこちらググって、はてなマスターともいえる先達たちの解説を読ませていただいた結果、サイドバーを概ねこんな感じにするべく目指しました。
- 「デザイン」→「サイドバー」→「カテゴリ」で「並び替え順」を「アルファベット順」にする。
- カテゴリの名前をそれぞれ変える。頭に「1.」〜「5.」と数字を入れたのは表示順番をガッツリ決めるため。（下の画像のサブカテゴリは無視してください。とりあえず一階層の５個の親カテゴリだけ変えました。）
- 「適用」をポチり、「変更を保存」もポチる
- ブログのトップページのサイドバーの名称が変わっているのを確認
- 第一階層カテゴリの分けたいもの（私の場合「1.レビュー」）をクリックして、一覧ページを開く
- その中でサブカテゴリを「1.映画」にしたい記事を探し、編集画面にて「新しいカテゴリ」を作る。このとき名前を「親カテゴリ-サブカテゴリ」とする。私の場合サブカテゴリにも順番を付けたいので「1.レビュー-1.映画」とした。片方を英字にした方が良かったかなと思わないでもない。
- 続いてサブカテゴリを同様に作っていく（とりあえず１記事ずつ改変すれば良い）
- 「適用」をポチり「公開する」をポチる
※この作業は「デザイン」→「サイドバー」→「カテゴリ」で行っても良いかもしれない。
※カテゴリは、ややこしいことが起きないよう、１記事につき親カテゴリ１つと、その直下のサブカテゴリ１つだけにしました。
二つの問題が露見
- サイドバーのカテゴリーが「タイル表示」のテーマである
- パンくずリストにサブカテゴリの階層が表示されない
どちらも由々しき問題にて、放っておくことはできない。
パンくずリストに全階層を表示させる
彷徨って、こちらにたどり着きました。
この記事の１〜３は終わっているので、やることは
４.スクリプトの設定
５.スタイルシート（css）の設定
だけで、どちらもコピペのみで終わります。
これで、パンくずリストは全階層が表示されました。
残すは、サイドバーのカテゴリがタイル表示になっている問題
これが難航を極めたんです。
ググっても「タイルにする方法」はあっても「タイルを解除する方法」が見つからなかった。
そこで、私が最終的に行ったのが・・・。おっと、その前にグローバルナビを設置しよう。
グローバルナビを設置
どうせだからスマホは「ハンバーガー」にしたかったので、こちらを参考に、手探りでがんばりました。
まず、上の記事のお教えの通りにコピペしたりします。
白文字の名称を自分のカテゴリに合わせて変更し、「<a href="#">」の「#」を自分のブログのそれぞれのカテゴリ一覧のページのurlに変えます。
私の場合ですと、こんな感じ
サブカテゴリのないタイプの親カテゴリ
サブカテゴリのあるタイプの親カテゴリ
サブカテゴリは親カテゴリの直下に記入
サブカテゴリの二つ目も続けて記入
サブカテゴリがある親カテゴリの閉めを忘れないこと
</ul> をサブカテゴリの後に付け足す。
これは親カテゴリの記述の最後の「<ul class・・・」を閉じる言葉です。
その下にある、PCに表示されず、スマホなどで表示されるものは、画像とプロフィールだけをとりあえず表示しました。
画像は「はてなフォトライフ」にアップロードしたものを使っています。
「フォトライフ」で画像を選択すると、右上の端っこに「リンク」ってあるので、これを押すと下の段に「<img src="https:・・（中略）・・.png">という長いアドレスとファイル名が出てきます。この" "の中が画像のアドレスです。
しかしタイル表示問題は当然ながら残っており、さらにタイルから▶︎がはみ出て気になる気になる。そこで、タイル表示を打ち消してみようと思い立ちました。
サイドバーのカテゴリーのタイル表示取り消し
こちらの「タイル表示にするcss」を借用しました。
その一部がこちら
これを「デザインcss」にコピペしました。
そして、これの中をいじっては、サイドバーの様子を見て、ってのを繰り返して、理由はようわからないけれど、これで今の状態にまで出来ました。
後一歩、▶︎が文字の左横に並んで入って欲しい！どなたかご存知じゃないでしょうか。
あ、これ、破れかぶれで改変したやつなので、参考程度に見てくださいね。まんま使わないように。ブログが総崩れしても、私にゃ何も出来ません。
みにまる神様降臨にて追記
何と！みにまる様がコメントで丁寧に教えてくださいまして、▶︎がズレてる問題が解決しました！
バンザーイっ！破れかぶれcssもスッキリ！
「.hatena-module-category .hatena-urllist li a 」に「display:inline-block;」という言葉を入れると「整列！」ってなるんですって。
「block」でなぜ並ばないんだとジタバタしていましたが、「inline-block」でしたか。
「inline」・・・なるほど。
今回お世話になった方々
履歴に埋もれてしまって、わからないのですが、そのほかにも沢山の方のブログに助けられました。
ありがとうございます。
cssやhtmlに振り回された所感
何しろ英語と面倒臭いことが嫌いなので、お金があったら、専門家に発注したいわ、って思いました。
しかし、貧乏な上に、まだいくつか何とかしたいことがある。ちょっと日を置いてがんばろー。