Riri’s Blog

ファッション,美容,コスメが大好き♡ アラサー・都内在住アパレル系OLのRiriが綴るブログです。 乾燥肌で保湿命、オーガニックコスメが好物。 実際に使用して良かった商品のレビューをはじめ、リアルなOLライフをお届けいたします。

【はてなブログ】目次を簡単にサクッとカスタマイズする方法♪⦅初心者向け⦆

f:id:riri_y:20190124230349p:plain

 

 

いつもブログに表示させている【目次】を、自分好みにサクッとカスタマイズしちゃいましょう♡

 

「ちょっとだけ文字を大きくしたいな…」とか、「背景色だけ変えたいな」とか、

CSSをいじるのは少し難しいけど、自分好みに変えてみたい。

そんな初心者さん向けです。

 

私自身が「少しだけ修正したいな」と思ったことをきっかけに、メモも兼ねて書いていきます♪

内容は随時追記していきます✭

 

 

 

テンプレを使って、楽してまるごと変える方法

先人ブロガー様方が既に作ってくださっているコードをまるっとコピペして、デザインを変えちゃう方法♪

何も考える必要がないので楽チンです♪

 

 

 

少しだけ、自分好みに調整する方法

何が書いてあるかよくわからないけど、少しだけカスタムしたい…

そんな方向けに、簡単にカスタムする方法を説明します。

 

タイトル部分をカスタムする
  1. .table-of-contents:before { content: "目次"; /*目次の部分がタイトル名*/
  2.     display: inline-block; width: 100%; padding: 7px; /*タイトル内余白*/
  3.     margin-bottom: 20px; /*タイトル下余白*/
  4.     box-sizing: border-box; text-align: center; /*タイトル文字の位置*/
  5.     font-size: 1.0em; /*タイトル文字大きさ*/
  6.     font-weight: bold; /*タイトル文字太さ*/
  7.     color: #000; /*タイトル文字色*/
  8.     background-color: #fff; /*タイトル背景色*/ }

 

f:id:riri_y:20190112210213p:plain解説f:id:riri_y:20190112210213p:plain

目次の名前を「もくじ 」や「INDEX」など自由に変えてください♪

タイトル部分の空白(余白)をどれだけ広げるかです。px部分の数字を増やすほど、空白が広くなります。

目次名と目次リストの間の空白(余白)をどれだけ広げるかです。数字を増やすほど、空白が広くなります。

タイトルを表示させる位置です。

左揃え・真ん中・右揃えの指定方法→スタイルシート[CSS]/テーブル/セル内の文字の位置を指定する - TAG index

タイトル文字の大きさです。数字を増やすほど、文字が大きくなります。

タイトル文字の太さです。

太字・細字・ノーマルの指定の方法→【CSS】font-weightで文字の太さを変える方法:効かないときは?

タイトル文字の色を変えられます。#の後ろがカラーコードです。

お好みの色にしましょう→HTMLカラーコード

タイトル部分のみの背景色を変えれられます。#の後ろがカラーコードです。

お好みの色にしましょう→HTMLカラーコード

 

❤︎編集の仕方❤︎

既にテンプレをコピペして、デザインCSSにコードを入れてある方は、

.table-of-contents:before {}

内の変えたい所をイジればOKです♪

 

デザインCSSに何もコードを入れていないと言う方は、

上のコード見本から、変えたい部分のみをコピペして入れてください。

 

例)タイトルの文字色のみを変えたい場合。

  1. .table-of-contents:before { 
  2.     color: #000; /*タイトル文字色*/ }

 

※ちなみに…

設定しているテーマによっては、タイトルの位置がズレてしまう事があるようです…。

その場合の対処法について、詳しく解説されている記事があります!

はてなブログ目次のデザイン崩れの直し方とカスタマイズ方法まとめ! | すちろぐ 〜「暇」を捨て「充実」を手に入れる場所。〜

 

私も、よく分からないが(笑)タイトルの位置が右に寄っていたので、

left: 1.5em !important;

このコードを追加して左に寄せました。数字を小さくするほど左に寄ります。

 

目次の表示部分をカスタムする
  1. .entry-content .table-of-contents { margin: 0 0 0 0; /*目次外側の余白*/
  2.     padding: 15px 0; /*目次内側の余白*/
  3.     border: 1px solid #ddd; /*枠線の太さ・種類・色*/
  4.     font-size: 1.3em; /*文字大きさ*/
  5.     font-weight: normal; /*文字太さ*/
  6.     color: #000; /*文字色*/
  7.     background-color: #fff; /*背景色*/
  8.    }

 

f:id:riri_y:20190112210213p:plain解説f:id:riri_y:20190112210213p:plain

目次外側の余白の指定です。順番に上・右・下・左の数値指定になっています。

数字を増やすほど、空白が広くなります。

詳しい解説→CSSのmarginとは?paddingとは?余白の指定方法まとめ

目次内側の余白の指定です。①と同じ要領ですが、このように2つのみ書くと、上下・左右としてまとめて指定もできます。

数字を増やすほど、空白が広くなります。

詳しい解説→CSSのmarginとは?paddingとは?余白の指定方法まとめ

目次を囲む枠の種類指定です。左から順に、

1)枠の太さ(数字を増やすほど枠が太くなります)

2)枠の種類(solid:直線、dashed:点線)

3)枠の色(お好みの色にしましょう→HTMLカラーコード

目次表示部分の文字の大きさです。数字を増やすほど、文字が大きくなります。

目次表示部分の文字の太さです。

太字・細字・ノーマルの指定の方法→【CSS】font-weightで文字の太さを変える方法:効かないときは?

目次表示部分の文字色を変えられます。#の後ろがカラーコードです。

お好みの色にしましょう→HTMLカラーコード

目次表示部分の背景色を変えれられます。#の後ろがカラーコードです。

お好みの色にしましょう→HTMLカラーコード

 

編集の仕方は、タイトル部分と同じ要領でお願いします✭