*

ページデフォルトのフォントファミリーをメイリオにカスタマイズ(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

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

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

記事を読む

no image

「Tweetable」でRTボタンを設置する(Tweetmeme Button)

ツイッターからのアクセス数とRTを表示するボタンを設置するの記事でRTボタンを設置しましたが、ブログ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

発リンクとSEO(YSTのTDP:トップダウンペナルティ)の関係

ホームページ(ウェブサイト)を作成すると、必ずどこか別の人のページにリンクを張る(発リンクをする)と

記事を読む

TWIT_CATCH

ホームページやブログに新ツイッターウィジェットを表示する-2012.10

 いつの間にかツイッター公式ウィジェットが仕様変更していたので、紹介です。  大きく変わった点は、

記事を読む

no image

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

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

記事を読む

no image

無料・オンラインでウェブページのキャプチャー画像を作成する

ウェブページのスクリーンショットが作成できるツールはいろいろありますが、オンラインで簡単にキャプチャ

記事を読む

no image

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

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

記事を読む

no image

WordPressの投稿を自動的にツイートするプラグイン「Tweetable」

思うところあって、弊社もツイッターアカウントを取得してみました。で、ブログの更新を自動的にツイッター

記事を読む

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 ↑