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

こんにちワ 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;
}
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 カラーコード一覧表 | 背景色や文字色の設定
青=#0000cd=blue
赤=#ff0000=red
緑=#006400=green
黄色=#ffff00=yellow
ピンク=#ff00ff=magenta
⇒HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
書体(フォント)
HGP創英角ポップ体
HG正楷書体-PRO
HG行書体
MS P明朝
MS Pゴシック
MS 明朝
HGP創英角ポップ体
HG正楷書体-PRO
HG行書体
MS P明朝
MS Pゴシック
MS 明朝
もう一つ例として、こんなものを・・
<font size="4" color="#000000" face="HG正楷書体-PRO">*HG正楷書体-PRO*</font>
*HG正楷書体-PRO*
何かの参考になると、うれしいのですが♪
☆ブィブィ ('-^*)/
※追記:お使いの端末の環境あるいはサイトの仕様によっては反映されない場合もありますので御了承ください。