SE-NAILIST

東京に住む現役女性SE(ときどきネイリスト)のブログ「SE-NAILIST(えすいーねいりすと)」。メイク・ネイル・ITやスマホ・その他暮らしに役立つ情報をお届けします!

【タイトル・目次・本文】Minimalismテーマをカスタマイズ!

f:id:se-nailist:20181128023416p:plain

ブログ初心者が陥りがちな、デザインテーマのカスタマイズをやっちゃってます。
ブログ書きなよってね・・・

と、いうわけでせっかく時間かけていろいろカスタマイズしてたので、その一部を記事にしてみます!
(といっても、cssとかいろいろ慣れていないので、大したことは出来ていないです。)

私はこのブログで、この記事を執筆時点ではMinimalismのテーマを使用しています。
Minimalism - テーマ ストア
そのため、今回はこのテーマを使っている場合のカスタマイズになります。

ただ、その他のテーマを使用している方でも、
そのまま使えるものや、一部変更すれば使えるもの等あるかと思います!

追加で記入する箇所は、ダッシュボードの「デザイン→デザインCSS」です。

 

 

まず、ブログタイトルの文字間隔が狭いのが気になったので・・・

ブログタイトル

文字間隔

こんな感じにしたい時↓

f:id:se-nailist:20181128012727p:plain

こう書きます↓ 

/* ブログタイトル */
#blog-title #title{
    letter-spacing: 0.2em;   /* 文字の間隔調整(スマホで見たときも変わる) */
}

 

続いては、目次もカスタマイズしてみよう♪

目次 

目次記号→番号

こんな感じにしたい時↓

f:id:se-nailist:20181128022031p:plain

 こう書きます↓ 

/* 目次に番号を振る */
.entry-content .table-of-contents,
.entry-content .table-of-contents li {
    list-style-type: decimal;
}

文字サイズ

こんな感じにしたい時↓

f:id:se-nailist:20181128015538p:plain

こう書きます↓ 

/* 目次の文字サイズ */
.table-of-contents {
    font-size: 16px;     /* デフォルトのサイズが分からず…14か15? */
}

周りの枠と文字の間の空白

こんな感じにしたい時↓

f:id:se-nailist:20181128022058p:plain

こう書きます↓ 

/* 目次の周りの枠と文字の間の空白 */
.table-of-contents {
    padding: 60px 40px 25px;  /* 上・左右・下の空白サイズ。デフォルトは60px 70px 25px */
}

見出し毎の字下げ(インデント?)

こんな感じにしたい時↓

f:id:se-nailist:20181128022138p:plain

こう書きます↓ (デフォルト値が分からずでした)

/* 見出し毎の字下げ(インデント?) */
.table-of-contents ul {
    padding-left: 1em;     /* デフォルト値は…? */
}

 

最後に、本文の文字の大きさが、何だか小さいなぁと思ったので変更。

本文

文字サイズ

こんな感じにしたい時↓

f:id:se-nailist:20181128020324p:plain

 こう書きます↓ 

/* 記事本文の文字サイズ(PCで見たときのサイズ) */
.entry-content p {
    font-size: 16px;      /* デフォルトは15px */
}

/*記事本文の文字サイズ(スマホで見たときのサイズ) */
@media screen and (max-width:640px){
   .entry-content p {
        font-size: 16px;  /* デフォルトは14px */
        }
}

 

また、以下のように本文の文字サイズを大きくして、それに合わせて相対的に見出しサイズも変えたい場合は、

f:id:se-nailist:20181128022612p:plain

 

以下のように"p"を付けなければいいみたい。

/* 記事本文のフォントサイズ(相対的に見出しサイズも変わる) */
.entry-content {
    font-size: 16px;     /* デフォルトは15px */
}

/*記事本文のフォントサイズ(スマホで見たとき) */
@media screen and (max-width:640px){
    .entry-content {
        font-size: 16px;     /* デフォルトは14px */
    }
}

 

どなたかの参考になれば^^