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

はてなブログの文字フォント変更方法について教えて下さい。
現在テンプレートEpicを使っていますが、Naturalの雰囲気が好きで、フォントだけ“Josefin Sans”へ変更したいのですが、方法が分かりません。
どなたかお詳しい方、教えていただけると嬉しいです。
どうぞよろしくお願いいたします。

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

▽最新の回答へ

1 ● rouge_2008
ベストアンサー

「Google Fonts」というWebフォントサービスの「Josefin Sans」フォントを利用して表示しています。

「Natural」テーマのCSSファイルの最初の方に次のような記述があります。

@import 'http://fonts.googleapis.com/css?family=Josefin+Sans:600';

上記をコピーして、「カスタマイズ」タブの「デザインCSS」の欄にペーストします。

/* <system section="theme" selected="xxxxx"> */
@import "/css/theme/xxxxx/xxxxx.css";
/* </system> */

/* ここ以降に追加 */

※選択したテーマのCSSファイルを読み込む記述よりも後に記述します。

さらにフォントを適用する為に次の記述を続けて追加します。

body {
 font-family: 'Josefin Sans', 'Gill Sans', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

※「Natural」テーマと同じ指定内容です。


※「Josefin Sans」は英字フォントですので、漢字・ひらがな・カタカナなどの日本語には適用されません。
日本語部分は利用しているPC環境によって、違うフォントが適用されて表示されます。(上記のように指定した場合は、「ヒラギノ角ゴ Pro W3」(※前出と同じフォントの英語表記「Hiragino Kaku Gothic Pro」、「メイリオ」(※前出と同じフォントの英語表記「 Meiryo」、「MS Pゴシック」(※前出と同じフォントの英語表記「MS PGothic」)の優先順で、インストールされているフォントが適用されます。
おそらくMac環境では「ヒラギノ角ゴ Pro W3」で、Windows Vista以降の環境では「メイリオ」で、Windows XP環境では「MS Pゴシック」で表示されると思います。)


leiaさんのコメント
rouge_2008様 ご丁寧にどうもありがとうございます! お陰さまで、フォント変更出来ました。日本語に対する解説も詳しくしていただき、なるほどと目が覚めるようでした。 とても分かりやすかったです! 本当にどうもありがとうございました。

rouge_2008さんのコメント
フォント変更が反映されたと思ったのですが、気になる事があって確認してみたら反映されませんでした。 フォントのCSSをインポートする記述は、「デザインCSS」欄の最初、またはテーマのCSSインポートより先に記述するようにしてください。(※フォント指定の変更など、通常のCSSを追加する箇所は変更ありません。) >|| /* フォントのCSSファイルをインポートする記述はここに追加 */ /* <system section="theme" selected="xxxxx"> */ /* または、フォントのCSSファイルをインポートする記述はここに追加 */ @import "/css/theme/xxxxx/xxxxx.css"; /* </system> */ /* CSSはここ以降に追加 */ ||< ※結果的に上記回答の内容には一部間違いがあります。 すみませんでした。こちらのコメントの内容が正しい物になります。 ※Googleフォントを複数使用したい時は、「@import ?」を複数記述します。(ブログタイトルとその他の場所で違うフォントを使いたい場合にどうぞ。ただし、あまりたくさん使うと読み込みが遅くなります。) >|| @import url(http://fonts.googleapis.com/css?family=Font1:400); @import url(http://fonts.googleapis.com/css?family=Font2:400); /* <system section="theme" selected="xxxxx"> */ @import "/css/theme/xxxxx/xxxxx.css"; /* </system> */ /* CSSはここ以降に追加 */ ||< ※Googleフォントでは「|」(パイプ)で区切る方法を示していますが、変更の保存時に自動変換が行われるらしく、パイプ以降は削除されるので使用できません。(1つ目に記述したフォントのみ有効になります。) ・Getting Started【Specifying font families and styles in a stylesheet URL】より抜粋 https://developers.google.com/fonts/docs/getting_started#Syntax >> To request multiple font families, separate the names with a pipe character (|). For example, to request the fonts Tangerine, Inconsolata, and Droid Sans: >|| http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans ||< Requesting multiple fonts allows you to use all of those fonts in your page. (But don't go overboard; most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load.) <<

leiaさんのコメント
ご丁寧に再度お調べいただいて、どうもありがとうございました! 微妙に変わったと思ったのですが錯覚だったのでしょうか(笑)、上記設定をし直しましたら劇的に変化しました!大満足です。 どうもありがとうございました!
関連質問

●質問をもっと探す●



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