wordpressのparallaxテーマについて教えて下さい。丸ゴシックを基本フォントで適用したいのですがうまくいきません。
style.css内の記述方法等を教えていただければ助かります。
ベストアンサー
-
rouge_2008
満足100pt
以下の手順で作業してみてください。
【CSSにWebフォントの定義を追加】
IEで動作させる為には2つの方法があるようです。
1.「src」を2つ定義し、1つ目にIE用の定義、2つ目にその他のブラウザ用の定義を記述(※2つ目の最初に「local」の定義をする事でIEでは解釈できなくなります。)
・IEにも対応したWebフォントの使い方について
http://memocarilog.info/webdesign/4191@font-face { font-family: "フォントファミリー名"; src: url("./fonts/xxxxx.eot"); src: local('フォントファミリー名'), url("./fonts/xxxxx.woff") format('woff'), url("./fonts/xxxxx.ttf") format('truetype'); }※旧バージョンのIEでの動作は、IE9付属の開発者ツール(バージョン7および8)とIETester(バージョン6～8)の両方で正常動作を確認できました。(バージョン10以降については未確認ですが動作すると思います。)
2.1つ目にIE8以下用の定義を記述(※拡張子「.eot」の直後に「?」を記述する事で以降の記述を無視させています。)
・第4回 CSS3のWebフォントを使ってみよう
http://thinkit.co.jp/story/2011/08/18/2233/page/0/1
・HTML5&CSS3入門 第4回 @font-face（ウェブフォント）の利用
http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part4.html
・Webフォント
http://opentype.jp/webfont.htm@font-face { font-family: "フォントファミリー名"; src: url("./fonts/xxxxx.eot?") format('embedded-opentype'), local('フォントファミリー名'), url("./fonts/xxxxx.woff") format('woff'), url("./fonts/xxxxx.ttf") format('truetype'); }※旧バージョンのIEでの動作は、IETester(バージョン6～8)で正常動作を確認できましたが、IE9付属の開発者ツール(バージョン7および8)では動作しませんでした。(バージョン10以降については未確認ですが動作すると思います。)
上記どちらでもいいのですが、「style.css」の前半に追加してみてください。/* ファイルの先頭 ＊説明部分＊ */ /********************************************************************************************************************/ @import url(http://fonts.googleapis.com/css?family=Arimo:400,700|Spinnaker); /* この辺りに上記1または2のどちらかのパターンで記述してみてください。 */
・@font-face
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face
【フォントファイルをアップロード】
次に用意してあるフォントファイルを「wp-content/themes/parallax/fonts」フォルダにアップロードします。(※「fonts」フォルダは「parallax」テーマフォルダ内に作成してください。)
【「parallax」テーマを編集】
「parallax」テーマではサイト表示に利用するフォントをテーマのオプション設定で選択する仕組みになっていました。
フォントの選択肢として追加する為に「functions.php」に以下のように記述します。/* 243行目 */ function cyberchimps_typography_faces( $faces ) { $faces = array( ... 'MS Sans Serif, Geneva, sans-serif' => 'MS Sans Serif', 'MS Serif, New York, serif' => 'MS Serif', 'フォントファミリー名' => 'フォントファミリー名', 'Arimo, Arial, sans-serif' => 'Arimo', 'Spinnaker, sans-serif' => 'Spinnaker', ); return $faces; }※上記の関数の配列内でしたら何処に追加しても大丈夫です。(アルファベット順になるようにしてみてください。)
※左側がCSSのフォント指定に使われる記述です。フォントファミリー名の他に、カンマで区切って複数指定できます。右側は選択肢として表示されます。
【「parallax」テーマの設定変更】
管理画面で「外観」→「Theme Options」→「Design」にアクセスして、「Typography」のセクションを確認してください。
「Typography Options」で選択したフォントがサイトの記事やメニューに、「Font Family for headings」で選択したフォントが記事タイトル表示に利用されます。
※「外観」→「カスタマイズ」→「Typography」からも設定変更可能です。
【※ 注意事項 ※】
日本語環境以外にも対応させる場合は、フォントファミリー名を英語名で指定した方がいいと思います。
英語のフォントファミリー名は、フォント情報を表示するソフトで確認できると思います。
Windowsのフリーソフトでは、「フォントインストーラー SAKURA」でも確認可能でした。
「フォントインストーラー SAKURA」
http://www.vector.co.jp/soft/winnt/writing/se191710.html -
その他の回答
-
kaji0245
webフォントで設定したいと考えております。
macユーザーやwindowsユーザーでも丸ゴシックで表示されるようにしたいです。
またブラウザはie,safari,firefox,chromeで適用できれば助かります。
この質問へのコメント
質問の情報
- 登録日時
- 2014-12-23 23:50:39
- 終了日時
- 2014-12-25 12:38:14
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
不満なことを周りに当たり散らして会社で浮いた存在になるのと、辛抱して鬱病になるのは、どちらがマシで…
coccinellab
2
1
-
【今年の漢字】(2023年)を予想してみてください。 ※遠慮なく気軽にどうぞ。(^_^; ※参考URL http://www.ka…
rsc22
-
ビジネスで部下を指導されてる方や学校の先生、塾の先生などにご意見いただければ幸いです。 私はIT系の仕…
匿名質問者1
11
-
エアコンの専用ブレーカがたまに落ちます エアコン本体の過電流による原因ではない気がします。 エアコン…coccinellab1
-
iMacの作業中なぜか デスクトップにあるファイル（開いた外部ハードディスクのファイルも）が突然すべてが…
iquestion11
OSごとに標準フォントは異なります。
例えば、サンセリフ(Sans-serif)の場合、WinXPまでは「MS ゴシック」になりますが、WinVistaからは「メイリオ」が追加されています。
MacOSはWinとは違うフォントが標準フォントですし、こちらもバージョンによって異なると思います。(OSXになってからは変更は無いかもしれませんが・・・)
※「丸ゴシックを基本フォントで適用したい」との事ですが、具体的にどの部分を変更したいのか、どのように上手くいかなかったのかも提示しておくと回答がつきやすいと思います。
また、日本語表示で利用したい場合は和文フォントが必要ですが、Webフォントでの和文フォント利用は有料サービスの所が多いです。
どこかのサービスを契約済みでしょうか？
それともこれから探す必要がありますか？
・Webフォントサイトまとめ9選！とりあえず一度使ってみませんか？
http://liginc.co.jp/web/design/font/15639
eot等のweb上で運用するファイル形式で準備済です。