どーも、くるりんです(◎v◎ )
僕のブログは
はてなブログテーマストアで
インストールできる
「stripe」
を使っています。
シンプルなデザインでとても良いんですが、
色々と機能的に足りなかったり、「逆にこれいらねーだろ」みたいなのもあったりしたので自分なりにカスタマイズしてみました。
ちなみに僕は
HTMLだとかCSSなどの知識は一切ありません。
それでもどうにかこうにか出来たので、(基本はコピペばっかり)
同じように知識がない方もきっと大丈夫！
是非参考にして頂ければと思います。
スポンサーリンク
目次を折りたたむ
まず初めに思ったのは、
「目次を折りたたみたい」
でした。
参考にさせて頂いたのはこちらの記事。
ものすごく詳しく載ってます！
ただ、１点だけ。
PC表示の時は、
そのまま上記のコードを
コピペするだけで問題ないんですけど。
スマホ表示の時。
こちらの時のカスタマイズについては
詳しく書かれていませんでした。
(レスポンシブ設定の方は気にしなくて大丈夫です)
ということで、
スマホ表示カスタマイズの時の捕捉です。
まず、
コードを入力する場所ですね。
「フッタ」に入れるコード、
<script type=～で始まるやつですね。
こちらはそのまま
スマホカスタマイズのところの
「フッタ」にコピペします。
※「ページャ下 」のところではないので注意
続いて、
デザインCSSに入れるコード。
.table-of-c～で始まるやつです。
こちらは、
「ヘッダ」の「タイトル下」にコピペしました。
でも、
このままだとうまいこと反映しません。
そこで、
<style type="text/css">（ヘッダ タイトル下に入れるコピペコード）</style>
て感じで、
コードを
<style type="text/css"></style>
で囲ってあげます。
すると、
スマホ表示の時もうまいこと反映されました。
こんな感じですね。
スポンサーリンク
ナビゲーション追加
続いてはナビゲーションの追加。
やっぱりこれがあるのとないのとで、
見栄えや機能性が全然違います。
というか、はてなテーマ「stripe」には
元々既存のナビゲーションコード(コピペコード)が付随しているのですが、
僕はあまりこれが好きじゃなかったので自分でカスタマイズすることにしました。
ということで、
こちらの記事を参考に（コピペ）して
ナビゲーションを追加しました。
このままでもいいんですが、
僕はナビゲーションの太さが納得いかなかったので、
少し太めにしました。
スタンダードは40pxでしたが50pxに変更しました。
スマホ画面用はこちらに詳しく載ってます。
ただ、ここでもメニューの幅が若干狭く感じたので、
上記コピペコードの25行目5pxを10pxに変更しました。
まあここら辺はお好みで、て感じですね。
カテゴリの階層化
はてなブログって、
カテゴリはつけれるんですけど、
階層化が出来ないんですよね。
これは相当に不便でした。
ということで、
こちらの記事を参考にして万事解決！
こちらは一切手を加えてません。
見出しスタイルの変更
見出しも納得いかなかったので、
こちらも変更しました。
参考にしたのは、こちらの記事。
僕は吹きだし風のスタイルにしました。
これからやりたいこと
オリジナルのヘッダー画像を入れたいですね。
でもいくらデザインを良くしたところで、
記事を更新していかないと意味がないんですけどね。笑
またカスタイズしていくごとに更新してこうと思います。
スポンサーリンク
