みなさんは、ブログ記事のカテゴリーの表示に階層化設定を使っていますか？
ご覧の通り、アラフィフママの雑記ブログはカテゴリーが多いので、なるべくスッキリわかりやすいように階層化表示を使っています。
…が。
今日久しぶりに自分のブログをよく見てみたら、階層化の表示が崩れて全部開いた状態になってるじゃないですか！
階層化設定にしてあるカテゴリーが全部展開されちゃってるので、サイドバーにカテゴリーがズラッと並ぶ異常事態。
めちゃめちゃ見にくい…。
ということで、急遽メンテナンスをしました。
結構同じ状況になっちゃってる人も多いみたいで、直し方を検索すると案外すんなりと解決方法にたどり着くことができました。
ただ、はてなブログ初心者の方にはちょっとわかりにくいかもしれないので、私なりにわかりやすく画像付きでご紹介してみました。
カテゴリーの階層化表示が崩れて困っている人や、カテゴリーの階層化をしたけれどうまく表示できない！という人はよかったら参考にしてみてください。
カテゴリー階層化の方法についてはこちらの記事を参考にしてください。
コピペで簡単！２つの手順できる階層化表示の直し方
階層化表示ができなくなった原因は、サーバーからのスクリプト配信の停止によるものでした。
うん、なんのこっちゃ？って感じですがｗ、要はスクリプトが無くなったから表示が崩れたのだから、逆にスクリプトを追加してあげれば直るということです。
今回参考にさせていただいたのはコチラです。
この記事で紹介されている「コードを埋め込む」という方法であっという間に解決しました。
では以下に手順を詳しく説明していきますね。
手順１．jQueryファイルを設置
まずはじめに、jQueryファイルの設置を行います。
「設定」→「詳細設定」で表示される画面の下の方にある「＜head＞要素にメタデータを追加」という部分にコードを追加していきます。
下記のリンクから「jQueryファイルの設置」という部分に記載されているコードをコピーしてください。
【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 | はてなブログカスタマイズ | 階層化カテゴリー - IT the Best
コピーしたコードを画像の「＜head＞要素にメタデータを追加」の入力欄に貼り付けます。先に別のコードが入力されている場合は、その下に貼り付ければＯＫです。
貼り付けたら、一番下にある「変更する」ボタンをクリックすればjQueryファイルの設置は完了です。
手順２．必要なコードを埋め込む
次に、スクリプトコードとスタイルコードをHTMLに記述していきます。
記述する場所は、サイドバーのHTMLモジュールになります。
よくわからないという人も、下記の手順で進めていけば簡単にコードの埋め込みができるので、参考にしながらトライしてみてください。
「設定」→「カスタマイズ」→「サイドバー」の順にクリック。
真ん中の工具アイコンが「カスタマイズ」です。
「サイドバー」をクリックすると、現在設置してあるサイドバーの内容の一覧が出ます。
一覧の下にある「＋モジュールを追加」を選択します。
「モジュールを追加」画面が出たら、左側の「＜/＞HTML」を選択します。
再び下記のリンク先へ飛び、「階層化処理の追加方法２：コードを埋め込む」の説明内にあるHTMLコードをコピーしてください。
【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 | はてなブログカスタマイズ | 階層化カテゴリー - IT the Best
コピーしたコードを画像の位置に貼り付けます。
名前はサイドバーのモジュール一覧に表示されるので、わかりやすい名前をつけておきましょう。
ちなみに私は「カテゴリ階層化表示」とまんまの名前にしました。
あとは適用をクリックして、変更を保存するだけ。
はい、無事直りました～°˖✧◝(⁰▿⁰)◜✧˖°
ちゃんとクリックで展開します。
なんか、元の表示とデザインがちょっと違うけど、まぁいっかｗ
たぶんデザインを変更することもできるんだろうけど、めんどくさいのでこれでいいです。十分、十分。
デザインの変更もしたいという人は、ご自身で調べてみてください。いい加減だなｗ(^_^;)
はい、ということで久しぶりにカスタマイズ系のHOW TO記事を書きました。
カテゴリー表示が崩れて困ってるはてなブログ初心者の方のお役に立てれば嬉しいです。
カテゴリーがだんだん増えてきてそろそろ階層化を考えている方は、以下の記事で手順を紹介しているので良かったらこちらも参考にしてみてくださいね。
では。
追記：
なんか、よく見たらパンくずリストも影響されてますね。
見た目にあんまり良くないから直したいけど…
また時間がある時に色々試してみます。
