サイトの読みやすさに直結するフォント変更に苦戦

私はこれまでワードプレスなどのブログではないHTMLサイトを作成する場合フォントにはこだわらなかったためデフォルトの「MSPゴシック」というフォントをずっと使ってきました。

しかしそもそもMSPゴシックは見た目的に優れたものではなく、近年はWindowsなら「メイリオ」、Macなら「ヒラギノ角ゴシック」あたりが一般的になり、他サイトと見比べた時何ともいえない古臭さを感じるようになってきたのでいくつかのサイトでフォントを変える作業を行っています。

しかしこの作業、フォントを変えるだけならCSSに1行記述するだけで終わるためものの1分もかかりませんが、それだけでは終わらず色々な苦労、面倒が付きまといます。

フォントを変えるだけなら簡単

サイト全体のフォントを変えるだけならやることは非常に簡単です。

font-family:”ヒラギノ角ゴ Pro W3″,”メイリオ”,sans-serif;

CSSのbodyあたりの上の1行を突っ込めばWindowsではメイリオに、メイリオがないMacではヒラギノ角ゴシックになるのでこれで終了。

マジ超かんたん～。

これで…

これが…

こうなります。

あ～読みやすくなったし今っぽくなったね。めでたしめでたし。
…とはいかないの。

上の画像を見てもらっても分かると思いますが、最初のMSPゴシックに比べ下のメイリオは全体的に横幅が広がっており、本来3行だったものが4行になってしまっていることも確認できると思います。

そうなると今まで見やすさや見た目を考え改行後最低でも5文字くらいは出るように心がけていたものが、横幅が増えたことによって思わぬ改行が増え改行後「。」だけになってしまうという見苦しい状況が増えてしまったりします。

まあそこはアクセスの多いページを中心に文字の増減を行い調整するか、あえて過去の記事は無視して今後から気を付けるようにすればいいのですが、問題は文字の横幅が広がることによってレイアウトが崩れてしまう点。

上は左が変更前のMSPゴシック、右が変更後のメイリオの左メニューになりますが、行間を指定する「line-height」をいじっていないのに行間がかなり広がっているのが見て取れると思います。

それ自体はline-heightの調整やmargin、paddingの調整でどうにでもなるものの、問題は下の方にある「10日　トランプ勝利で悲喜」という文字が2行になってしまっている点。

基本的に私はメニューの文字を1つ1行に収めたいと考えているのでこれは由々しき問題で、今までMSPゴシックで横幅いっぱいまで使ったところは総じて2行になってしまっている。

さてどうするか。

MSPゴシックからメイリオに変更した場合横幅が広がってしまうのでレイアウト的に色々と問題が出てきます。

この対策としてまず考えられるのは次の3点。

横幅が広がることによって2行になってしまう問題のほとんどは1文字分だけオーバーしてしまうことによるものなので、文章を変え1文字減らせば1行に収まります。

メニュー部分はDreamweaverのテンプレート機能を使っているため変更は比較的簡単であるものの、それでも色々とチェックしたり文章を考え直すのは結構面倒。

このサイトのメニュは180pxと幅が狭く、常々「狭いな」と感じていたので今回はメニューの横幅を拡げる方向で考えています。今のサイト全体の幅は880pxであるため、これを900pxにしメニューを200pxにするのが現実的か。

本文内のみをメイリオにしメニューは今まで通りMSPゴシックを使うという手もありますが、統一感を考えればやめたほうがいいでしょう。

このサイトは2011年作成の古いものであるためメニューの横幅が狭く「幅を広げる」という選択肢がありますが、もとから横幅が広い場合は色々と面倒になってきます。

別のサイトでも同じくフォントの変更を行ったのですが、そのサイトはのメニュー幅は300px。さらに広げるわけにもいかず2行なってしまった部分は文章を見直して1行に直しました。

サイト作りに慣れている人であればこんな問題は出ないのでしょうが、これから本格的にアフィリエイトやサイト作成を始めようという人でHTMLサイトを作る人は気を付けるようにして下さい。

ワードプレスならデフォルトでメイリオっぽいから問題ないんだけどね～。