はてなブログ無料版で使える文字装飾(HTML編集)
こんばんは。残業続きで睡眠時間確保するのもやっとな師走ボラです。
辛うじて作れる寝る前の1時間を積み重ねてprogateのHTML・CSSコースを中級までクリアしました。
そこで学習した内容をブログで活用できないかな～と調べてみたのですが、
「 はてなブログでCSS編集できるのは有料版のみ」ということが発覚
がっくりきましたが更に調べるとどうやら
無料版のHTML編集のみでも本来CSSで規定するようなプロパティでの装飾ができるようなのでいろいろとと試してみます。
①文字に背景色を付ける
上の文で使っているように蛍光ペンを引いたような装飾になる書き方です。コード例は下の通り。
<span style="background-color: #f6bfbc;">無料版のHTML編集のみでも本来CSSで規定するようなプロパティでの装飾ができる</span>
要点を強調する際に良さそうです。
②文字色を変える
これは「見たまま編集」でも変更できますがHTMLでコード記入することで文字色を自由に変えられます。
<span style="color: #oooodd;">HTMLでコード記入することで文字色を自由に変えられます。</span>
③文字を線で囲む
引用する場合などによく使いそうな書き方。コード例もこの書き方に背景色を付けたものです。
<span style="border: 2px solid #88FFFF;">コード例もこの書き方に背景色を付けたものです。</span>
「border: 線の太さ 線のスタイル 線の色」で指定します。線のスタイルは下記の4種類です。
- 「solid」-実線
- 「dashed」-破線
- 「dotted」-点線
- 「double」-二重線
spanをdivに変えると下記のように行全体を囲います(ただし文中には埋め込めません)。
<div style="border: 2px solid #88FFFF;">spanをdivに変えた場合</div>
<div style="border-radius: 8px; border: 3px dashed #ff0000;">border-radius:8pxと角の半径を指定して丸めることもできます</div>
さらに、「border-bottom」、「border-left」のように線を引く方向を指定してすることもできます
<div style="border-bottom: 5px solid #008080;">下側に線を引く場合</div>
<div style="border-left: 5px solid #008080;">左側に線を引く場合</div>
④文字のサイズを変える
文字通り、フォントサイズの指定です。
<span style="font-size: 300%;">フォントサイズの</span><span style="font-size: 50%;">指定です</span>
基本設定では200% / 150% / 100% / 80%の指定のみなので自由に変えられるようになります。
④太字、アンダーライン、斜体、取り消し線
これは「見たまま編集」で設定できるものと変わらないので参考まで。
- 太字 <strong">太字</strong>
- アンダーライン<span style="text-decoration: underline;>アンダーライン</span>
- Italic <em">Italic</em>
- 取り消し線 <span style="text-decoration: line-through;>取り消し線</span>
⑤コードを書く際の注意事項
ここまでグレーのボックスでコード記入例を書いていますが、HTML編集画面でそのままコードを書いてしまうとそのコードの設定が反映されて余計な装飾が入ってしまいます。
①の背景色を例に取ると、
無料版のHTML編集のみでも本来CSSで規定するようなプロパティでの装飾ができる
このようにコードが設定する背景色が反映されてしまいます。
これを防ぐためにはコード中の「<」を「<」に、「>」を「>」に書き換える必要があります。
最後に
余白の指定方法など細かいところは他にもありますが、以上が無料版はてなブログのHTML編集でできる主な装飾方法かと思います。
コードを組み合わせたり、カラーコードを見やすい色に変えてみたりして自分なりの装飾方法を模索してみます。
<カラーコード参考リンク>
