コピペで即使える！はてなブログのレイアウトを向上させるHTML文章パーツ集
はてなブログでより見やすいブログを！
本日はてなブログの記事編集画面（PC版）がリューアルされ、より記事編集がしやすくなりました。
・・・が、「文章のレイアウト」に限って言うと、まだまだUIが充実していないことが正直なところです。多くの人（特にブログを初めて間もない方、初心者の方）は「見たまま」編集で行っているとは思いますが、これだけでは文章のレイアウトをキレイに整えにくくなっています（文章のセンタリング、表など）。そこで、今回ははてなブログの標準レイアウト編集に加え、「これさえコピペすれば使える」という文章パーツをまとめてみたいと思います。実際によく使うものだけに厳選しています。通常は文章のセンタリングなどといったレイアウト編集はHTML編集で行うのですが、HTMLに詳しくない人でもこれをコピペさえすればある程度使えるはずです。
使い方
- 使いたいパーツをコピーする
- 記事編集画面（PC版）の「見たまま」編集で使いたいところに貼り付ける（ペースト）
- 貼り付けた文章を編集し、自分の書きたい文章にする
- （任意）HTML編集に切り替え、該当箇所を少し変える（文字色など）
１．文章寄せ
中央寄せ
中央寄せ
右寄せ
右寄せ
左寄せ
左寄せ
注：一行分だけコピーしてもコピペ先に反映されないみたいなので、二行分コピーして一行分はコピペ先で消して下さい。
２．文字色
文字色１
文字色２
コピペ後、HTML編集で文字色[color]、背景色[background-color]をrgb指定すれば好きな色に変えられます。#rrggbbの16進数であり、fになるほど色が濃くなる(黒は000000、白はffffff)
３．箇条書き
箇条書き（点）
- 一段目
- 二段目
- 三段目
箇条書き（数字）
- 一段目
- 二段目
- 三段目
「見たまま」編集では箇条書きは一段しかできませんが、これで三段目まで使えるようになります。HTML編集で入れ子構造を増やしていくと、四段目、五段目もできます。
４．表
| 列１ | 列２ | 列３ | 列４ |
|---|---|---|---|
| 要素１ | 要素２ | 要素３ | 要素４ |
| 要素５ | 要素６ | 要素７ | 要素８ |
行列の行数、列数を変えたいとき
HTML編集の画面で、表の記述を見つけ、
項目（一行目）の場合：先頭の<tr>と</tr>の間に<th>列名</th>を追加・削除
要素（二行目以降）の場合：先頭以降の<tr>と</tr>の間に<td>要素名</td>を追加・削除
５．文字サイズ
80%
90%
100%
110%
120%
130%
140%
150%
160%
170%
180%
190%
200%
「見たまま」編集では 小（80%）標準（100%）、中（150%）、大（200%）からしか選べないので、80% - 200%までを載せています。また、HTML編集の画面で<span style="font-size: 〇〇%;">の〇〇を変えれば任意の大きさに変えることができます。
６．アンダーライン
アンダーライン
編集ボタンでも可能ですが、これを使うとアンダーラインの色を変えることができます。また、HTML編集の画面で<span style="border-bottom: solid 2px #rrggbb;">の#rrggbbを変えれば任意の色に変えることができます。
～終わりに～
これらの文章パーツを駆使することで、ブログのレイアウトは格段に見やすくなります。ぜひコピペして使ってみて、これを機にレイアウトを一段上のランクにアップさせてみてください。
ではでは。
↓この記事を気に入って頂けた方は以下でシェアして頂けると今後の励みにもなり幸いです。
