あやおり子の不思議なランチタイム

あやおりこのランチタイムは、不思議なことがいっぱいあるよ。

斜字って使わないよね?それならデザインを変えてみようよ!

f:id:ayaoriko:20170922005208j:plain

こんにちはーあやおりこです。

ブログを書いていて気付いたんですけど、

f:id:ayaoriko:20170922005102j:plain

斜体って、普通使わないよね??

斜字を調べてみた。

改めて斜体ってなんだろう?って調べてみたら、wikipediaに載っていました。

斜体 - Wikipedia
欧文では、立体活字の文中の語句を強調・区別する目的で使用されている。欧米文での斜体の一般的な使用法としては下記のようなものがある。

  • 語句の強調
  • 書名、雑誌名、新聞名等の引用。ただし章・節の見出しやタイトルには立体が用いられる。
  • 船の名称
  • 外国語
  • 専門用語などを取り上げそれについて解説する時のその当該語句。
  • 生物の2名法(界>門>綱>目>科>属>種のうち属および種の表記)。
  • 物理量や数学の変数として用いられる記号。
  • 引用元のWebページアドレス。

wikiさんにも載っていますが、主に欧米文がメインで使われています。

太字と違って斜字は引用的な意味が強いらしい。

わたし的には英語のセンター模試を思い出しますw

読んでみても、「」(カッコ)や"“(ダブルダッシュ)で十分な気が・・・

wikiの続きを読んでいると、こんな一文が。

和文に斜体が用いられることは比較的稀である。

ほら!私みたいな日本語しか書かない人には無縁の文字なんだよ!!

Windows Vista 以降のマイクロソフト製 OS に標準で搭載されているメイリオでは、「欧文とは違い日本語には斜体を使う文化的背景がない」という理由から、日本語文字の斜体は用意されていない。

表示されない場合もあるのに、ブログなどのエディターでは、標準装備されているとは驚きです!

そう!!日本語にとって、斜体はあっても無くてもいい存在なんです。

でも、エディターに必ずあるので、斜体の利用方法について考えてみました。

斜体を解除する方法

※自分のデザインの影響が出ないように、表示結果はb(太字),i(斜字)をつかっておりません。ご了承ください。

斜字を解除するには、CSSを使います。

CSSは、webのデザインを変えるための道具です。

詳しい書き方は、検索してください・・・



さて、斜字を戻す方法ですが、斜字を示すiにCSSをあてるだけです!

i{
 font-style: nomal;
}

と入力すれば、

斜字

普通の形に戻ります。

もしこれでうまくいかなければ、"i"の前にdivを入れれば、表示されるかも。

でも、これだけでは、普通の文字と同じ見た目になって、使いづらいですよね・・・。

太字と組み合わせてみる

ここで、ちょっとアレンジしてみます。

よく使われている太字のデザインも変えることで、二種類の強調表現を使えます!

その方法は、太字を示すbと、斜字を示すiに、CSSを記入するだけです!!

色を変えてみる

b{
  font-weight: normal;
  color: red;
}


i{
  font-style: normal;
  color: blue;
}

太字は赤文字

斜字は青文字

文字の色を変えてみます。

いやいや、文字色を変えるならば、エディターに備わっているよ!と考えの方。

背景も変えることができます。

b{
  font-weight: normal;
  background-color: yellow;
}


i{
  font-style: normal;
  background-color: green;
  color: #fff;
}

太字は黄色の背景

斜字は緑の背景

緑に黒文字だと読みにくいので、白文字にしてみました。

Wordpressだと、隠れ機能としてエディターで背景指定ができるから必要ないって?

ブログでよく見かける、蛍光ペンも二本使えます!

b{
    font-weight: bold;
    background: linear-gradient(transparent 60%, #66ffff 60%);
}


i{
    font-style: bold;
  font-weight: bold;
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

太字は青い蛍光ペン

斜字は黄色い蛍光ペン

太字にすることで、より蛍光ペンらしく目立たせることができます。

【参考リンク先】
強調文字をちょっとおしゃれにするCSSデザインサンプル

大きさを変える

b{
  font-weight: normal;
  font-size: 20px;
}


i{
  font-style: normal;
  font-size: 10px ;
}

太字は大きい文字

これは普通の文字

斜字は黄色い文字

この使い方だと、補足などの弱く表現する使い方にも適応できますね!

ただ、この加減が難しいところ。

小さすぎても見にくいし、大きすぎて見出しと混同する可能性も。

フォントの種類にもよるので、調節する必要があります。

フォントを変えてみる

b{
  font-weight: normal;
  font-family: sans-serif;
}


i{
  font-style:nomal;
  font-family: serif;
}

太字はサンセリフ体

今使っている字体

斜字はセリフ体

フォントの違いを変えることにより、雰囲気がガラリと変わります

会話文などの、視点を変えた文章を打つ時に重宝しそうですね。

ただ、パソコンに入っているフォントがなければ、フォントは表示されません。

それを解決するのに、webフォントを使う方法があります。

brian.hatenablog.jp

太字と斜字を使うことで、ブログがより豊かになる

ここまで見てきて、斜字をデザインして、第二のペンとして使いたくなりましたか?

第二のペンを手に入れることで、ブログが見やすくなり、表現のバラエティが増えると思います。

皆さんも、より充実したブログ生活を!!