こんにちは！
HTMLタグを用いたブログレイアウトの HowTo は既に多くの方が投稿されています。
私自身そのような投稿には度々お世話になっておりますが、そのほとんどが英語でしたので日本語の充実したタグ集を作りたいなと思いました。
タグを使うと投稿を書き上げるために必要な時間が少々割り増しになりますが、少しの使用でもとても読みやすくなります。
何か複雑な事柄を説明する投稿には可読性の向上を図るために必須なのではないかとも思っています。
初心者の方はもちろんのこと、投稿に慣れている方にもレイアウトの参考に役立てていただければと思います。
① テキスト用
文字の編集
| Steemit の表示 | HTML タグ |
|---|---|
| 太文字 | <b>太文字</b> |
| 斜体（イタリック） | <em>斜体（イタリック）</em> |
| 太文字の斜体 | <b><em>斜体（イタリック）</em></b> |
| <del>削除済み</del> | |
等幅テキスト |
<code>等幅テキスト</code> |
| リンクを貼る | <a href=“リンク先URL”>リンクを貼る</a> |
※HTMLコードのサンプルなどを記述する場合の例
| Steemit の表示 | HTML タグ |
|---|---|
|
|
見出しのサイズ
| Steemit の表示 | HTML タグ |
|---|---|
header1 |
<h1>header1</h1> |
header2 |
<h2>header2</h2> |
header3 |
<h3>header3</h3> |
header4 |
<h4>header4</h4> |
header5 |
<h5>header5</h5> |
header6 |
<h6>header6</h6> |
上付き／下付き文字（小さい文字）
| Steemit の表示 | HTML タグ |
|---|---|
| 上付き文字上付き文字上付き文字 | 上付き文字<sup>上付き文字</sup>上付き文字 |
| 下付き文字下付き文字下付き文字 | 下付き文字<sub>下付き文字</sub>下付き文字 |
行の編集
| スタイル | Steemit の表示 | HTML タグ |
|---|---|---|
| 改行 | 任意の位置で 改行する。 |
任意の位置で<br>改行する。 |
| 中央揃え | --中央に揃える-- |
<center>中央に揃える</center> |
| 引用符 | 引用符をつける |
<blockquote>引用符をつける</blockquote> |
リスト表示
| スタイル | Steemit の表示 | HTML タグ |
|---|---|---|
| 番号なしリスト |
|
<ul> <li>Steemit</li> <li>UpVote</li> <li>SteemPower</li> </ul> |
| 番号付きリスト |
|
<ol> <li>Steemit</li> <li>UpVote</li> <li>SteemPower</li> </ol> |
<sup> と <sub> は通常、記号などに用いるタグなのだと思いますが
使い方によっては通常テキストの約半分の大きさのテキストとして
使用することができますので便利です。
② レイアウト用
１. テーブル表示
Steemit の表示
| １行目 左（項目名） | １行目 右（項目名） |
|---|---|
| ２行目 左（項目1） | ２行目 右（項目1） |
| ３行目 左（項目2） | ３行目 右（項目2） |
| ４行目 左（項目3） | ４行目 右（項目3） |
HTML コード
<table>
<tr>
<th>１行目 左（項目名）</th>
<th>１行目 右（項目名）</th>
</tr>
<tr>
<td>２行目 左（項目1）</td>
<td>２行目 右（項目1）</td>
</tr>
<tr>
<td>３行目 左（項目2）</td>
<td>３行目 右（項目2）</td>
</tr>
<tr>
<td>４行目 左（項目3）</td>
<td>４行目 右（項目3）</td>
</tr>
</table>
※ <th> から </th> はヘッダーセルです。太字のヘッダーが不要の場合は行を削除します。
２. 右側コラム表示
２− 1. 右側にテキストコラムを表示する
Steemit の表示
□サンプルテキスト右側の文章
□サンプルテキスト左側の文章
HTMLコード
<div class="pull-right">
□サンプルテキスト右側の文章
</div>
□サンプルテキスト左側の文章２− 2. 右側に画像コラムを表示する
Steemit の表示
HTMLコード
<div class="pull-right">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□サンプルテキスト左側の文章２− 3. 左側に画像、右側にテキストコラムを表示する
Steemit の表示
HTMLコード
<div class="pull-left">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□サンプルテキスト右側の文章コードをコピペして使ってみてください。
Markdown 集もありますので、参考にしてくださいね！
【保存版】初心者〜中級者向け〈マークダウン〉for Steemit（Japanese Ver.）
では〜！