WordPressでホームページを作るには

Web編集で文字が斜体にならないときの理由と2つの対応方法

投稿日:

Web編集で文字が斜体にならないときの理由と2つの対応方法です。斜体とはイタリック文字のことです。編集エディタ上ですと、「I」タグのボタンを押すスト斜体になるあの斜体のことです。サイトの作りでは、デフォルトで斜体は効かせることができますが、なかには、CSSなどで仕様をリセットしているサイトもあったりします。今回クライアントさんサイトでリセットされていたので、再度CSSで装飾を施したときに、それでも斜体にならない挙動が起きました。そのときの対応について解説します。

斜体にならない理由は大きく2つ

  1. CSSで設定していない(リセットしている)
  2. 設定しているフォントがそもそも斜体にならない

上記の2点が斜体にならない理由の主要因です。

斜体するための対応方法 CSS

斜体にするためには、CSS(サイトの装飾デザインを指示する言語)で設定します。

たとえば下記です。

em {
font-style: italic;
}

のようにemという斜体によく設定されるタグに対して、フォントスタイルを設定します。斜体はイタリックなので、フォントスタイルをイタリックにします。

適宜、斜体にしたい箇所に対してCSSを施すことで斜体にできます。

しかし、設定しているフォントによっては、斜体にならないものもあります。

メイリオ、など比較的よく使われるフォントは日本語は斜体になりません。

その場合の対応は次に説明します。

斜体するための対応方法 フォントを変える

サイトのデフォルトで設定したフォントには、斜体にならないものもあります。

たとえば、メイリオ、など比較的よく使われるフォントは日本語は斜体になりません。

その場合の対応は、斜体のときにはフォントを変更してしまうことが一つの方法です。

たとえば、下記のように、フォントファミリーを日本語でも斜体になるようなフォントを選んで設定をかけます。

em {
font-family: 'Hiragino Kaku Gothic ProN';
font-style: italic;
}

これにより、斜体にすることができます。

デフォルトのフォントとのデザイン性で悩むかもしれませんが、フォント一覧などでどれがしっくりくるか試しながら設定していきましょう。

下記サイトなどを参考にしてください。

総称ファミリ名分類のフォント名一覧

参考情報ですが、フォントを変更するのではなく、文字を斜めに変形させるという対応もあるにはあります。

しかし、1単語なら問題ないですが、複数行になると、おかしくなるので、あまりおすすめしません。

たとえば、下記参考サイトで試してくれた方がいます。

.em {
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
}





参考サイト:メイリオはCSSでイタリック(斜体)が効かない

1単語なら問題ないですが、複数行になると、おかしくなってますよね。これは段落のブロック自体に斜めに変形させる設定がかかっているためです。目的、やりたいことと違うので、今回に関してはこの方法はあまりおすすめしません。

以上です。

上記のように、サイトの細かい修正やカスタマイズ対応も承っておりますのでお気軽にご相談ください。

ご相談・お仕事の依頼について

【お気軽ご相談ください】

WEB制作・WEBマーケティングについてなど、気になる点があればお気軽にお問い合わせください。

【個別講座承ります】

貴社サイトの悩みや改善したい点など、こちらが教えながら一緒に改善するオーダーメイド個別講座も承っております。

【Web担当承ります】

貴社のWeb担当者としてもビジネス目的に合わせた形でサポートいたします。まずはお気軽にご相談ください。

-WordPressでホームページを作るには

執筆者:

関連記事

【初心者導入編】WordPressで会社企業のホームページを作るにはまとめ

会社企業でWordPressを使ってホームページを作成制作を検討してる方(初心者)に対しまして、導入編として、メリットデメリットと制作にあたる一連の流れを網羅的に解説しています。 WordPressで …

WordPressで「更新を失敗しました」と出たときの対応方法

WordPressの編集時に更新を押すと、「更新を失敗しました」と出たときの対応方法について解説します。 対応方法は検索すると色々出てきますが、主要な原因では、 WordPress新エディタ「Gute …

WordPressで特定カテゴリーのみ一覧から非表示にする方法

WordPressで特定カテゴリーのみ一覧から非表示にする方法を解説します。 クライアントさんのサイトで、記事の続編など似た記事が一覧にあると少しうるさくなっていたので、続編カテゴリーの記事は一覧から …

WordPressのテキストモードでタグボタンを追加する方法

Web担当業務でクライアントサイトに見出しや太字などのタグがリセットされていたのでCSSの設定した際に、エディタ上のテキストモードでタグボタンを追加する方法を解説します。   下記画像の青枠、見出しと …

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです。 クライアントさんの話を聞き書きし、記事化する業務をしています。 その際に、音声データを文字起こしする必 …

;