目次を表示する方法は2通り投稿記事内で目次を表示する方法は簡単です。Focusでは2通りの表示方法があります。常時表示させるケース一般的なはてなブログで見られる「常時表示させる」ケースは単純にはてなブログの目次表示のショートコードを文章中に挿入するだけです。[:contents]↑こんな奴(括弧は実際には半角)デザインCSSを入れていない場合グレー色の背景を使用した目次表示です。これはテーマのカスタマイズ元である「SOHO」のコードがもとになっています。}}背景色や角丸デザインなどを修正したいときは上記コードの中の「background-color」や「border-radius」の値を変えてデザインCSSに入力してください。デザインCSSを適用した場合Focusで用意しているデザインCSSを適用した場合は上記のようなデザインになります。できるだけスッキリとした感じに見えるようにしてみました。上記デザインにするために使用しているCSSは以下の通りです。underline;}前者のデザインにしたいときは該当部分を削除して(入力しないで)ください。見出しの頭の部分に使用している逆三角形「▼」を別の記号に変えたいときは、当該部分を希望のものに入れ替えてください。表示・非表示を切り替えさせるケースデモサイトでは目次をデフォルトで「非表示」状態にして、クリックした際に表示されるようにしています。見出しがどうしても多くなりやすいまとめ系の記事を多く書く人におすすめです。上記のようにするには1の後者のタイプをベースにさらにデザインCSSとフッタHTMLに以下のコードを挿入するだけです。});});</script>投稿記事内目次で表示する見出しレベルの設定方法デフォルトでは見出しは2レベルまで表示されるように設定しています。最上段の見出しがh2であればh3まで。h3が最上段であればh4まで。これは表示される目次が多くなりすぎないための措置です。人によって構成の方法は全く変わってきますので、見出しを3レベルまで表示して欲しいとか、すべての階層を表示して欲しいなどといった要望もあるかと思います。した場合の調整方法をご紹介します。前述のデザインCSS内で以下の部分でコントロールしています。2階層(レベル)まで表示ということだと考えてください。ulをもう一つ増やせばよいわけです。none;/*4階層以降を消す*/}となります。見出しは基本的にすべて目次に表示させたいとき全て表示させたいときは上記コードをデザインCSS内から削除してください。目次を使う上での注意事項ですが、Focusに限らず多くのテーマのにおいて見出しのレベルが下がるたびに下層レベルが右方向にずれて目次表示されるようになっています。途中で見出しレベルを飛ばした場合、表示に崩れが発生することがあります。ように使った場合で、h3の2つ目の項目がh5の後に再度ある時などはh3がh2と同じ水準の位置に表示されます。そこまで気にする読者は少ないとは思いますが、整然とした目次にこだわりたい人は見出しレベルの使い方にご注意ください。2018-01-12Focusの各アセット(吹き出しとかBOXとか)を簡単に使えるコピペデータを配布しますはてなブログテーマFocusで使用している各種アセット(デザイン...2018-01-11Focusでヘッダ部分を画像と置き換える方法テキストベースのヘッダ表示もシンプルで良いのですが、画像を...2017-11-01サイドバー内のはてなモジュールをタブ化して表示する方法はてなブログにおいてサイドバー内に配置するモジュールをタブ...2017-10-30サイドバー内で表示する目次の設定方法サイドバー内に(追尾型)目次を表示する方法です。2017-10-253カラム表示に必要な設定についてFocusで3カラム表示を実現するまでの手順をご紹介します。「ワクワクこそ最強のライフハック」を合言葉にワクワクするネタ探しの日々。2018-01-12Focusの各アセット(吹き出しとかBOXとか)を簡単に使えるコピペデータを配布します2018-01-11Focusでヘッダ部分を画像と置き換える方法2017-11-22Focusで使用しているボタンとバルーンの使い方2017-11-21Focusで使用している主なカラーコード一覧2017-11-20引用などで使えるBOXデザインの使い方2017-11-02カテゴリアーカイブ(記事一覧)ページの見出し表示をCSSで変更してみました。▲はてなブログをはじめよう!ganapati55さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。