SharePoint 2010(Office 365)のフォントをメイリオ化する

SharePoint 2013 プレビューを見てつくづく感じるのは、やはりWeb UI の日本語表記はメイリオ系フォントの方がいい、という点です。SharePoint 2010 も、英語環境で見るとこれが案外、美しいのです。しかし日本語が混じると、どうしても見映えません。

あと、フォントサイズの問題も大きいですね。英語は日本語よりもシンプルなので、かなり小さなフォントでもきちんと視認できます。しかしそこに漢字が入ると、読みづらいことこの上ありません。

そこで、CSSを利用して、SharePoint 2010(Office 365 ですが)をメイリオ化してみました。といっても、難しいことはしていまえん。SharePoint 標準の CSS でフォルトが指定されている箇所を探して、それを下のように、片端から上書きしただけです。

BODY{
font-family: ‘Meiryo UI’,’Hiragino Kaku Gothic Pro’,”MS UI Gothic”, “MS PGothic”, “MS Pゴシック”, “MS Gothic”, “MS ゴシック”, Osaka, Tahoma;
}
.s4-titletable{
font-family: ‘メイリオ’,Meiryo,’Hiragino Kaku Gothic Pro’,”MS UI Gothic”, “MS PGothic”, “MS Pゴシック”, “MS Gothic”, “MS ゴシック”, Osaka, Tahoma;
}

もちろん、サーバー上の core.css を直接編集するのはリスクが大きいので(そもそも Office 365 では出来ませんし)、マスターページを編集して独自スタイルシートを読み込ませました。発行機能を有効化して、外部 CSS として設定しても良いと思います。

ご参考までに、ここにサンプル(実物)を置いておきます。
simplesso_style

とはいえ、これはあくまで自分で利用する目的で、目につく部分だけメイリオ化したものです。実用重視なので、あちこち未対応の部分がありますが、そこはご容赦を。本気でかかるともの凄い作業量になるので。

実際、デザイナーの方に聞くと、数百ヶ所、修正の必要があるそうです(汗)フォント指定を差し替えるだけなら、機械的にできるのですが、その後、行間隔やサイズ調整なども必要になるのでこれが大変。ちょっと想像するだけで眩暈がします。

まあ、ミもフタもないことを言えば、見映えという点では Windows 派の私ですら「やっぱりヒラギノ字体がいいなぁ」と思う訳ですけどね(苦笑)


これまでのコメント

  1. SharePoint三等兵 より:

    CSSファイルを読み込む際にマスターページを編集するとありますが、
    代替CSSで適用させる方が簡単かと思いますが、何かデメリットがあるのでしょうか?

  2. 中村 和彦 より:

    こんにちわ。
    代替えCSSは「発行機能」が有効化されていないと使えない、という制限があります。発行機能をアクティブにすると、そのほかのWebパーツや、機能が「使えてしまう」ため、環境によっては有効化したくない場合があります。
    それ以外のデメリットは、おそらくありません。

login

Author

中村 和彦(シンプレッソ・コンサルティング株式会社 代表)が「ユーザ視点の SharePoint 情報」を発信します。元大手製造業 SharePoint 運用担当。現SharePoint コンサルタント。お仕事のお問い合わせはこちらまでお願いします。当ブログにおける発信内容は個人に帰属し所属組織の公式発信/見解ではありません。
FB : 中村 和彦
blog: Be・Better!
MS MVP SharePoint 2009/10-2011/9
MS MVP Office 365 2012/10-2014/9