こちらの記事で、
当blogで初めて、「大きな文字」の表現をしたんですけど、フツーにWordPressの機能ではこの「大きな文字」を入力できません(入力をサポートするようなテーマはあるかもしれません)。
テーマ等を導入せずに、カンタンに「大きな文字」を入力する方法を紹介します。
HTMLとCSSによる「構造」と「見た目」の分離
「大きな文字」というのは文字の装飾にあたります。
ウェブサイト上の文章では、HTMLとCSSで「文の構造」と「見た目(装飾)」を分離するのが良いとされていてます。というか、そのためにCSSが(HTMLから切り離される形で)誕生したわけです。
なので、例えば、HTMLの中で<font color="red">赤い文字</font>というような書き方をして、赤い文字←とするのは、HTMLとCSSの使い方としてはよろしくない。文の構造を定義するはずのHTMLで見た目を定義しちゃってるので。
したがって、HTMLの文の構造として使えるタグ(<b>とか<strong>の強調や、<i>とか<em>の斜体)の「スタイルとして大きな文字になるような定義」を当てるのが本来なら正しかろう、と思うわけです。でもそうすると、強調や斜体すべてが「大きな文字」になっちゃって、使い勝手が悪い。あと、強調とか斜体は見た目だし、これをHTMLで記述できるのは分離できてない証拠では?というのはその通りです…。
ということで、パラグラフ(段落)全体にスタイルを当てるか、spanを使って文章の一部にスタイルを当てるか、の二通りが使い勝手が良いのでは、と思っています。
使用するスタイル
文字のサイズを指定するCSSのスタイルには、font-sizeプロパティを使用します。
font-size: 大きさの値
上記の大きさの値には、例えば2倍の文字の大きさにしたければ、2emと指定します。
emは文字のサイズの単位で、1文字分のサイズを1emとして計算してくれます。したがって、1文字分のサイズがピクセルでfont-size:16pxならば、2emとすればfont-size:32pxとして計算してくれる、ということになります。
適用例
<p>(パラグラフ)要素でスタイルを適用する
段落全体を大きな文字にする場合は<p style="font-size:2em;">大きな文字にしたい段落</p>のように記載します。
このように表現されます。
<span>要素でスタイルを適用する
文書の一部を大きな文字にする場合は、<span style="font-size:2em;">大きな文字にしたい文章の一部<span>のように記載します。
このように表現されます。
classのスタイルにする
毎回、style="font-size:2em;"って記載するのも、抽象化されていなくて、ちょっと残念な気がします。
ということで、下記のように<p>と<span>のclassのfont-sizeを指定すれば、少しは格好良いでしょうか。
p.large, span.large {
font-size: 2em;
}
上記をWordPressなら[外観]→[カスタマイズ]→[追加CSS]で、テーマ全体に適用するCSSに記載しておけば、<p class="large"></p>で
このように表現されるし
<span class="large"></span>で、このように表現されます。
まとめ
本来、大きな文字で表現するというのは、(WordPressの標準の文字装飾に無いように)文章の構造とは別物である、ということは上でも述べました。
しかし、文章力が弱く、凡人であるところ我々。たまにはインパクトを表現するために、大きな文字を使ってみても良いのでは?と思っています。
多用は厳禁ですけどね。
コメント