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

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

投稿日:2019年10月21日 更新日:

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

Web365とは

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

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

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

斜体とはイタリック文字のことです。編集エディタ上ですと、「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担当者として月額サポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。






Web制作+Webマーケティングの個別講座開講中

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


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


どうぞWeb365の個別講座をご覧ください。

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

執筆者:

関連記事

【完全網羅】Word Pressの保守運用・セキュリティ59の対策一覧

Word Pressのセキュリティ対策の一覧と情報収集ソースを59ほどリストアップしました。自身のサイトのセキュリティ対策にご活用ください。   Web365とは Web365は、外部Web担当者とし …

【提案事例】運営リソースが割けない場合のECサイトの展開案

【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を開設したいけれど「運営リソースがほぼない」条件での展開案ついての提案事例を解説します。   Web365 …

【解説】WordPressサイトが自動更新でログインできないときの対応一例(WPとEC系プラグインの競合エラー)

WordPressサイトの各バージョンが自動更新され、気づいたらエラーでサイトが見れない、ログインできないときはありませか? 今回は、WordPressのバージョンアップによるエラー対応の方法について …

【完全網羅】WordPressの費用は?ホームページ作成運用の料金相場まとめ

【5分で読めます】 企業でコーポレートサイトとしてWordPressを採用する際、費用はいくらかかるのか?相場やサービス別など網羅的にまとめました。 この記事読了後は、 WordPressでの費用感が …

【事例】Webサイトの保守運用を外注依頼すると何をしてくれるのか?

Webサイトを制作業者に依頼し納品後に発生する「保守運用・セキュリティ」の業務。 あれは実際何をしてくれるのか。 Web365の場合で事例解説します。 Web365とは Web365は、外部Web担当 …

画像のサイズの変更、データ量の圧縮などあれこれできる便利サイトのご紹介

記事やサイトを作成する際に、画像のサイズの変更や、データ量を軽くするための圧縮などしたいときに簡単にできるサイトをご紹介します。サイズや圧縮以外にもあれこれできる便利サイトです。   この記 …

【1分コピペ】Word PressでJavaScriptのファイル読み込みさせるときの方法

Word PressでJavaScriptのファイルを読み込みさせたいときは制作改善しているとよくあります。その方法を解説します。 この記事でわかること【1分コピペ】Word PressでJavaSc …