> 【国内最高】人気№1のブログテーマ「SWELL」をガチレビュー!
PR

SWELLの文字(フォント)サイズを限界突破するカスタマイズ【コピペでOK】

swell-font-size-change

SWELLの文字(フォント)サイズを変更したいな~。ちょっとPCのサイズが小さいんよな~。

と、いうアナタ。

この記事を見れば、万事解決やで。

SWELLの文字サイズを18px以上に限界突破したいなら、ぜひ見ていってね~。

見たいところに飛べる目次

SWELLの文字(フォント)サイズを変更する方法【通常】

まずは、SWELLの文字(フォント)サイズを変更する方法。通常のやり方から紹介します。

手順としては、以下のとおりです。

  • 外観→カスタマイズをクリック
  • サイト全体設定をクリック
  • 基本デザインをクリック
  • フォントサイズを選択
SWELLフォントサイズ
ヒナキラ

設定画面は、こんな感じです。

上記画面でサイズを変更できます。が、一番大きくても18pxまでなんですよね。

僕は大きくて読みやすいサイズにしたいから、ワンサイズアップしたいなと思って、「19px」にカスタマイズしています。

では、そのカスタマイズ方法を紹介していきますね。

SWELLの文字サイズを限界突破するカスタマイズ【CSS】

SWELLの文字サイズを限界突破(18px以上)するカスタマイズ方法を見ていきましょう。

まずはカスタマイズした事例から。どんな感じになるかを紹介します。

PCでのカスタマイズ例

文字サイズ18【通常の限界値】

文字サイズ18

文字サイズ22【限界突破】

文字サイズ22
ヒナキラ

PCでのカスタマイズ例はこんな感じ。

モバイルでのカスタマイズ例

モバイル限界突破前

モバイル文字サイズ中

モバイル文字サイズ22

モバイル文字サイズ22
ヒナキラ

モバイルでのカスタマイズ例はこんな感じ。

モバイルで22pxはデカすぎるかな・・・(笑)

SWELLの文字サイズをPC・モバイルともに限界突破する手順

SWELLの文字サイズをPC・モバイルともに限界突破する手順です。

  • 外観→カスタマイズをクリック
  • 追加CSSをクリック
  • 下記のコードを入力
  • フォントサイズを変更
CSSカスタマイズ
/*フォントサイズ*/
p { font-size:22px;}
ヒナキラ

上記のコードをコピペして文字サイズは変更してね~。

サイズは、数字の部分だけを変えればOKです。

SWELLの文字サイズをPCのみ限界突破する手順

SWELLの文字サイズをPCのみ限界突破する手順です。

  • 外観→カスタマイズをクリック
  • 追加CSSをクリック
  • 下記のコードを入力
  • フォントサイズを変更
追加CSSにコードを入力
/*フォントサイズ(PCのみ)*/
@media screen and (min-width: 768px) {
p { font-size:22px;}
}
ヒナキラ

上記のコードをコピペして文字サイズは変更してね~。

SWELLの文字サイズをモバイルのみ限界突破する手順

SWELLの文字サイズをモバイルのみ限界突破する手順です。

モバイルのみ限界突破
/*フォントサイズ(モバイルのみ)*/
@media screen and (max-width: 767px) {
p { font-size:22px;}
	}
ヒナキラ

上記のコードをコピペして文字サイズは変更してね~。

まとめ|SWELLの文字(フォント)サイズを変更して見やすくしよう!

今回は、SWELLの文字(フォント)サイズを変更する方法を紹介しました。

大抵の場合は、SWELLの基本サイズで十分だと思いますけど、僕みたいに少しだけ変えたいな~という方は、ぜひ参考にしてみてね~。

さりげなく、ちょっこっとだけ人と違うってのも、悪くない気分だよ(笑)

知らんけど。

ヒナキラ

そんじゃ、バイバイキーン!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次