SIRIUS

SIRIUSカスタマイズ サイト全体のフォントにメイリオを追加する!

SIRIUSで作ったサイトにメイリオなどWindowsvista以降の
新フォントを適用する方法をご説明します。

この作業だけで、
SIRIUSを一気に見栄えの良いサイトへ変身させることが出来ますよ^^

dadsa

 

SIRIUSにメイリオフォントを追加する方法

SIRIUSは、ある程度古いブラウザーやXP以前のパソコンで
対応するように旧フォントでサイトが作成されるように設定されています。

ただWindowsvista以降に搭載された「メイリオ」のフォントですが、
非常に文字が見やすく、変更するだけでサイト全体のレベルを上げてくれます。

そこでSIRIUSにこの旧互換フォントを残しつつ、
vista以降の新フォント「メイリオ」を追加する方法をご紹介します。

それでは、方法をご説明します。

SIRIUSを起動させて、「編集」タブをクリックして、
上部パネルから「スタイルシート」をクリックします。

ab00004301

これでSIRIUSのスタイルシートが、表示されますので、
下記のソースを3箇所に挿入します。

font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif!important;

 

変更1箇所目

変更1箇所目(約8~22行目部分)

この部分のソースから1行追加してください。
下記のようになります。

/* 基本スタイル */

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
<% backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
<% bodyFontSize %>
}

この部分のソースから1行追加してください。
下記のようになります。

/* 基本スタイル */

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif!important;
<% backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
<% bodyFontSize %>
}

変更2箇所目

次に31~34行目を確認します。

h1, h2, h3, h4, .title ,.menutitle{
font-family: ‘HGP創英角ゴシックUB’, ‘Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W6’, sans-serif;
font-weight:normal;
}

この部分のfont-family:を書き換えます。

h1, h2, h3, h4, .title ,.menutitle{
font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif!important;
font-weight:normal;
}

 

作業工程は以上です。
すべて保存して、プレビューで確認してみてください。
Windowsvista以降のパソコンをお持ちの方は、
メイリオフォントが適用されていると思います^^

 

以上

SIRIUSカスタマイズ サイト全体のフォントにメイリオを追加する!
でした。

 

SIRIUSについてさらに詳しいレビューはこちらです。

↓↓SIRIUSのご購入、申し込みはこちらです↓↓

SIRIUS(シリウス)徹底レビューと豪華特典案内

マメボーwの無料メルマガ購読のご案内

ブ、ブログじゃとても言え無い・・・ マメボーwの稼ぐ裏話をご紹介します。

私自身が壮絶な遠回りと多くの失敗の末に、
現在では、安定して月収100万円以上を稼げるようになったのか?
その戦略的思考を包み隠さず、あなたにお伝えしていきます。

氏名(H.N可)  姓:名:
メールアドレス 
確認用メールアドレス 

あわせてに読みたい関連記事

タグ


トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ