“Cocoon”ヘッダーのタイトルを"Google Fonts"でカスタマイズ

ヘッダーのタイトルを↓↓のように変更します。

デフォルトでは図上部の文字が表示されてしまうので、「グーグルフォント」を用いて図下部のような表示に変更します。

また同時に、ヘッダーの高さを文字の高さに合わせてスリムにカスタマイズします。

ヘッダーのタイトル文字を変更

カスタマイズの手順は次の通りです。

手順

“Cocoon”の子テーマには「header php」が無いので、親テーマからコピーする必要があります。FTPソフトを使う方法もありますが、サーバーのファイルを直接コピーした方が簡単です。

「親テーマ」から「子テーマ」にコピーする方法は、【”WordPress”「親テーマ」の”header.php”を「子テーマ」にコピーする】で解説しています。

まずは「Google Fonts」にアクセス。
URL：https://fonts.google.com/

下図が表示されるので、スクロールして好みのフォントを検索します。

好みのフォントを見つけてクリックします。

↓↓が表示されたら「+ Select this style」をクリックしてコードを表示させます。

右側に「リンクコード」と「CSSコード」が表示されます。

“Google Fonts”の「リンクコード」を「header php」に貼り付けます。

“WordPress”の設定画面から「外観」の「テーマエディター」を選択。編集するテーマが「Cocoon Child」になっていることを確認して編集します。

※　テーマのコードを変更する際には必ずバックアップすること。

“Google Fonts”の「CSSコード」を「style.css」に貼り付ける。

以上でヘッダーの文字が”Google Fonts”に変更出来ました。

次にフォントサイズの大きさと太さを変更します。

↓↓のコードを、先ほど貼り付けた”Google Fonts”の「CSSコード」の下に貼り付けます。

/*ヘッダーロゴ（サイズ・カラー）*/
.logo-header a span{
font-size:52px;
font-weight:500;
}

コードの意味

　※　数字を変更してサイズを調整する。

CSSコードで文字の色を指定することもできますが、今回は「コクーン設定」で指定した背景と文字色を使います。（コクーン設定の「ヘッダー」で背景と文字色は設定できます）

最後に、スマホで表示される文字の大きさを調整します。

↓↓のコードを、先ほど貼り付けた「CSSコード」の下に貼り付けます。

/*スマホのサイトタイトルの文字サイズ変更*/
@media screen and (max-width:768px){
#header .site-name-text{
font-size: 48px;
}
}

「font-size」はレスポンシブテストで確認して好みで調整してください。

ヘッダーを文字の高さに合わせてスリムに見せようと「Cocoon設定」でヘッダー高さの数字を変えてみましたが低くなりません。どうやら限界があるようなので「CSSコード」を追加して解決します。

下のコードを、先ほど貼り付けた「CSSコード」の下に貼り付けるとヘッダーがスリムになります。

/*ヘッダー高さを低くする*/
.logo.logo-header.logo-text {
	padding: 0px;
}

コードの意味

「padding」は文字の余白のことなので、０pxにして余白を無くしました。