プレコレ blog

勉強や旅行について

【はてなブログ】簡単にできる目次のデザイン変更方法

はてなブログのデザインを変更する時に、あんまり良い目次のデザインが無い、、

 

ちょっと目次のデザインを変えてみたい !!

 

CSSの変更とか書いてあるけど難しい、、、

 

このように感じたことはありませんか?
私は3つとも当てはまってCSSの変更はやってみたけど分かりませんでした笑、たぶん他のブログデザインにしている事が原因だと考えています。

 

なので、このブログでは簡単な変更方法を2パターンお伝えしたいと思います。
1つ目の方が簡単だと思います。

目次

f:id:precorre:20200526225628j:plain

画像1:ブログ

 

目次に枠追加と背景変更 

f:id:precorre:20200527210608p:plain

画像2:枠と背景

◆枠と背景の追加方法

画像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を参考に書いときます。

色見本と配色サイト - color-sample.com