カスタマイズシェアするLINE!0以前もWordpressでプラグインを使わずに目次を作るためにテキストエディタ(HTMLだけ)でリストにリンクを付けてジャンプするやり方を作りましたが、やはり目次らしくするためにCSSも使いながら目次を作成していきます。こんな形であれば目次として内容を把握しやすくなるんじゃないかと思います。加工してお好みに使ってもらって大丈夫です。目次リスト作成HTMLのコードは以下になります。href="#jump●">2-2、枠線内の色掛け<a></li></ul></div>これでHTML側の準備が出来ます。最初のdivにclassを設定しておくことで、CSSで目次の設定が可能になります。#jump●の●は大小の見出しの数に併せて数字を振って、実際に記述する部分の見出しにidでリンク設定をしてあげれば目次からジャンプすることも可能になります。内容によっては大見出しの中に小見出しといった構成にしたほうが見やすい場合もあります。その場合は大見出しと小見出しに文字サイズの差をつけてあげると見やすいです。ちなみにサイズの指定ですが以下のような関係になっています。CSSで目次を見やすく加工するHTMLだけでも目次として機能させることは可能ですが、どうせなら目次として認識してもらうようにCSSで目次部分を加工してみましょう。Wordpressであれば以下の部分からCSSの編集が出来ます。500px;}枠線の種類CSSではセレクタ、プロパティ、値を設定します。セレクタはHTMLで設定したclass=”tocs1′′になります。プロパティの部分には何について設定をするのかを決める部分になります。今回は目次を枠で囲ってみます。当ページの目次は以下のようになっています。red;}borderで枠線を設定しますが、値は『種類・枠の太さ・色』の順で設定が出来ます。枠の太さpxやex、emで設定できます。色の指定こちらを参考にさせていただいて好きな色にしてみましょう。500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表www.netyasun.comその他の設定color:navy;先程のカラーコード表を使用して好きな色に変更してみましょう。基本16色であればアルファベットでも設定できます。#ccccff;背景色も先程のカラーコード表を使用して好きな色に変更してみましょう。4色;1左右に設定できます。初期値が0で+で右方向、-で左方向に移動します。2上下に設定できます。初期値が0で+で下方向、-で上方向に移動します。3ぼかし具合で0だと影がないという形になります。0以上の数値を設定できます。カラーコード表を基にお好みの色にしてみましょう。15px;枠の角を丸めることができます。指定するのは半径の指定になります。30px;枠の内側右側に余白を持たせます。500px;目次のサイズを文字数によって範囲を変えながら、最大幅を設定できます。まとめ私もそうなんですが、Progateやdotinstallで勉強したつもりになっっても実際に自分でコード書いてやってみないと上手にコードは書けるようにならないっていうのがよくわかりました。Atomなどのテキストエディタを使って何でもいいから作ってみるところから始めるのがいいのかなと思います。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。