Font Awesome
WordPress

ブログ名サイトタイトルの文字の大きさを変更する方法【Cocoon利用者向け】

サイトタイトルの文字の大きさを変更WordPress
この記事は約3分で読めます。
記事を書いた人
プロフィールナナ
ねこ好きの40代専業主婦
【保有資格】FP2級、簿記2級、宅建、登録販売者
簿記1級勉強中!

ワードプレスでCocoonのテーマを利用していますが、ずっとヘッダー部分のブログ名の文字の大きさが小さいことが気になっていました。

ナナ
ナナ

ブログ名の文字が小さくて目立たない感じでした。

色々ネットで調べて、無事ブログ名タイトルの文字の大きさを変更することができました。

CCSカスタマイズにCCSコードを入力するだけ

ナナ
ナナ

変更したところです。ブログ名が大きくなりました。

今回は、ワードプレスでCocoonのテーマを利用している人向けに、ブログ名の文字の大きさを変更する方法を紹介します。

こんな人におすすめの記事
  • Cocoonを利用している人で、ブログ名の文字の大きさを変更する方法を知りたい人

ブログ名サイトタイトルの文字の大きさを変更する方法【Cocoon利用者向け】

ナナ
ナナ

サイト名の文字の大きさを変更するためにすることは、以下の2つ。

  1. Cocoonのカスタマイズ 追加CCS画面を開く
  2. 追加CCSに文字の大きさを変更するCCSコードを入力する
ナナ
ナナ

ネットで色々検索して、ようやく文字の大きさを変更する方法を見つけました。

ですが、文字の大きさを変更するCCSコードを入力しても、なぜかパソコン画面にしか反映されませんでした。

もしかしたらスマホ用のコードもあるのかなと思って調べると、スマホ用のコードも発見。

ナナ
ナナ

こちらのサイトでようやく見つけました。詳しい設定方法が載ってます。

スマホ表示におけるサイトタイトルのフォントサイズ変更についての報告 | 不具合報告 | Cocoon フォーラム (wp-cocoon.com)

ナナ
ナナ

それでは文字の大きさを変更していきましょう。

まずはCCSコードを入力する画面を開きます。

Cocoonのカスタマイズの追加CCS画面を開く

ワードプレスのダッシュボード画面にログインして、「外観」→「カスタマイズ」をクリックします。

するとカスタマイズの画面が表示されるので、一番下の「追加CCS」をクリックします。

あとは「追加CCS」欄に、文字の大きさを変更するCCSコードを入力するだけです。

追加CCSに文字の大きさを変更するCCSコードを入力する

「追加CCS」にパソコン用、スマホ用のCCSコードをそれぞれ入力します。

テーマにCocoonを利用している人は、以下のコードを入力してみて下さい。

ナナ
ナナ

私は以下のコードで設定変更できたので多分できると思います。

文字の大きさはお好みで数値を変更するだけ。

パソコン用画面の場合 ブログ名の文字の大きさを変更するCCSコード

.site-name-text{
font-size: 30px;
}

スマホ用画面の場合 ブログ名の文字の大きさを変更するCCSコード

@media screen and (max-width: 768px) {
	#header .site-name-text {
		font-size: 30px;
	}
}
ナナ
ナナ

コードを入力するとこんな感じです。

CCSコードの入力が終わったら「公開」をクリックします。

ナナ
ナナ

もし文字の大きさが変わらない場合は、「Cocoonのテーマ編集」のstyle.ccsにコードを入力してみてください。

カスタマイズは、子テーマに。

まとめ

今回はワードプレスでCocoonを利用している人向けに、ブログ名タイトルの文字の大きさを変更する方法を紹介しました。

ブログ名の文字の大きさを変更するのはかんたんで、追加CCSに文字の大きさを変更するCCSコードを入力するだけです。

今回の記事を参考にブログ名の文字の大きさを変更してみて下さいね。

この記事を書いた人
ナナ

こんにちは、「ねこのライセンス」のサイトを運営しているナナです。

ねこ・株式投資・節約&貯金・資格の勉強・音楽鑑賞・美術鑑賞・断捨離が好きです。

何の取り柄もない専業主婦の私が、「自分に自信をつけたい!」という思いで資格の勉強やブログをしています。

私の学んだ知識が、ブログを通じて私と同じ40代の専業主婦の人に役立つとうれしいです。

そして、私の夢はいつかブログで稼げるようになること。

私は人見知りで人付き合いが苦手なので、外で働くのは正直怖いです。なので、自宅に居ながら好きなことで稼げたらいいなと思っています。

詳しい私の自己紹介記事は、こちらのページにあります。

専業主婦限定の初心者向け断捨離・お金の無料相談は、こちらのページからお気軽にどうぞ。

お仕事のご依頼・お問い合わせは、こちらのページからお願いします。

ナナをフォローする
ナナをフォローする
ねこのライセンス
error:Content is protected !!
タイトルとURLをコピーしました