1. HOME
  2. ホームページ作成の小技
  3. ワードプレスのテキストエディターでスタイルシートを直書きして書体を明朝にしてみよう! [スタイルシートcss 初心者向け] ---…
TECHNIQUES

ホームページ作成の小技集

東京.のさくっとホームページ.制作のサイト.制作の小技

ワードプレスのテキストエディターでスタイルシートを直書きして書体を明朝にしてみよう! [スタイルシートcss 初心者向け] —東京|さくっとHP制作

東京のHP制作会社 さくっとホームページ制作

書体は、字が多くの割合を占めるホームページにおいてイメージを決める重要な原因の一つです。 ホームページは基本的にゴシック系の書体の利用が多いのですが、 「和風なデザインにしたい」「上品な雰囲気にしたい」「なんとなく、インパクトがない」 といった場合には、まずはタイトルの書体を明朝体にしてみると良いかもしれません。 スタイルシートを直書きして書体を明朝にする方法は、初心者でも簡単にできるので是非チャレンジしてみてください!

 

ワードプレスのテキストエディターでスタイルシートを直書きして書体を明朝にする方法

投稿または固定ページを開き、[テキスト]タブをクリックします。

[テキスト]タブをクリックします。

 

テキストエリアに下のコードをコピー&ペーストします。

<p style="font-family: 游明朝,'Yu Mincho',YuMincho,'Hiragino Mincho ProN','Hiragino Mincho Pro',HGS明朝E,メイリオ,Meiryo,serif;">明朝の文章が入ります</p>

font-familyは左の書体から優先して表示されるので 游明朝→ヒラギノ角ゴシックProN→ヒラギノ明朝ProN→→ヒラギノ明朝Pro→HGS明朝E→メイリオ→その他明朝体 というように設定になっています。

 

[明朝の文章が入ります]の箇所を任意のテキストに変えます。

 

入力画面はこんな感じです。

入力画面はこんな感じです。

 

実際の表示はこんな感じです。

明朝の文章が入ります

この文はゴシックです。