Blog

【LION BLOG】とりあえず文字を大きくする、背景も1色にする【カスタマイズ】

2020/08/01

当ブログは、FITの無料ブログテーマLION BLOGを使っています。無料でこれだけのクオリティなので満足しています。ただ、テーマをインストールしてすぐに気になったのが、「文字サイズ」です。正直「文字小さいな」と思いました。

「LION BLOG」をインストールして、すぐに気になると思われる「文字サイズ」を取り急ぎ、サクッと直していこうと思います。ついでにサイドウィジェットエリアの背景色を変えて、メインエリアとサイドウィジェットエリアを同一色にして、ページ全体を単色の背景にしたいと思います。

カスタマイズの際は、バックアップをとりながら作業すると安全です。

CSSを追加する

ダッシュボードの『外観』から『カスタマイズ』を選択し、『追加CSS』を開いてそこにCSSを書き込んでいきます。『公開済み』ボタンを押すと実際に反映されます。

トップページの文字サイズを大きくする

各記事のタイトルの文字サイズを調整する

.heading.heading-archive {
	font-size: 4.2rem;
	margin-bottom: 30px;
	letter-spacing: -0.05rem;
}

font-sizeの数値を大きくすると、文字が大きくなります。好みの大きさに調整してご使用ください。
margin-bottomの数値を大きくすると、見出しテキストの下のスペースが広がります。
letter-spacingの数値をマイナス方向に大きくすると、文字と文字の間隔が狭まります。逆に、プラス方向に大きくすると、文字と文字の間隔は広がります。

各記事の画像下の投稿記事の文頭省略の文字サイズを調整する

.archiveList__text {
    font-size: 1.8rem;
}

[続きを読む]ボタンの文字サイズを調整する

.btn__link {
  font-size: 1.4rem !important;
}

投稿記事ページの文字サイズを大きくする

投稿記事タイトルの文字サイズを調整する

.heading.heading-primary {
	font-size: 4.8rem;
	line-height: 1.3;
}

font-sizeの数値を大きくすると、文字が大きくなります。好みの大きさに調整してご使用ください。
line-heightの数値を大きくすると、行の高さ(行と行の間)が広がります。

投稿記事の見出し h2 の文字サイズを調整する

.content h2 {
	font-size: 2.6rem;
	margin-bottom: 40px;
}

margin-bottomの数値を大きくすると、見出しテキストの下のスペースが広がります。

投稿記事の見出し h3 の文字サイズを調整する

.content h3 {
	font-size: 2.2rem;
	margin-bottom: 30px;
}

margin-bottomの数値を大きくすると、見出しテキストの下のスペースが広がります。

投稿記事の本文の文字サイズを調整する

.content {
 font-size: 1.8rem;
}

投稿記事の目次の文字サイズを調整する

.content ul li, .content ol li {
	font-size: 1.8rem;
}

背景を単色にする

body {
    background: #ffffff;
}

.t-light .l-hMain {
    background: #ffffff;
    position: relative;
}

.l-main::before {
    position: absolute;
    top: 0;
    right: 0%;
    bottom: 0;
    left: 0;
    content: "";
    background: #ffffff;
    border-right: none;
    z-index: -99999;
}

body』『.t-light .l-hMain』『.l-main::before』それぞれの『background』の『#ffffff』の部分を変えれば、背景色をお好みの色に変更できます。

RGBと16進数カラーコードの相互変換ツール - PEKO STEP

WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。16進数カラーコードとRGBを変換する計算式の解説も。


(2020.08.30 追記) 現在、当ブログはAFFINGER5を使用しています。



-Blog

© 2020 MUKOLOG