- 楽天
- Yahoo!
【楽天/Yahoo!】脱MSPゴシック！基本フォントを自由に変更するTips
こんにちは。ガーリックバターフランスパンが大好物のオガリアナカムラです。ガーリックバターオガリアフランスナカムラパンです。溶け合いたい。
今回は、ショップページの「基本フォント」を自由に変更する方法をご紹介しますよー！
ここで言う「基本フォント」とは、楽天市場/Yahoo!ショッピング側が自動で適用させているフォントの事。楽天市場は「指定なし(≒ MS Pゴシック)」、Yahoo!ショッピングは「メイリオ」が基本フォントになっていて、MS Pゴシックともなってしまうと、もう『ガジガジ』してます。
やだよぉ、もっとオシャレなフォントにしたいよぉ、という方はぜひお試しくださいませー。
フォントの指定方法
次のCSSをコピペしましょー！
「(ここにフォント種別を記述)」行は、後述のフォント毎の記述を挿入します。
CSS
<style type="text/css">
<!--
body {
font-family: (ここにフォント種別を記述);
}
-->
</style>
利用可能ページ
・楽天市場 ： RMS内
・楽天市場 ： 楽天GOLDページ
・Yahoo!ストア ： Yahoo!トリプルページ
(※Yahoo!ストアクリエイター内へは利用できません。)
貼り付け場所
・RMS：「ヘッダー」など全ページに適用される共通部分
・楽天GOLD/Yahoo!トリプルページ：<body>タグの直後など
ではフォントの種類もいくつかご紹介します！WindowsやMacに標準でインストールされている、今すぐ利用できるフォントです。
メイリオ
▼メイリオ用の記述
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
Windows Vistaより標準搭載され、webページでも一般的になったフォント。丸みを帯びた文字になりますが、MSPゴシックと比較し格段に文字が滑らかになり読みやすいです。(Yahoo!ストアの場合は、メイリオが初期フォントになっています。)
・Windows に対応
(macには標準搭載されていないため、mac PCでは自動でヒラギノ角ゴになります。)
ヒラギノ角ゴ
▼ヒラギノ角ゴ用の記述
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
くせのないやや広めのフトコロと、画線両端のアクセントにより、読みやすさと存在感を両立しています。明るくつぶれにくく、業界屈指の多彩なウエイト（太さ）バリエーションで、極小サイズのキャプションから特大サイズの見出しまで、幅広く対応します。
テレビCM・テロップ、道路標識・サイン、雑誌・書籍・ポスター、スマートフォン・タブレット端末など日常のあらゆるシーンで多数採用されている人気書体です。
(※転載元：http://www.screen-hiragino.jp/lineup/hirg/)
MacやiPhoneで標準搭載されているフォント。丸すぎず角すぎず、とにかく人当たり良いフォントです。見出しへ利用しても細かな説明文へ利用しても、とにかく可読性が高くお客様へ優しいフォントです。
・Macに対応
(Windowsには標準搭載されていないため、ヒラギノ角ゴがインストールされていないWindowsPCでは自動でメイリオになります。)
游ゴシック体
▼游ゴシック体用の記述
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
ややフトコロがせまい漢字と、伝統的なスタイルを持ったすこし小さな仮名の組み合わせが、このファミリーの大きな特徴です。
(※転載元：http://www.jiyu-kobo.co.jp/library/ygf/)
個人的には一番好きなフォント！遊びごころが出ますので、おしゃれなインテリア雑貨やキッズ向け商材と相性が良さそうです。ただし文字サイズが小さいと、可読性が低く多少読みづらいという懸念点も・・・。文字サイズは16px以上にすることをオススメします。
・Windows(8.1～) / Mac(OS X Mavericks～)に対応
フォントの種別を変えるだけで、ショップページ全体の雰囲気を一気に洗練させることができますよー！ぜひお試しくださいませ。
401 
