3冊!意外と知らない?Twitterで使えるおすすめのツイート検索方法!これで5点UP!カラオケで歌を上手く歌えるようになるコツブロガー必読の価値あり!「沈黙のWebライティング」の感想。こんばんは、すずしんです。はてなブログでは、目次を記事に表示することができるのですが...。デフォルトのデザインだと、目次が何というか味気ないですね。そこで、CSSを使って目次のデザインを変更してみることにしました。このデザインが気に入って頂ければ、ぜひコピペして利用してみてください。記事に目次を表示するには、記事の表示したい場所に[:contents]と書きます。表示したい場所の行頭に記述してくださいね。文字や空白を入れてはいけませんので注意してください。プレビューを見てみると、正しく書いてあれば目次が挿入されているはずです。目次がどのようなタグ構成になっているかを、ソースコードを見て確認してみました。すると、例えば以下のようになっていることが分かりました。href="#ひとこと">ひとこと</a></li></ul>なるほど。table-of-contentsというクラスが付加されているulタグと、liタグで構成されているようですね。この例では無いですが...。中見出しや小見出しがある場合には、ulタグがさらに含まれるのだと思います。このtable-of-contentsを目安にしながらCSSを適用してやれば、目次のデザインが変更できそうだという事が分かります。「目次」の表記の追加ところで、このデフォルトの目次。「目次」という表記がありませんよね?これってあった方が良いと思いませんか?そこで、後述するCSSでは...。この「目次」という表示がされるようにしたいと思います。そのやり方というのは、分かってしまえば実は簡単なのです。table-of-contentsのbefore疑似要素を参照して、そのcontentプロパティに「目次」と指定してやるだけです。"目次";}目次のデザインのサンプル例それでは、実際に目次のデザインをしていきたいと思います。ここでは、目次を立体的に見せてみることにします。以下のCSSのソースコードをコピーしてください。ダッシュボードから「デザイン」→「カスタマイズ」と進んでいきます。「CSSデザイン」と書かれたテキストエリアの部分に、コピーしたコードを貼り付けてください。#f0f0f0;}もしシンプルに影は要らないという場合には、box-shadowの記述を削除してください。ちなみに、このデザイン例は白背景のテーマを使っている場合のデザインです。黒背景のテーマを使っている場合には、このCSSをそのまま使うと目立ちすぎますので...。backgroundプロパティやborderプロパティなどを調整してください。ひとこと記事の目次のデザインを変更するには...。table-of-contentsクラスを参照して、CSSを適用すれば良いという事が分かりました。今回の記事では、立体的な目次のデザイン例を紹介しましたが...。デフォルトの目次のデザインと比べれば、いくらかはスタイリッシュになったのではないでしょうか?気に入ってもらえたら嬉しいです。17:50はてなブログの目次のデザインをCSSで変更する方法シェアするBookmark!FacebookTwitterGoogle+Pocket鈴木俊吾(すずしん)無職。目指し合格するも、なぜか辞退。長い無職期間が続くうちに統合失調症を発症。4度の入院を経験し、心身ともにボロボロとなる。趣味でブログを運営しているうちに、文章を書く仕事に興味を持ち、フリーライターになることを志す。文章を通して人と人とをつなげたいという想いを持っている。基本的に、どんなジャンルの記事でも誠意をもって取り組む姿勢である。ブログでは、様々なテーマ(オピニオン・グルメ・プログラミング・音楽・日記など)を扱った記事を執筆。90,000PV/月のアクセスを集める。質問、仕事の依頼などのお問い合わせはこちらからどうぞ。はてなブログPro現在は無職。しいプロフィールについてはこちらを参照してください。質問、仕事の依頼などのお問い合わせはこちらからどうぞ。当ブログのプライバシーポリシーについては、以下の記事を参照してください。www.suzushin7.jpはてなブログをはじめよう!Suzushinさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。