プレコレ blog

勉強やPC,心理学について

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

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

 

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

 

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