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

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

ナナ

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

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

ナナ

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

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

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

ナナ

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

ナナ

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

ですが、文字の大きさを変更する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コードを入力するだけです。

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