Web編集で文字が斜体にならないときの理由と２つの対応方法です。
Web365とは
Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。
今回は、WordPressでクライアントサイトを制作改善する際の提案・考え方の一部紹介です。
Web365について詳しく知りたい方は「Web365とは」ご覧ください。
斜体とはイタリック文字のことです。編集エディタ上ですと、「I」タグのボタンを押すスト斜体になるあの斜体のことです。サイトの作りでは、デフォルトで斜体は効かせることができますが、なかには、CSSなどで仕様をリセットしているサイトもあったりします。今回クライアントさんサイトでリセットされていたので、再度CSSで装飾を施したときに、それでも斜体にならない挙動が起きました。そのときの対応について解説します。
この記事でわかること
斜体にならない理由は大きく２つ
- 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で集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
