ワードプレス

ワードプレスでサイトタイトルの文字サイズを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コードが出ると思います。

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

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

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

あなたはワードプレスやブログアフィリエイト、SEOなどでお悩みはありませんか?

hikey PCサポートでは、

  • サイトの集客が上がらない
  • コピーライティングってなに?
  • SEO対策方法が知りたい
  • ホームページが作りたい

などなど、ワードプレスについてのレッスンを中心に行なっています。

今の仕事の収入では将来的に不安な方

定年後に働き口が見つからないと心配な方

一度ご相談ください。

hikey PCサポート

-ワードプレス