広告 はてなブログ

【タイトル・目次・本文】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 */
}
}

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

-はてなブログ