Cocoonでサイトタイトルのフォントを「Google Fonts」のフォントに変更する方法のメモ書きです。
私の忘備録のメモ書きなので読みにくいです。ごめんなさい。
Google Fontsでフォントを選ぶ
Google Fontsにアクセスする。
右側の「Selected family」は空にしておく。
フォントを選びなおすときも必ず空にする。
残っている場合は「Remove All」で削除。
お好みのフォントを選ぶ。
画面が切り替わったら下のほうにある「Styles」からフォントを選択する。
右側の「Selected family」に選択したフォントの情報が表示される。
WordPress/Cocconにフォントを設定する
WordPressの「外観」－「テーマファイルエディター」を選択する。
右側の「tmp-user」－「head-insert.php」を選択する。
エディタの右上の「編集するテーマを選択：」に「Cocoon Child」が選択されていることを確認してください。（違っていたらやっちゃだめ。）
「head-insert.php」ファイルの末尾に「Selected family」の①を追加する。
ファイルの更新をクリックする。
右側の「スタイルシート」を選択する。
ファイル内の「/必要ならばここにコードを書く/」の下に「.site-name-text 」ブロックを作成し、「Selected family」の②を追加する。
/*******************************
** 子テーマ用のスタイルを書く
********************************/
/*必要ならばここにコードを書く*/
/* タイトル フォント */
.site-name-text {
font-family: ‘Caveat’, cursive;
}
必要に応じてフォントサイズを設定する。
- パソコン表示のフォントサイズ
「.site-name-text 」ブロック内に「font-size」プロパティを追加し、「px」単位で指定する。
/* タイトル フォント */
.site-name-text {
font-family: ‘Caveat’, cursive;
font-size: 60px;
}
- スマホ表示のフォントサイズ
ファイル内の「レスポンシブデザイン用のメディアクエリ」の中に「#header .site-name-text 」ブロックを追加し、「font-size」プロパティを「px」単位で指定する。
/*****************************
** レスポンシブデザイン用のメディアクエリ
******************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
#header .site-name-text {
font-size: 40px;
}
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
#header .site-name-text {
font-size: 40px;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
#header .site-name-text {
font-size: 40px;
}
}
コメント