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でホームページを作るには

執筆者:

関連記事

インタビュー方法

【コピペ】特定テキストにマウスがhoverしたときに背面に文字を出すCSS

特定テキストにマウスがhoverしたときに、背面に関連の文字を出したいときってありませんか? 少しのCSSでサクッと対応できます。もちろんコピペできます。 特定テキストにマウスがhoverしたときに背 …

【note更新】自サイトの問合せを増やすためのサイトグロースマップの解説_簡易版

Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。 今回は、クライアントのサイト改善案を提案する際の資料の紹介です。 Web …

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

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

【コピペ】見積もりの簡易フォームを作成しましたので活用ください

ビジネスサイトで商材の見積もり計算機能がほしいと感じることはありませんか? クライアント事例で、Word Pressで、「見積計算機能」を作成しました。各項目と個数入力などで小計と合計を計算する仕様で …

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

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

【解説】EC機能内製化の検討例と7.27%のコストカット試算事例

クライアント事例として、自サイトでEC機能(eコマース、つまりオンラインショップ)内製したいときのリニューアル検討についての調査と意思決定についての流れを解説します。 Web365とは Web365は …

CF7 Google Sheets Connectorが転記できないときの対応方法

CF7 Google Sheets Connectorが転記できないときの対応方法

CF7 Google Sheets Connectorが転記できないときの対応方法です。 クライアントサイトで使用してるのですが、2020年2月で転記してくれなくなったので、対応した方法をまを解説しま …

;