2021年9月15日URLをコピーしました!はてなブログで「目次」を作ったときのデザインを変えるCSSを紹介しています。リスト(箇条書き)のマークを大見出しと、中見出しで別々のマークにする方法もあります。※2019.3.29に「目次の部分を目立たせるCSS」を追加しました。非常に残念なことに、こちらの記事のCSSをコピペして新しくカスタマイズの記事を書いて、いかにも自分が書いたかのように公開する人が多いです。最後にちらっとリンク貼ってるからOKでしょ?みたいなグレーの人も。苦労して書いたものが、いとも簡単にそのように不正利用されているのが悲しいです。「コピペOK」というのは一般利用についての話であり、こちらのコードをコピペして記事を書いてOKではありません。訪問いただき申し訳ありませんが、現在コピペできないようにしております。私の記事をパクって公開している人の所からコピペしてください...。最初から書かれているCSSは消さないでください。テキストエディタ(メモ帳)などにバックアップを取りましょう。カスタマイズは基本的に自己責任でお願いします。一通りチェックしてますがテーマによっては余白の調整が必要です。色について各CSSで「#f7f7f7」などとしているのはカラーコードです。同じ数字が6桁の時は省略して3桁にできるので「#000」としています。自分のブログに合わせて調整出来ます。HTMLカラーコード余白について枠内の余白はpadding:の数値で調整します。35px;」となっている場合は「上右下左」の数値です。左の余白を調整したければ35pxの数値を大きくします。線の種類についてborder:で線の種類、太さ、色を指定します。実線(solid)、ドット線(dotted)、破線(dashed)、二重線(double)があります。「目次」という言葉を追加して外枠をつける目次と分かりやすいようにします。*/}content“目次”は他の言葉に変更可能です。/**/で囲んだところはメモとして残せるので上記のように書いておくと便利です。外枠を角丸にする外枠に色をつけて角丸にするCSS。*/}border-radiusの数字が大きいほど角が丸くなります。*/}list-style-typeでマークの種類を変えます。(四角)square、(小文字アルファベット)lower-latinなど様々なマークがあります。サルワカリストマークを部分的に変える大見出しのリストは数字と太字に、中見出しは●に、小見出しは英小文字にしました。list-style-type:lower-latin;}何もしなければ全部に同じ効果がかかりますが、中見出し、小見出しのCSSを追加したことでマーク以外の要素も個別で変更できます。「目次」の部分を目立たせる「目次」のタイトル周りを目立たせたい場合のCSS。webフォント(アイコン)もつけました。*/}・/*「この記事の目次」の周囲変更*/の段落の3行目の\f039はwebフォント(アイコン)のようなものです。・使用中のテーマによって「この記事の目次」の位置がズレている可能性がありますので、top,leftの数値で調整してください。Minimalismをお使いの場合はtop:-35px;left:35px;が良いです。・一番下のcssでテキスト色を指定すればリンク色を変更とリンクの下線を消すことが出来ます。はてなブログ目次CSS目次の見た目をCSSで変える方法でした。自分の記事で大見出しと中見出しのリストで見た目を変えたら見やすくなった気がするので、今回ご紹介しました。役に立ちましたらコメントなどもらえると喜びます。初心者のための、【はてなブックマーク】でコメントがついた場合の返信方法と、スパム行為の紹介をしています。ブコメするならTwitterと連携すると更に良いです。はてなブログ8ヶ月、ついに100記事達成しました。総PVと始めてアドセンス収益についても書きます。低品質記事の対処法も。@papico405よかったらシェアしてね!URLをコピーしました!ぱぴこ手帳と文房具好き!子なし主婦です。ドラマの感想、ダイエットのこと、ワークショップに行った話が多いです。はなし気づいたらもう何年も実家に帰ってない...。無理して帰らなくて良いんじゃないのって思ってます。2023】ロルバーンとシステム手帳に決定!「ほぼ日weeks」はやめます。日5年手帳を買いました最近ブログから遠ざかっているけど3年続いた。PLOTTER(伊東屋限定テンペスティ)を買いました歯医者の予約が取れない!日曜もやってるけど意味ない...自分にあった理想の歯科を求めて(愚痴注意)ゲームブログもやってますゲームのブログもやってます!「モンハンストーリーズ2」と「あつまれどうぶつの森」プレイ日記などの話題が多いゲームブログです。note.許可なく掲載の文章、画像等のコンテンツをコピーすることは著作権違反となります。