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

投稿日：2019年10月21日更新日：2020年12月25日

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

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

今回は、WordPressでクライアントサイトを制作改善する際の提案・考え方の一部紹介です。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

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

この記事でわかること

斜体にならない理由は大きく２つ
斜体するための対応方法　CSS
斜体するための対応方法　フォントを変える
- Web制作+Webマーケティングの個別講座開講中
- 外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

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

CSSで設定していない（リセットしている）
設定しているフォントがそもそも斜体にならない

上記の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マーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております

・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方

どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。