ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。
今回はフォントを変更してみます。
WindowsならMS Pゴシック、MacならOsakaというフォントが多いと思います。このままでよければとくに変える必要はありません。
ブログのタイトルだけ明朝体にしたい、とか太字で強調したい、逆に太字をやめたい、などの細かい指定をしていときにどこを変更すればいいかを見つける方法です。
ブログのページを表示させてその「ソースを表示」させます。
変えたい部分にどんなスタイルが指定されているかを見つけます。スタイルの指定は<div>などのタグにidやcalssの形で指定されていたり、htmlのタグそのものに指定されている場合があります。
ここではタイトルの指定を変更する例をやってみます。
このブログのタイトルのソースはこの部分です。
<h3 class="title"><a href="
http://***.***.ne.jp/article/***.html" class="title">その2:フォントを変える</a></h3>
<h3>にtitle
<a>にtitle
と2つの指定があるのがわかります。
スタイルシートから.titleの部分を探し出します。
.title{
font-family: "MS Pゴシック",Times New Roman,Osaka,Sans-serif;
font-weight:bolder;
text-align:left;
color:#666666;
margin:0px;
padding:5px 0px 5px 0px;
}
ここでMS PゴシックをMS UI Gothicに変更してみます。
font-family: MS UI Gothic,Times New RomanOsaka,Sans-serif;
のようになります。
フォントはWindowsでもMacでも最初から入っているものにしましょう。自分だけがインストールしたフォントを指定しても自分にしか見えません。また日本語のフォントは""で囲んでください。
フォントを指定しないと、ブラウザのデフォルトのフォントになります。Internet Explorerはゴシック、Mozilla系(NetscapeやFireFox,Safariなど)は明朝体になります。とくにMacでは Internet Explorerを使うことは少ないので、ゴシックで表示したいときにはOsakaの指定が必要ですので外さないでください。
文字を太くするのはfont-weightです。boldがいわゆる太字です。太字指定をしたくないときはnormalを指定します。<h1>などの見出し文字はデフォルトが太字ですので、太字を解除したいときはfont-weight:normalとします。
colorは文字の色ですので好きな色に変えることができます。
スタイルシートの指定はめんどうで難しいので、失敗したら元に戻すボタンがたいていついています。また、プレビュー機能があれば確認しながら変更していきましょう。