人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

wordpressのparallaxテーマについて教えて下さい。丸ゴシックを基本フォントで適用したいのですがうまくいきません。
style.css内の記述方法等を教えていただければ助かります。

1419346239
●拡大する

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

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


1 ● rouge_2008
●100ポイント ベストアンサー

以下の手順で作業してみてください。

【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さんのコメント
CSS部分のみ作業しており、うまく反映できず悩んでおりましたが【「parallax」テーマを編集】が大変参考になりました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ