ニートを目指して三千里 ひねくれ女子の小言日記

ニートを目指すひねくれ者が日々のうっぷんを書いたり書かなかったりするやつ

今更だけど、はてなブログの目次をカスタマイズしてみた

= 7/10追記= 

ブログをいい感じにするぞ!」強化月間7日目の目次設定ですが、

以前行った記事にて代用と致します!

もっと色々凝りたいけど、それは今後の課題としたい。

=追記はここまで=

 

やってみたいと思いつつ、できてなかった目次設定。

簡単らしいと耳にしても、やれてなかった目次設定。

どうせやるならと調べてみたら奥が深かったよ。さっそくいってみよー。

 

お世話になったサイトさま

目次設定にあたり、参考にさせて頂きました。ありがとうございました!

はてなブログで目次を使った記事作りをしよう - ポジ熊の人生記

はてなブログ大見出しはh3だからh2に直そうよって話 - ポジ熊の人生記

はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life

 

以下、実際にやってみた。

 

目次を入れてみる

編集ページにある目次を押すと、[:contents]が入力される。

 

- 編集ページ -

 

- プレビュー -

 

 できた!けど、質素だい!

いわゆるcssの出番ってやつなのか。

 

目次をカスタマイズする

カスタマイズはこちらのページにお世話になりました。

www.yukihy.com

 

とりあえず、PC版は「デザインCSS」に記述していけばいいみたいですね。

ダッシュボード->デザイン->カスタマイズ->デザインcss

に、自分が設定したいcssをペタペタ張ってきます。

背景色だけ、テーマカラーに変更しました!

 

- できたけどなんかずれてる -

お気づきでしょうか・・なんか目次が右寄りになってる・・・

左側の空白が気になってしょうがない。

せっかくやるからにはとことん、なれないcssとの奮闘のすえ、

で事なきを得ました。

marginを追加したら、みてください!!

 

-見た目は完成-

なんとか様になりました!!!わーい!!

いやぁー、一行追記しただけですが、結構時間かかりました・・・・

cssも徐々にできるようになりたいなぁ・・

 

ローム拡張機能でh3タグをh2タグにする

目次、されど目次。なにやら奥が深い様子で、、

せっかくなので、先人の助言に従ってみようと思います。

www.pojihiguma.com

 

ありがたいことに私はChromeユーザーなので、

早速「Chrome Add-on for Hatena - Chrome Web Store」を追加します。

使い方→はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) - NO TITLE

 

一度、「下書きを更新する」でページを離脱し、再度編集ページで実行すると、

h2タグが生成されました!すごい! 意味わかんない!(褒めてます)

 

手動でhタグを修正する

ですが、今回の記事ではh3とh4タグを使っていたので、

h4からh3への修正は、「HTML編集」から手動で行います。

 

これで目次が完成しました!

- h3タグをh2タグに修正!完成! -

 (リンクの色が違うのは、一度リンクを踏んでいるからです・・・)

 

h2とh3の見出しデザインが同じで見にくい。その上、

(予期せぬ)問題が。

 

- h2とh3の見出しデザインが同じ -

 文字の大きさは若干違う気がするけど、見づらすぎる・・!

 

ということで、妥協案、がこちら。

お分かりいただけるだろうか・・

 

 - 妥協案 -

「実際にやってみた」の見出しをなくしました。

h2とh3のデザインはまだ同じままですが、

見出しと見出しの間が開いてるので、まぁ、妥協点ということで・・・

 

ちなみに、以下の「残る課題は」h2とh4で構成されています。

 

残る課題 

スムーズスクロール

ヘッダにソースコード入れたけど、プレビューだと適応を確認できなかった・・

 

hタグのカスタマイズ

見出しがあっけないから、もっと見やすくしたい。 

 

スマフォの目次カスタマイズ

Proにならないとできないのかな?いずれの課題と致します!

 

感想

目次入れたいなと思って、軽い気持ちで挑戦したら、

予想の10億倍ぐらい大変だった。

カスタマイズ?とかしなければ瞬殺だったけど、

初めましてカスタマイズの身からすると、目次カスタマイズでてんやわんやですよ。

css乗っけるときに、

他のブロガーさんがやっている、

ソースコードが黒背景で挿入されてるみたいにしたい!と思ったら、

はてな記法モード」で対応しているとか知らなかったし。

はてな記法モードに移行すべき?それともMorkdownモード?

謎が謎を呼びます。

しょうがないからソースコードなのに画像挿入ですよヽ(`⌒´)ノ

けど、ブログカスタマイズにハマる人の気持ちもちょーーっとはわかった気がするし、

いろいろ今回の記事では勉強になりました。

残る課題もあるし、リライトするぞー。いつか。