1. 文字の装飾
今回は文字装飾の例(下線、影、書体変更)を紹介したいと思う。
2. 下線
下線を引く方法・比較
Markdown編集の場合、メニューのアンダーラインボタンからワンクリックでコードが挿入されて、対象文字の下線の装飾ができる。 （文字色は赤に設定した）
<span style="color: #ff0000"><u>はてな:Markdownの下線</u></span>
CSSでtext-decorationというオプションからunderlineを指定すると上と同様の下線を引くことができる。
<span style="text-decoration:underline;color:red;">はてな:text-decorationの下線</span>
はてな:text-decorationの下線
なお下線の場所が文字に近すぎて見づらいという点についてはtext-uderline-positionで位置を調整できる。
<span style="text-decoration:underline;text-underline-position:under;color:red;">はてな:text-decorationの下線</span>
はてな:text-decorationの下線
ただし、はてなキーワードとかぶると下線が引けないという問題がある。デザインCSSを使ってはてなキーワード無効にするという手もあるが、border-bottomを使って下線を引くと、
<span style="border-bottom:1px solid red;color:red;">はてな:border-bottomの下線</span>
はてな:border-bottomの下線
はてなキーワードよりも下側に線を引くことができる。線の位置は下のようにpadding-bottomで調整できるが、下側方向にしか調整できない。(負の間隔が無効のため)
<span style="border-bottom:1px solid red;color:red;padding-bottom:5px;">はてな:border-bottomの下線</span>
はてな:border-bottomの下線
好みの問題ではあるが、border-bottomの初期位置が間延びしているようであれば、例えば太字にすると印象が変わるかもしれない。
はてな:border-bottomの下線
下線のスタイル変更
下線のスタイルを変更したい場合は、CSSのtext-decorationまたはborder-bottomで指定できるスタイルを適用する。なおtext-decorationとborder-bottomでは指定できるスタイルは異なる。
text-decorationの破線(dash)の場合text-decoration: underline dashed;
はてな:text-decorationの下線
border-bottomの破線(dash)の場合border-bottom:dashed 1px red;color:red;
はてな:border-bottomの下線
text-decorationの二重線の場合text-decoration:underline double;
はてな:text-decorationの下線
border-bottomの二重線の場合border-bottom:double 2px red; 注:線幅が細い(ex.1px)と効果が見えない
はてな:border-bottomの下線
波線の場合text-decoration:underline wavy;(border-bottomのスタイルにはない)
はてな:text-decorationの下線
3. 影付き文字
次に文字に影をつける場合はtext-shadowを用いる。text-shadow:3px 3px 2px skyblue;color:blueとしてした場合、影をずらす水平方向(右)の距離、垂直方向(下)の距離、影をぼかす太さ、影の色の順で指定している。
実行例は<span style="text-shadow:3px 3px 2px skyblue;color:blue"><b>影付き文字</b></span>
影付き文字
なお水平、垂直方向に負の値を設定すると、影は左、上方向にずれる。
<span style="text-shadow:-3px -3px 2px skyblue;color:blue"><b>影付き文字</b></span>
影付き文字
影をずらさず、ぼかし距離だけを指定すると、文字の縁を装飾したような感じになる。
<span style="text-shadow:0px 0px 5px skyblue;color:blue"><b>影付き文字</b></span>
影付き文字
4. 書体の変更
文中で書体を変更するケースが少ないかもしれないが、上の装飾と合わせるとインパクトのある見出しが作れる。フォントを変更するにはfont-familyにより書体を指定する。特になにもしなければデフォルトの書体は、はてなのスタイルシートやデザインCSSで書体を指定していれば、その書体が適用される。例えば、本ブログはデザインCSSでMeiryoにしている。
ふぉんとの変更ABC
これをMSP明朝にするには"font-family:ＭＳ Ｐ明朝;"とする
<span style="font-family:ＭＳ Ｐ明朝;">ふぉんとの変更ABC</span>
ふぉんとの変更ABC
游ゴシックの場合はfont-family:游ゴシック;
ふぉんとの変更ABC
ところで、デザインCSSでGoogle Fontのこころ明朝をロードしているのでfont-family:Kokoro;によりこころ明朝を使用できる
ふぉんとの変更ABC
こころ明朝は仮名のみの適用なので、半角英数字の書体変更を追加するにはfont-family:Kokoro,fantasy;
ふぉんとの変更ABC
今回紹介した方法を全部適用すると
<span style="font-family:Kokoro,fantasy;font-size:24px;text-decoration:underline wavy;text-underline-position:under;text-shadow:3px 3px 2px skyblue;color:blue"><b>ふぉんとの変更ABC</b></span>
ふぉんとの変更ABC
文字の装飾のみで比較的インパクトのある見出しが作れる。
