css で font-family を指定して文章の1部を明朝体に変えます(ヒラギノ明朝 Pro W6)

 久しぶりに CSS デザインのコーナーです。
 ほとんどのブログやサイトでは CSS の font-family を「ヒラギノ角ゴ Pro W3」あるいは「MS Pゴシック」などのいわゆる ゴシック体 で指定していると思います。というのは、明朝体 は文字サイズが小さいと ......

こばとちゃん

と、こんなふうになって、「ん? んんんー?」と首を何度も傾げてしまうほど細くて頼りない印象になってしまうのです。だからこのサイトも基本的にゴシック体で表示しています。
 

明朝体にしたいことだってあるのです

 ところが、ごく稀に 明朝体 でなければ困ることがあります。
 たとえば円周率を表すパイを表すギリシャ文字。
 「ヒラギノ角ゴ Pro W3」だと「 π 」のように表示されてしまいます。
「ん? 何この文字? アルファベットの n かな?」
と思うほど読みにくい字なんですねー。だから、それを部分的に明朝体で「 π 」と表示する方法をお話しましょー。
 

html だけで指定します

 html の <span> タグだけでも簡単に明朝体に変えられますよ。投稿画面で

<span style="font-family: 'ヒラギノ明朝 Pro W6';">π</span>

としてみましょー。Web では「 π 」と表示されます!
 

css で「ヒラギノ明朝 Pro W6 」を指定します

 でも上のやり方はちょっと野暮ったい感じですねー。できれば css を使ってすっきりさせたいところです。 WordPress を使っている人は「テーマの編集」画面を開いて(無料ブログでもたいていの場合 css ファイルを開けるはずです)、次のコードを書き込んでクラス名を指定しておきましょー。

.mc {font-family: 'ヒラギノ明朝 Pro W6';}

 たったこれだけねー。今度は投稿画面に戻って

<span class="mc">こばとちゃん</span>

と書いて保存してくださいな。すると Web では

こばとちゃん

となっているはずですよ。「.」を使ったクラス名は table タグでも p タグでも共通で使えるので、1度設定しておくと、あとがとっても楽なのねー。皆さんも css ファイルに「.」をたくさんコレクションしてくださいなー。それじゃ、またねー♪

スポンサードリンク
末尾大型広告
末尾大型広告

コメントをどうぞ

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)