愛知県西尾市でパソコンやホームページの個人レッスンをしています。

ワードプレス

ワードプレスでサイトタイトルの文字サイズをCSSで変更する方法

あなたはワードプレスでご自分のサイトを作成している時に、サイトタイトルの文字サイズをCSSで変更したいと思った事はありますか?

じつはCocoonなどの一部のテーマでは、サイトタイトルのサイズを設定などで変更する事はできません。

CSSというコードでワードプレスのデータに追記しなくてはならないのです

ここでは、初心者の方にもわかりやすく変更方法をお伝えします。

テーマによって仕様が違いますが、ここでは「Cocoon」と「Lightning」のテーマで行う方法です。

それではまいりましょう!

Cocoonで変更する方法

ここではCocoonの設定についてご説明します。

ではまず、変更する場所ですが、ワードプレスのダッシュボードから以下の所へ進んでください。

「外観」→「カスタマイズ」→「追加CSS」

この「追加CSS]へ以下を記述します

 

サイトタイトルの文字サイズ変更

メモ

#header .logo .site-name-text {
font-size: 24px;
}

24のところの数字を変えると大きくなります

以上です。

すごく簡単ですね(*^-^*)

 

サブタイトル文字サイズ変更

サブタイトルの大きさを変えたい場合は「追加CSS」に以下を記述します。

メモ

.tagline {
font-size: 24px;
}

色を変えたい場合

色を変える場合は以下で設定です。

「ダッシュボード」から「Cocoon設定」で変更できます。

Lightningで変更する方法

つづいてLightningというテーマでも以下のところに記述します。

「外観」→「カスタマイズ」→「追加CSS」

サイトタイトルは以下を記述します。

サイトタイトルのサイズは以下を記述します。

Cocoonとは違うので注意してください。

メモ

.site-header-logo a {
font-size: 30px;
}

スライドショーのタイトル文字サイス変更

Lightningの特徴でもあるスライドショーのタイトルサイズ変更はこちらです。

メモ

@media (min-width: 1200px){
.ltg-slide-text-title {
font-size: 32px;
}}

この場合は「横幅が1200以上の時に32pxサイズで適用されるという意味」となります。

スライドショーのサブタイトル文字サイズ変更

スライドショーのサブタイトルを変える場合はこちらです。

メモ

.ltg-slide-text-caption{font-size:18px;}

それぞれ「カスタマイズ」→「追加CSS」に記述してくださいね。

まとめ

テーマによっては設定で変更できる場合もあります。

もし変更できないテーマの場合は「追加CSS」にサイトで調べたコードを記述してください。

「テーマ名 タイトル サイズ変更」などで検索すればCSSコードが出ると思います。

もし間違っていてもコードを消してしまえば元に戻りますので安心してやってみてください。

今回は「ワードプレスでサイトタイトルの文字サイズを変更する方法」をお伝えしました(*^-^*)

 

愛知県でアフィリエイトを覚えて副収入を得たいとお考えの方はこちら

あなたはパソコンでの困りごとはありませんか?

hikey PCサポートでは、

  • パソコンの使い方がわからない
  • ホームページが作りたい
  • 自分専用のブログサイトが欲しい
  • Googleで検索1位を取りたい

などなど、パソコンについてのお悩みを解決します。

またパソコンを使ったお小遣い稼ぎの方法やSNSの使い方など。

ぜひ一度ご相談ください。

hikey PCサポート

-ワードプレス