Webページ(ブログ等)の特定の箇所だけ違う書体:フォントにするには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

ブログ記事欄の特定の箇所だけ違う書体:フォントにするには..

パソコン

こんにちワ o(^-^)o



※こちらのサイト様を参考にさせて頂きました。

アメブロでの文字フォントについて|アメブロをカスタマイズしよう!

フォント用タグ見本 | 小さい花のミクロの世界へ - 楽天ブログ

-----

このブログ、ほとんど「どうでもいいこと」ばかり書いておりますケッ!!なブログでありますが、それでもチョッとだけ役にたつことも書いたりしてます。たぶん。
でもって、以前記事内の一部の箇所の書体を行書にするHタグを御案内した事があります。

ブログを書く編集画面HTML表示にして、行書にしたい箇所を以下のタグコードで囲ってやれば、その箇所を行書にする事が出来ます。

<font size="4"><font face="HG行書体">たまには行書体で書いてみるのも・・</font></font>

たまには行書体で書いてみるのも・・


-----

ところで、このブログではCSSで書体をメイリオにしてます。

こんなコードをCSSに記述をしている訳でありまして・・

/*書体をメイリオに!!*/
body{
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;
}


で、何を言いたいかと言いますと、記事欄の指定した箇所だけチョッと変わった書体に出来るのではないかという事であります^^;

やってみました。

ブログ記事欄の特定の箇所だけ違う書体:フォントにする方法

書体:フォント

で、まず、注意点ですが、フォント(書体)は、基本的には閲覧者のPCあるいはスマホ、携帯に入っているものと、中身が一致しなければ、指定した書体は、表示されないそうです。
閲覧者さんの環境によっては、指定したフォントは反映されず、明朝体かゴシック体で、表示されるそうで・・

結論から申し上げます←前置きがなげーよヾ(▼ヘ▼;)

ポイントはこちらです。

<font face="フォント:書体">~文章:言葉~</font>


書体の顔で文章を囲むと憶えておくと良いかと^^;

例えば、こんなHタグで文章を囲ってみます。

<font size="4" color="#ff00ff" face="HGP創英角ポップ体">HGP創英角ポップ体:ピンク</font>

これが、閲覧者さんには、このように表示されます(ブラウザ表示)。

HGP創英角ポップ体:ピンク

緑字の数字が文字の大きさです。数字を大きくすると、文字も大きくなります。
ピンク色の箇所がカラーコードです。
で、赤字の箇所が今回のキモ、 書体:フォントです。

こんなHタグを、お好みで何種類か作っておいて、御自身のパソコンのメモ帳か、あるいはアメブロなら「ブログを書く」の「編集画面」に「下書き保存」で保存しておくと、ブログ記事にちょっとしたアクセントを付けたい時に便利ではないかと思います。

※参考までに

主要なカラーコード

青=#0000cd=blue

赤=#ff0000=red

緑=#006400=green

黄色=#ffff00=yellow

ピンク=#ff00ff=magenta

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定



書体(フォント)

HGP創英角ポップ体

HG正楷書体-PRO

HG行書体

MS P明朝

MS Pゴシック

MS 明朝


もう一つ例として、こんなものを・・

<font size="4" color="#000000" face="HG正楷書体-PRO">*HG正楷書体-PRO*</font>

*HG正楷書体-PRO*


何かの参考になると、うれしいのですが♪

☆ブィブィ  ('-^*)/

※追記:お使いの端末の環境あるいはサイトの仕様によっては反映されない場合もありますので御了承ください。