Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】フォントを変更する(例えば「メイリ…

【Seesaaブログ新デザインシステム】フォントを変更する(例えば「メイリオ」に変更)

Seesaaブログのフォントを変更する
■Seesaaブログのフォントを変更
■CSS(スタイルシート)で「body」タグを探す
■コードを入れ替えてフォントをメイリオに変更する  

Seesaaブログのフォントを変更します。


デフォルトの「シンプルA. ホワイト 右カラム」というテンプレートでは、フォントは「ヘルベチカ(Helvetica)」が基本となっているようですが、ちょっとシンプルすぎるかな?


というか、私はフォントでは「メイリオ」が好きなんです。だから自分のブログでは「メイリオ」を基本として使いたいのです。
この記事では、有無を言わさずSeesaaブログのフォントを「メイリオ」に変更します。



デフォルトのフォント
Seesaaブログのフォント


フォントを「メイリオ」に変更した後
Seesaaブログのフォントをメイリオに変更




CSS(スタイルシート)で「body」タグを探す


Seesaaブログの「管理画面>デザイン」を開き、「デザイン設定」をクリックします。
「シンプルA. ホワイト 右カラム」をクリックして「スタイルシート編集」タブを開きます。
「スタイルシート編集」に記述してあるコード(文字)の中から、「body」を探します。(デフォルトのテンプレートでは348行目あたりにあります)


Seesaaブログのスタイルシート編集画面


<元コード>
body {
color: #333;
vertical-align: baseline;
word-break: break-all;
font-size: 14px;
font-family: 'Helvetica Neue','Helvetica', 'Arial', '游ゴシック', YuGothic,'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', Meiryo, sans-serif;
line-height: 1.8;
letter-spacing: 0;
zoom: 1;
}


赤色にしている「font-family」が、フォントを指定するタグです。
これを「メイリオ」を基本にするように書き換えます。



フォントをメイリオにする


フォントを「メイリオ」基本にします。下記のコードを元々のコードのフォント部分(上記元コードの赤文字部分)と入れ替えます。
CSSの該当部分にコピペ(コピーして貼り付け)すればいいです。
最後に「保存」するのを忘れないでください。


<入れ替えるコード>
font-family: 'メイリオ', Meiryo,'Helvetica Neue','Helvetica', 'Arial', '游ゴシック', YuGothic,'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;


●元々のコードでも「メイリオ」は記述されていたので、それを最初に持ってきました。荒業です。
●たぶん本当は、こういう記述の仕方はダメなんじゃないかな?と思います。最初に指定するのは英語だとか書いてあるサイトを見たりしましたから。でも、コレでうまくいっているのだからいいんじゃないですか?(ヒドイw)



コード編集後のCSS(フォントの変更)


編集後のスタイルシート編集画面

/******* 全体の領域 *******/

body {
color: #333;
vertical-align: baseline;
word-break: break-all;
font-size: 14px;
font-family: 'メイリオ', Meiryo,'Helvetica Neue','Helvetica', 'Arial', '游ゴシック', YuGothic,'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
line-height: 1.8;
letter-spacing: 0;
zoom: 1;
background-image: url("背景画像用のURL"); /* 背景画像*/
background-repeat:repeat; /* 画像の繰り返し */
}




次の記事の紹介

次の記事ではSeesaaブログの「横幅の変更」と「背景色の変更」について説明します。


【Seesaaブログ新デザインシステム】ブログの横幅を変更し、ブログの背景色も変更する
以前書いた記事で、ブログの背景に画像を設定しました。背景画像の設定はけっこう簡単にできます。画像の設定は簡単にできるんですが、このままではブログの表示がおかしくなります。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。