サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年5月16日 12:57
不具合・カスタマイズ対象ページのURL： https://pikapika-okiraku.com/
相談内容：
お世話になります。
Cocoon子テーマのデフォルトを使用しております。以下の件についてお尋ねさせていただきます。
現在Google Font以外のフォントを見出し文字として使用したいと思い、別のフォント『A-OTF Maru Folk Pro R.otf』を外部よりWordpress Dataの中 Contents>Theme>Cocoon Child > の下にアップロードし、併せて追加CSSの中にも指示を書き込んで、見出しの文字として使用しておりますが、PC以外のデバイス（スマホ、タブレット）には正しくフォントが反映されておらず、指示したことの無い明朝的なフォントが表示されてしまっています。
１．PC同様のフォントをPC以外の全てのデバイスで表示させるにはどうすればよいでしょうか？
２．また、プラグインを使ってGoogle Fontを取り込み、Cocoon 設定>全体の中でNoto San JPを選択してWEB内の文章のフォントとして使用しているのですが、上記に記しました外部から取り込んだ『A-OTF Maru Folk Pro R』見出しのフォントと、文章に使用している『Noto San JP』を両方Wordpress内で同時に使用することは可能でしょうか？
※スクショ画像添付
----------------------------------------------
サイト名：氣樂
サイトURL： https://pikapika-okiraku.com
ホームURL： https://pikapika-okiraku.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.2
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：en-US,en;q=0.9,ja;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.9
カテゴリー数：6
タグ数：1
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：1185バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ： 
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam: Spam Protection 5.1
BackWPup 4.0.0
Contact Form 7 5.7.6
Contact Form 7 add confirm 5.1
HubSpot All-In-One Marketing - Forms, Popups, Live Chat 10.1.16
Japanese font for WordPress (Previously: Japanese Font for TinyMCE) 4.28
SiteGuard WP Plugin 1.7.5
Stylish Cost Calculator 7.4.2
WP File Manager 7.1.9
----------------------------------------------
※高速化設定：無効
※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
サポートいただければ幸いです。どうぞよろしくお願いいたします。
Topic starter
2023年5月16日 16:28
PCとスマホのスクリーンショットです。
Topic starter
2023年5月16日 16:29
PC
Topic starter
2023年5月16日 16:30
スマホ
2023年5月16日 16:31
回答１
●原因
PC、スマホ関係なく、定義されたフォントになっていません。
子テーマCSSの定義に間違いがあります。
20行目、名前にスペースが含まれるのに"で囲まれていない。
21行目、font-styleは通常体、筆記体などのスタイルを定義。太さではない。
22行目、OpenTypeフォントなのにTrueTypeフォントと定義している。
27行目、font-faceで定義したfont-family名と異なる。
●対策
以下の定義し直して下さい。
子テーマCSSと同じディレクトリに、フォントファイルを格納との事。この為、パス指定は不要です。
font-family名は単なる識別子なので、重複しなければ名前は自由です。
子テーマCSSと同じディレクトリに、フォントファイルを格納との事。この為、パス指定は不要です。
font-family名は単なる識別子なので、重複しなければ名前は自由です。
/*Webフォントの読み込み*/
@font-face {
font-family: "A-OTF Maru Folk Pro R";
font-style: normal;
src: url("A-OTF Maru Folk Pro R.otf") format("opentype");
}
/*見出しをWebフォントに*/
.article h2, .article h3 {
font-family: "A-OTF Maru Folk Pro R";
}
回答2
各要素(例：.article h2)に対し、個別にfont-familyを定義しなければ
以下で設定したフォントが、標準となります。
[Cocoon設定]→[全体]→フォンサイト
以下で設定したフォントが、標準となります。
[Cocoon設定]→[全体]→フォンサイト
他の問題
「Japanese font for WordPress」で設定したフォントがCocoon設定より優先されているようです。
同じNoto Sans JPを使っており、混乱する為、プラグインを削除する事をお勧めします。
見出しh2の以下に、クラスでなく、CSSそのものを記述している。削除して下さい。
[高度な設定]→[追加CSSクラス]
[高度な設定]→[追加CSSクラス]
Topic starter
2023年5月16日 16:51
chu-ya さん
早速のご返信とアドバイスをいただき、本当にありがとうございます。
CSSについてはあまり理解できておらず、知識不足ですので
大変助かりました。
只今変更してみましたが、変化が見られないように思います。
Topic starter
2023年5月16日 17:16
chu-ya さん
只今、アドバイスいただきましたように、子テーマCSSの修正、Japanese font for WordPressの削除、見出しh2の不要な追加CSSの削除を行いましたが、やはりスマホの表示に変化は見られないようです。
ひょっとして、それは教えていただいた以下のご回答に関係してくるのでしょうか？
回答2
各要素(例：.article h2)に対し、個別にfont-familyを定義しなければ
以下で設定したフォントが、標準となります。
[Cocoon設定]→[全体]→フォンサイト
以下で設定したフォントが、標準となります。
[Cocoon設定]→[全体]→フォンサイト
これについては、もしPC以外のスマホやタブレットのh2表示に指定したFontを定義したい様であれば、どの場所にどのようなコードをその都度入れなければいけないのでしょうか？
アドバイスいただければ幸いです。よろしくお願いいたします。
2023年5月16日 17:32
まだPC、スマホともに反映されていません。
●原因１
子テーマディレクトリー内にフォントファイル「A-OTF Maru Folk Pro R.otf」が無いようですが？
https://pikapika-okiraku.com/wp-content/themes/cocoon-child-master/ A-OTF Maru Folk Pro R.otf
●原因2
追加CSSから削除して下さい。
以下と子テーマCSSの両方に定義してあります。
この為、追加CSSが優先されます。
しかし、face-fontの定義はCSSのフロパティ定義（先頭）である必要がある為、結果、反映されません。
[外観]→[カスタマイズ]→[追加CSS]
2023年5月16日 17:38
これについては、もしPC以外のスマホやタブレットのh2表示に指定したFontを定義したい様であれば、どの場所にどのようなコードをその都度入れなければいけないのでしょうか？
言っている意図が分かりません。すみません。
Topic starter
2023年5月16日 18:02
@chu-ya さん
只今WP File Manager内を確認しましたところ、
/cocoon-child-master/A-OTF Maru Folk Pro/A-OTF Maru Folk Pro R/A-OTF Maru Folk Pro.otf
の順番で格納されていました。どこかを書き換える必要があるでしょうか？
追加CSSの重複定義を削除いたしました。
回答2
各要素(例：.article h2)に対し、個別にfont-familyを定義しなければ
以下で設定したフォントが、標準となります。
[Cocoon設定]→[全体]→フォンサイト
以下で設定したフォントが、標準となります。
[Cocoon設定]→[全体]→フォンサイト
個別にfont-familyを定義するとのアドバイスですが、どのように定義すればよろしいでしょうか？
よろしくお願いいたします。
2023年5月16日 18:29
フォントのパスが違います。修正して下さい。
どんなフォントなのか、理解した上で使うよう心掛けて下さい。図が期待するフォントです。
src: url("./A-OTF Maru Folk Pro/A-OTF Maru Folk Pro R/A-OTF Maru Folk Pro R.otf") format("opentype");
●回答
先にも書かれている通り、本文中の見出しh2,h3なら以下のように書きます。
/*見出しをWebフォントに*/
.article h2, .article h3 {
font-family: "A-OTF Maru Folk Pro R";
}
申し訳ありませんが、各要素のクラスについてはご自分で調べて下さい。
また、CSSの基礎知識がないようなので、ネットに色々あるので、勉強して下さい。
ご自分で無理な場合は、フォーラムの注記にもあるように、カスタマイズ依頼して下さい。
Topic starter
2023年5月16日 18:58
chu-ya さん
大変詳しく、未熟な私の知識をここまで手厚くサポートしていただき、
本当にありがとうございました。心より感謝いたします。
アドバイスいただきましたフォントのパスを正しく入れ替えましたところ、
無事に全てのデバイス上でフォントを反映させることができました。
大変勉強になりました。また私も今後CSSについていろいろ勉強したいと思います。
今後ともどうぞよろしくお願いいたします。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。