Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › Webフォントをサイトタイトルに導入したい
- このトピックには6件の返信、1人の参加者があり、最後に
むらかみにより9年、 5ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年3月5日 12:41 AM #50769
むらかみ
ゲストすみません。
サイトタイトルにWebフォントを導入したいのですが、
なんどやってもできません。
詳しいかた教えていただけないでしょうか。
http://faqunited.com
↑がサイトです。以下、Simplicity2 child: スタイルシート (style.css)
@charset "UTF-8"; @import url("../simplicity/style.css"); @import url('https://fonts.googleapis.com/css?family=Dancing+Script|Rock+Salt'); /*! Theme Name: Simplicity2 child Template: simplicity2 Version: 20161002 */ /* Simplicity子テーマ用のスタイルを書く */ body { /* サイトタイトル文字の設定 */ font-family: 'Rock+Salt', sans-serif;} /*ヘッダーブログタイトル文字上からの余白*/ #site-title{ margin-top:20px; margin-bottom:25px; font-family: 'Rock+Salt', sans-serif; } /*ヘッダー文字の大きさの変更*/ #site-title a{ display:block; text-decoration:none; color:#222; font-size:50px; line-height:100%; font-family: 'Rock+Salt', sans-serif; } -
2017年3月5日 2:22 AM #50772
Hidekichi
ゲストまず、
@import url(“../simplicity/style.css”);はおかしいです。
こうするとSimplicity1系のスタイルを読み込みに行くかと思います。Simplicity2親テーマのstyle.css
Simplicity1親(子?)テーマのstyle.css
Simplicity2子テーマのstyle.cssこんなcssになり、Simplicity2の親テーマを@importで読み込んだスタイルが上書きしてしまうので色々おかしくなります。
なので@import url(“../simplicity/style.css”);は間違いなく削除する必要があります。@importを使うのであれば、
@import url('https://fonts.googleapis.com/css?family=Rock+Salt');
で良いかと思います。#site-title { font-family: 'Rock Salt', sans-serif; } #site-title a { font-family: inherit; }が一般的ですが、#site-title aのfont-familyは他で何かしら読み込まれていて(継承されていて)いる場合に上書きが必要なので上記のようにします。
サイトタイトルは基本リンクだけかと思いますが、リンク以外にも該当フォントを適用したい場合、#site-titleにまず適応しておいて、その子要素のaに継承します。サイトタイトルにリンク以外の何かしらのテキストが入って(適用されて)いない場合は、
#site-title a { font-family: 'Rock Salt', sans-serif; }だけでもよいです。質問に書いてあるようにサイト全体に適用したい場合は、
body, #site-title a { font-family: 'Rock Salt', sans-serif; }としておいてもよいかと。
また別件ですが、質問や回答する場合には、cssなどは必ず範囲選択後codeボタンを適用して下さい。
記入ミスや、全角の使用などの有無を確認するためです。 -
2017年3月5日 2:41 AM #50774
Hidekichi
ゲストちなみにですが、
body { font-family: 'Rock Salt', sans-serif; }とすれば、他で上書きされない限り、Rock Saltがまず適用され、文字がRock Saltにない場合、sans-serifが適用されます。
最悪、
body { font-family: 'Rock Salt', sans-serif !important; }とすれば、他で!importantが使われていない限り上書きが強制的にできなくなります。がこれは危険なので、!importantなしでbodyに設定しておき、適用されないセレクタを見つけて、追加していくのが良いかと思います。
各セレクタに毎度font-familyを書くのは面倒なので、子テーマの上の方にまとめて書いておくと管理が楽です。ここまでは、@importでやる方法ですが、実際は、
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
※ 先頭の<は投稿エラー回避のため全角で書いてます。このように書けば良いので、
子テーマfunctions.phpに、
function addWebfont() { wp_enqueue_style( 'gwfont-rock-salt', 'https://fonts.googleapis.com/css?family=Rock+Salt', false ); } add_action( 'wp_enqueue_scripts', 'addWebfont' );こんな感じでもよいかと。
@importは読み込みがlinkに比べて1.5〜3倍ぐらい遅いです。言ってもミリセカンドの話ですけど。環境によりけりですがlinkの方が速いです。ここらを踏まえてSimplicity2ではほぼ@importは使われていないと思います。 -
2017年3月6日 1:25 AM #50805
むらかみ
ゲスト解決しました1
ひできちさん
いつもありがとうございます! -
2017年3月6日 11:29 AM #50809
むらかみ
ゲストなんどもすみません。
サイドバータイトルの表示もwebフォントを適用したいのですが、
表示がされません。
類似トピックスのひできちさんの投稿を参考に以下を子テーマの
スタイルシートに追加してみましたができませんでした。
どうすればよろしいでしょうか。q/*サイドバータイトル */ #sidebar .widget_title { font-family: 'Rock Salt', sans-serif; }ABOUT ME の部分へWebフォントを適用したいです。
-
2017年3月6日 4:56 PM #50814
Hidekichi
ゲスト#sidebar .widget_title { font-family: 'Rock Salt',sans-serif; }上でイケました。
#sidebar .widget_title { /*! font-family: 'Rock Salt', sans-serif; */ }cssにはこう書いてあるみたいですが、!は一応コメントアウトされるはずですが、wordpressは別の意味があるため、!を抜いてみて下さい。
-
2017年3月6日 7:05 PM #50815
むらかみ
ゲストありがとうございます!
結果、
#sidebar .widget_title { font-family: 'Rock Salt',sans-serif!important; }でいけました!
いつもありがとうございます!
-
-
投稿者投稿
- トピック「Webフォントをサイトタイトルに導入したい」には新しい返信をつけることはできません。