*

ページデフォルトのフォントファミリーをメイリオにカスタマイズ(CSS)

公開日: : Wordpress, ウェブ制作 ,

WordPressのカスタマイズ備忘録です。今回はページ全体の基本font-family(フォントファミリー)をメイリオに設定してみました。

メイリオとは

メイリオ(Meiryo)とは和文ゴシック体フォントの一つである。メイリオはWindows Vista以降のマイクロソフト製OSに標準で搭載されておりWindows XP、Windows Server 2003までのMicrosoft Windowsにおいて利用されてきたMS UI Gothicに代わる新しいシステム用フォントとして提供されている。

http://ja.wikipedia.org/wiki/メイリオ

なぜメイリオに設定したか

メイリオでウェブページをつくると、レイアウトが崩れることがあるからです。行間の差異が大きく、コンテンツとコンテンツが重なってしまう現象が多いです。そして、FireFox等のブラウザではユーザー独自の表示フォントファミリーの設定が可能なので、作成側がメイリオ以外のフォントで設定しても無視されることがあるのです。逆に言うと、メイリオできちんと表示されていれば、ほかのフォントで表示設定されてもまあ何とか大丈夫、という、大は小を兼ねる(?)作戦って感じです。

wp.Vicuna Ext. Custom 1.5.9での設定

このブログはテーマに「wp.Vicuna Ext. Custom 1.5.9」を使用しています。このテーマフォルダ内の「style-vega」というフォルダ内に「core.css」というcssファイルがあります。この中の「body{ }」記述内に「font-family: “メイリオ”」云々を追記します。これで初期設定フォントはメイリオで表示されるようになりました。

サイト制作者はメイリオチェックを

ブログCMSにはあらかじめそういったレイアウト崩れを防止したプログラミングがされているかもしれないので、この作業は不要かもしれなかったのですが、念のため、というかメイリオが好きなんです(笑)。また、このブログは(今のところ)ほとんどがテキスト主体なので、ますますレイアウト崩れを気にする必要性は薄いのですが、画像満載、ブロック要素満載、CSSで緻密なレイアウトを施しているブログ・サイト運営者の方は、メイリオチェックは大事なので、メイリオ表示を試していない方は、一度確認してみるのもいいと思います。

横浜・神奈川県央でウェブサイト制作のご相談は「合同会社ハルクアップ」

関連記事

no image

ウェブ制作者から見たIE6(インターネットエクスプローラー)と他のブラウザの違い

2010年3月4日、アメリカコロラド州でIE6の葬儀イベントが行われた。米国のAten Desig

記事を読む

no image

ツイッターの「プロフィールウィジェット」の一部を再設定する

自分のサイトやブログにツイートを表示するツイッター公式ウィジェット「プロフィールウィジェット」ですが

記事を読む

no image

meta description重複(反映されない)解決の備忘録

当ブログのGoogle検索結果を見ていたら、どのページの結果にも同じmeta description

記事を読む

no image

WP Social Bookmarking Lightで「いいね」ボタンを設置してGoogle Analyticsを使っていたら必ずしたほうがいい設定

※10月11日修正追記  facebookのいいねボタンをサイトに設置し、Googleアナリティク

記事を読む

no image

FFFTP Ver.1.97aが公開されています(2010年2月10日)

某ウィルスによるFTPパスワード漏洩が問題になっていますが、超メジャー無料FTPソフト「FFFTP」

記事を読む

no image

メールフォーム入力途中でエラー画面に移動してしまうときの対処方法

 お問い合わせフォームやお申し込みフォーム入力の途中に、Enter(エンター)キーを押したら勝手に送

記事を読む

no image

【Tweetable】ブログ更新時の自動ツイートでタイトルが挿入されない不具合解決備忘録

WordPressのブログ新規投稿をツイッターへ自動でつぶやいてくれる「Tweetable」ですが、

記事を読む

no image

img alignで画像回り込み時のIEバグ備忘録

<img align="">で画像をテキストに回り込ませた際、CSSでvertical-

記事を読む

no image

記事の投稿時間を非表示にするカスタマイズ

Wordpressで記事を投稿(公開)すると、自動的に投稿日時が挿入されます。投稿年月日はいいのです

記事を読む

no image

ツイッターからのアクセス数とRTを表示するボタンを設置する

WordPressにツイッターからのアクセス数とRTを表示するボタンを設置する方法です。いろいろあ

記事を読む

Comment

  1. フォントを変更してみた - ひきこもり以上、ニート未満 より:

    [...] 【参考サイト様】 http://haruku-up.jp/blog/wp/meiry/ [...]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

postagestamp01
未使用の切手(貼付済み)を剥がさずに簡単に再利用する方法備忘録

 封筒に貼ってしまってある未使用切手を再利用する方法を郵便局で教わった

kindle_sort
Kindle の デフォルト配信先 の変更方法備忘録

コンテンツと端末の管理 端末タブ 端末名「編集」

itts
テープ起こしで知った言葉201501

今月のテープ起こし案件ではこんな言葉を知りました。ありがとうございまし

KIMG0297
日経ビジネス2014.12.01メモ

トヨタミライは補助金込みで約520万円。 企業交際費は199

itts
テープ起こしで知った言葉201412

今月のテープ起こし案件ではこんな言葉を知りました。ありがとうございまし

→もっと見る

PAGE TOP ↑