【はてなブログ】簡単にできる目次のデザイン変更方法
はてなブログのデザインを変更する時に、あんまり良い目次のデザインが無い、、
ちょっと目次のデザインを変えてみたい !!
CSSの変更とか書いてあるけど難しい、、、
このように感じたことはありませんか？
私は3つとも当てはまってCSSの変更はやってみたけど分かりませんでした笑、たぶん他のブログデザインにしている事が原因だと考えています。
なので、このブログでは簡単な変更方法を2パターンお伝えしたいと思います。
1つ目の方が簡単だと思います。
目次に枠追加と背景変更
◆枠と背景の追加方法
画像2のように枠と背景を追加する為には、以下の内容(青文字)を目次の前後に貼ります。
<fieldset style="padding: 10px; border: 1px solid #dedede; border-radius: 10px; background-color: #f0f0f0;">
<p>[:contents]</p>
</fieldset>
◆変更方法
・余白の大きさ
padding: 10px
→10pxの数字を変更します。
・枠線の太さと線の色
border: 1px solid #dedede
→1pxの数字を変更すれば、線の太さが変わります。
→#dededeを変更すれば、線の色が変わります。
色は文字と数字の組み合わせなになります。
「カラーコード」と検索して頂くと他の色に変えれると思います。
・枠の丸み
border-radius: 10px
→10pxの数字を変更します。
・背景色
background-color: #f0f0f0
→変更方法は線の色と同様です。
「目次」のタイトルを追加する
◆タイトル付きの枠の追加方法
このブログの目次のようにタイトルを付けるには、以下の内容(青文字)を目次の前後に貼ります。
<fieldset style="padding: 10px; border: 4px solid #0106b2; border-radius: 10px;"><legend><span style="font-size: 120%; color: #333; font-weight: bolder;">目次</span> </legend>
<p>[:contents]</p>
</fieldset>
◆変更方法
・タイトルの内容
「目次」の内容を変更するします。「content」等
・文字の大きさ
font-size: 120%
→120%を変える事で変更できます。
・文字のカラー
color: #333
→変更方法は線の色と同様です。
・文字の太さ
font-weight: bolder
→bolderを変更すれば太さが変わります。nomalは普通
◆◇◆◇◆
最後まで読んで頂きありがとうございます。
ぜひ、試してみてください!!
不明な点や誤記等がありましたら、教えて頂けると助かります。
下記にカラーコードのURLを参考に書いときます。