読者です 読者をやめる 読者になる 読者になる

無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

はてなブログを簡単カスタマイズ!⑨マーカー風の文字装飾編

ブログの技

f:id:kay72234:20160111145743j:plain

■はじめに

はてなブログで自分のブログを開設してから、いろいろカスタマイズをしてみました。実際に試してみたカスタマイズの手法は、記事として紹介してきました。


今回は、カスタマイズと呼ぶのはちょっと違うのかもしれませんが、本文中の文字にマーカー風の装飾を施す方法を紹介してみます。
HTMLを知っている人にとっては当たり前のことですが、逆にHTMLを知らなくても簡単に使ってみることができように説明できたら良いなと思います。

■文字の装飾に関して

はてなブログでは「入力補助ツールバー」を使って、簡単に文字の装飾を行うことができるようになっています。


太字斜体打ち消し下線の装飾については、入力補助ツールバーから簡単にHTMLのタグを挿入することができます。しかし、たまに見掛けるマーカー風の装飾は、入力補助ツールバーにはありません。
しかし、次の項で紹介するタグをコピペして使えば、案外簡単にできてしまいます。

■具体的な方法:タグの書き方

入力補助ツールバーでは、装飾の種類に対応するHTMLのタグを自動的に挿入してくれるので、その中に装飾したい文字を書いていきますよね。他の装飾の場合も同じで、自分でタグを書いてやれば良いというわけです。

マーカー風に装飾したい場合は、次のタグをコピペして、「装飾したい文字」の部分を好きに変えてみてください。

<span style="background-color: yellow;">装飾したい文字</span>

黄色のマーカーを引いたように見えましたか?実際には上記のタグによって、対象の文字部分の背景色に黄色を指定しているわけです。

■少しだけ応用

まずは色の指定方法です。先ほどの例では「yellow」と色の名前で指定しましたが、「#ffff00」という形でカラーコードで指定する方法もあります。カラーコードの一覧はいろいろなサイトで公開されています。その中の一つ、次のサイトなどを参考にしてみてください。


もう1つ、今度は次のタグをご覧ください。

<span style="background-color: yellow;"><b>装飾したい文字</b></span>

「装飾したい文字」の部分が、さらに「<b> </b>」で挟まれていますね。これは太字にするためのタグですので、こうすることで太字かつマーカーを引いたように表示されます。

■さいごに

注意すべき点としては、本当に強調したい箇所に絞って使用するようにしておきましょう。文字装飾も、乱用すると読み手にとっては目障りになりかねませんので。
さて、今回は本文中にタグを書くだけの方法でしたが、スタイルシートと組み合わせると、もう少し凝ったことができるようになります。こちらも、別の機会に紹介してみたいと思います。


スポンサーリンク