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

執筆者:

関連記事

検索上位へのSEO対策、画像にテキストは出来るだけいれないようにしよう

SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。 今回は具体例と一般的な方法を解説 …

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

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

スマホページで最下部にお知らせなどを固定表示させる方法【コピペ対応】

­スマホでサイトを閲覧すると出てくる、最下部の案内を自サイトで表示させたいときの方法です。 クライアントサイトでのケース、WordPressのテーマOnepress使用の場合の方法を解説します。 We …

【簡単】WordPressで独自のショートコードを作成し、本文に挿入する方法

WordPressで独自のショートコードを作成し、本文に挿入する方法を解説します。お決まりの文章や、機能などは、ショートコードを書くだけで、ページに実装できると効率的です。ショートコードの作成方法と、 …

SEO対策の記事を無料ツールを使って4ステップでつくる方法

SEOを意識したサイト作りをする際に、ページや記事を作成する必要があります。Googleなどの無料ツールを活用しながらSEOに合った記事構成案までつくる方法を解説します。 ※メモ書きです。後日詳細を追 …

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

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

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

【5分で読めます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判断する7つのチ …