1419346239 wordpressのparallaxテーマについて教えて下さい。丸ゴシックを基本フォントで適用したいのですがうまくいきません。

style.css内の記述方法等を教えていただければ助かります。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/12/23 23:50:39
  • 終了:2014/12/25 12:38:14
id:kaji0245

webフォントで設定したいと考えております。
macユーザーやwindowsユーザーでも丸ゴシックで表示されるようにしたいです。
またブラウザはie,safari,firefox,chromeで適用できれば助かります。

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512014/12/25 08:51:13

ポイント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

id:kaji0245

CSS部分のみ作業しており、うまく反映できず悩んでおりましたが【「parallax」テーマを編集】が大変参考になりました。

2014/12/25 12:38:04

その他の回答(0件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512014/12/25 08:51:13ここでベストアンサー

ポイント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

id:kaji0245

CSS部分のみ作業しており、うまく反映できず悩んでおりましたが【「parallax」テーマを編集】が大変参考になりました。

2014/12/25 12:38:04
  • id:rouge_2008
    何の基本フォントでしょう?
    OSごとに標準フォントは異なります。
    例えば、サンセリフ(Sans-serif)の場合、WinXPまでは「MS ゴシック」になりますが、WinVistaからは「メイリオ」が追加されています。
    MacOSはWinとは違うフォントが標準フォントですし、こちらもバージョンによって異なると思います。(OSXになってからは変更は無いかもしれませんが・・・)

    ※「丸ゴシックを基本フォントで適用したい」との事ですが、具体的にどの部分を変更したいのか、どのように上手くいかなかったのかも提示しておくと回答がつきやすいと思います。
  • id:rouge_2008
    丸ゴシックといってもいろいろありますので、使用したいフォント名をあげてください。
    また、日本語表示で利用したい場合は和文フォントが必要ですが、Webフォントでの和文フォント利用は有料サービスの所が多いです。
    どこかのサービスを契約済みでしょうか?
    それともこれから探す必要がありますか?

    ・Webフォントサイトまとめ9選!とりあえず一度使ってみませんか?
    http://liginc.co.jp/web/design/font/15639
  • id:kaji0245
    丸ゴシックについては可能ならローカル内のフォントを活用したいと考えております。
    eot等のweb上で運用するファイル形式で準備済です。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません