ようこそおいでやす〜オトンです。
はてなブログのカスタマイズもいよいよ終盤?
もう少しでまとめ記事が作れるかな・・
今回は目次を見直しました。
目次は段落ごとに大体見出しをつけていますが、長くなると最初から表示していると記事が読みにくくなると思い開閉式にすることにしました。
目次はこの回でもカスタムしたのですが、仕切り直しとなります。
よく見るカスタムなのでご存知の方も多いかと思います。
いっしょに少しデザインも見直したのでどうぞ。
メインスクリプト
メインの処理部分になります。
「デザイン」→「カスタマイズ」→「フッタ」から以下のソースを追加します。
<!-- 目次の折りたたみ --> <script> //クリックすると表示される目次 $(function(){ var $Contents = $(".table-of-contents") $($Contents).before('<span style="font-size: 125%; color: #333;">目次</span><p class="show-area">[表示]</p>'); $(".show-area").click(function(){ var $this = $(this); if($Contents.css('display') == 'none'){ $Contents.slideDown(400), $this.text("[非表示]"); }else{ $Contents.slideUp(400), $this.text("[表示]") }; }); }); </script>
簡単ですね。
あとはスタイルシートを変更するだけです。
私は少しページのデザインに合わせて以下の2箇所をいじりました。
<span style="font-size: 120%; color: #333;">目次</span><p class="show-area">[表示]</p>
目次と表示されるテキストの部分です。
色や大きさは好みのサイズに変更してください。
私は全体的にフォントサイズを18pxにしているので120%ぐらいのサイズにしてみました。
$this.text("[非表示]"); ・・・ $this.text("[表示]")
こちらもは目次の開閉ボタンの記述部分ですが、「開く」「閉じる」でもなんでも好きなことばに変更してください。
スタイルシート
作業はこちらもとても簡単です。
「デザイン」→「カスタマイズ」→「{}デザインCSS」から以下のソースを追加します。
/* 目次の折りたたみ */ .table-of-contents{ display: none; } .table-of-contents, .entry-content .table-of-contents { border: 1px solid #e6e6e6; margin: 0 0 1.6em; padding: 1.6em 1.6em 1.6em 3.2em; background-color: transparent; } .show-area{ display: inline-block; padding: 10px; border-radius: 5px; cursor: pointer; margin-bottom: 0; }
変更ポイントとしては、背景をBrooklynのテーマカラーから透明に変更しました。
透明の記述ってこうやって書くんですね。
はじめて使いました。
background-color: transparent;
どうですか?
うまくいくとこんな感じになります。
表示をクリックしてパカっと!
目次が表示されなくなったのでスッキリしましたね。
あってもなくてもな感じの目次ではありますがしばしは様子をみてみたいとおもいます。
まとめ
「目次」は「見出し」をつけることで構成されます。
ブログの記事を書くときは「タイトル」「見出し」の順に書きたい内容を先に書き出しておくと書きやすいですね。
目次のデザインを整理したことでまた書く楽しみが増えました。
どうぞお試しを。
では!