光のシネマティックレコード

美味しい、楽しい、綺麗を伝えられたらと思います✨

【はてなブログ】パステルカラーのオシャレで可愛い目次にカスタマイズしてみよう!

 

f:id:sackartonline:20190705195435j:image

 

こんにちは、光です!

 

目次といえば、ブログを見やすくするのに欠かせないものですよね。

 

私も記事の中に目次を使っています。

 

 

しかし

 

 

この記事を書くまでは、目次はデフォルトのままでおしゃれ感ゼロでした😭

目次の言葉すら無い状態ですw

 

f:id:sackartonline:20190705195847j:image

 

 

「このままではダメだ!!」

 

 

ということで様々なサイトを調べ「目次のカスタマイズ」に挑戦してみたのですが、

全然上手くいかず、、、

謎の文字の羅列が記事の中に!!

 

f:id:sackartonline:20190705200018j:image

 

 

それでも諦めず試行錯誤し続け、、、

 

 

遂に、目次のカスタマイズに成功しました!!

 

 

今回は、私と同じように

「目次をカスタマイズしたいけど上手く出来ない」

という方のために目次のカスタマイズ方法を徹底解説していきます。

 

 

 

 

 

 

目次デザインの紹介

f:id:sackartonline:20190705083524j:image

・全体的に紫系パステルカラーを意識

・フチは可愛らしいパッチデザイン

・アイコンマークはオシャレな★マーク

最後に色やデザインを変える方法も載せるので、自分好みにカスタマイズしてみて下さいね〜!

 

PC用カスタムコード

 

スマホ用カスタムコード

 

 

 

カスタムコードを入力する場所はココ!

 

PCの場合

はてなブログダッシュボードからデザインをクリック

f:id:sackartonline:20190703223007p:plain

 

②カスタマイズ → {}デザインCSS → コード入力欄をクリック

f:id:sackartonline:20190703223654p:plain

 

③クリックするとコード入力画面が展開される。

    コードがある場合はバックアップのためメモしておく

f:id:sackartonline:20190703224220p:plain

 

④この中にPC版カスタムコード貼り付けよう。  

    貼り付けるとこんな感じ⤵︎⤵︎⤵︎⤵︎⤵︎⤵︎⤵︎

f:id:sackartonline:20190703224545p:plain

 

スマホの場合

はてなブログダッシュボードからデザインをクリック

f:id:sackartonline:20190703223007p:plain

 

スマートフォン→記事をクリック

f:id:sackartonline:20190703225143p:plain

 

③記事上のコード入力欄をクリック

f:id:sackartonline:20190703225327p:plain

 

④展開されたコード入力欄にスマホ版カスタムコードを貼り付ける

f:id:sackartonline:20190703225559p:plain

 

⑤貼り付けたコードの最初と最後に赤線のコードが入っていることを確認する

※このコードが入っていないとカスタマイズが反映されません。

f:id:sackartonline:20190704213033p:plain

f:id:sackartonline:20190704213052p:plain

 

 

 

 カスタマイズしてみよう!

 

文字をかえる!

f:id:sackartonline:20190705001320j:image

下記コードの赤文字を好きな文字に書き換える。

 content: 'index' ; (例)content: 'もくじ' ;

※PC版の場合、カスタムコード19行目

スマホ版の場合、カスタムコード20行目

 

 

 色を変える!

f:id:sackartonline:20190705001338j:image

〇全体背景

下記コードの赤文字を好きなカラーコードに書き換える。

background-color: #f4f4ff;/* 背景色 */

※PC版の場合、カスタムコード19行目

スマホ版の場合、カスタムコード20行目

 

〇index背景

下記コードの赤文字を好きなカラーコードに書き換える。

background-color: #4c6cb3; /* index背景色 */

※PC版の場合、カスタムコード15行目

スマホ版の場合、カスタムコード16行目

 

〇アイコンマーク

下記コードの赤文字を好きなカラーコードに書き換える。

color: #ffb2ff;/* リストマークの色 */

※PC版の場合、カスタムコード49.56.63行目

スマホ版の場合、カスタムコード50.57.64行目

 

〇枠線

下記コードの赤文字を好きなカラーコードに書き換える。

border: 2px dashed #ffb2ff; /* 線の太さ・破線・色 */

※PC版の場合、カスタムコード4行目

スマホ版の場合、カスタムコード5行目

 

カラーコード一覧はこちらをチェック

 

リストマークを変える!

f:id:sackartonline:20190705001351j:image

下記コードの赤文字を好きなコードに書き換える。

content: "f/02d";/* リストマーク */

※PC版の場合、カスタムコード46.53.60行目

スマホ版の場合、カスタムコード47.54.61行目

リストマークコード例

029
023 ○の中に+
008 ↓の先端
02d
049
048

💛

 

枠を変える!

f:id:sackartonline:20190705001401j:image

下記コードの赤文字を好きなコードに書き換える。

border: 2px dashed #ffb2ff; /* 線の太さ・破線・色 */

※PC版の場合、カスタムコード4行目

スマホ版の場合、カスタムコード4行目

直線にする場合は、solid入力

 

 

 

 

今回のカスタマイズ解説はこのくらいにしておきます👏

皆さん、オシャレな目次は出来ましたか??

ごっりごりにカスタマイズして、オシャレの頂点を目指していきましょ〜!😆

 

参考になりましたら、ポチッとブックマーク・スターを頂けると嬉しいです😭🙏✨

 

ブログ関連の記事