【保存版】初心者〜中級者向け〈 HTML タグ 〉for Steemit(Japanese Ver.)

in jp-newbie •  last year  (edited)

こんにちは!

HTMLタグを用いたブログレイアウトの HowTo は既に多くの方が投稿されています。
私自身そのような投稿には度々お世話になっておりますが、そのほとんどが英語でしたので日本語の充実したタグ集を作りたいなと思いました。

タグを使うと投稿を書き上げるために必要な時間が少々割り増しになりますが、少しの使用でもとても読みやすくなります。
何か複雑な事柄を説明する投稿には可読性の向上を図るために必須なのではないかとも思っています。

初心者の方はもちろんのこと、投稿に慣れている方にもレイアウトの参考に役立てていただければと思います。

html_steemit.png


① テキスト用



文字の編集

                                                                     
Steemit の表示HTML タグ
太文字<b>太文字</b>
斜体(イタリック)<em>斜体(イタリック)</em>
太文字の斜体<b><em>斜体(イタリック)</em></b>
削除済み<del>削除済み</del>
等幅テキスト<code>等幅テキスト</code>
リンクを貼る<a href=“リンク先URL”>リンクを貼る</a>



※HTMLコードのサンプルなどを記述する場合の例                    
Steemit の表示HTML タグ
SampleCode
<pre><code>SampleCode</code></pre>



見出しのサイズ

                                                                     
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 タグ
番号なしリスト
  • Steemit
  • UpVote
  • SteemPower
<ul>
<li>Steemit</li>
<li>UpVote</li>
<li>SteemPower</li>
</ul>
番号付きリスト
  1. Steemit
  2. UpVote
  3. SteemPower
<ol>
<li>Steemit</li>
<li>UpVote</li>
<li>SteemPower</li>
</ol>



以上、文字の編集に使える HTML タグでした。
<sup> と <sub> は通常、記号などに用いるタグなのだと思いますが
使い方によっては通常テキストの約半分の大きさのテキストとして
使用することができますので便利です。



② レイアウト用



1. テーブル表示


Steemit の表示
                                       
1行目 左(項目名)1行目 右(項目名)
2行目 左(項目1)2行目 右(項目1)
3行目 左(項目2)3行目 右(項目2)
4行目 左(項目3)4行目 右(項目3)

HTML コード
<table>
 <tr>
  <th>1行目 左(項目名)</th>
  <th>1行目 右(項目名)</th>
 </tr>
 <tr>
  <td>2行目 左(項目1)</td>
  <td>2行目 右(項目1)</td>
 </tr>
 <tr>
  <td>3行目 左(項目2)</td>
  <td>3行目 右(項目2)</td>
 </tr>
 <tr>
  <td>4行目 左(項目3)</td>
  <td>4行目 右(項目3)</td>
 </tr>
</table>
※ <tr> から </tr> までがテーブルの1行です。必要に応じて行数を増減させてください。
※ <th> から </th> はヘッダーセルです。太字のヘッダーが不要の場合は行を削除します。



2. 右側コラム表示


2− 1. 右側にテキストコラムを表示する
Steemit の表示
□サンプルテキスト右側の文章
□サンプルテキスト左側の文章

HTMLコード
<div class="pull-right">
□サンプルテキスト右側の文章
</div>
□サンプルテキスト左側の文章



2− 2. 右側に画像コラムを表示する
Steemit の表示
□サンプルテキスト左側の文章

HTMLコード
<div class="pull-right">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□サンプルテキスト左側の文章



2− 3. 左側に画像、右側にテキストコラムを表示する
Steemit の表示
□サンプルテキスト右側の文章

HTMLコード
<div class="pull-left">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□サンプルテキスト右側の文章



以上、HTMLタグとコードのまとめでした!
コードをコピペして使ってみてください。


Markdown 集もありますので、参考にしてくださいね!

【保存版】初心者〜中級者向け〈マークダウン〉for Steemit(Japanese Ver.)



では〜!



Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

探してました!こういうの。
ありがとうございます!!

·
  ·  last year (edited)

リブログをありがとうございます😊
便利に活用していただけると嬉しいです。

参考になります!(´∀`)
どこまでタグが表示されるのか分からなかったのでこれは便利ですね(
´-`)

·
  ·  last year (edited)

リブログありがとうございます!

これで全てではないかもしれませんので見つかり次第追加させていただきますね。

これは助かります!
ありがとうございます^^

·

ありがとうございます!
手前味噌になってしまいますが、我ながら重宝しております!

  ·  last year (edited)

マークダウン版も作らせていただこうかと思っております。

@yo-yo さんリブログありがとうございます!

·

あ、あとでコメントしようと思って先にシェアしちゃいました。
活用させていただきます♡ ありがとうございますw
特に小さい文字にする方法はずっと気になってたんで助かりますmm

·
·

そうなんですよ。
HTML タグ集を作りたいとは思いつつなかなか手がつかずにいたのですが小さい文字にする方法が見つかったので、よいしょと腰が持ち上がりました w

·
·
·

(わたし)らっきー💗

これは保存版ですね!めっちゃ便利です!!!

·

リブログありがとうございます!
ちょっとした部分にでも、ぜひ活用してあげてくださいー。

@noteman Nice.......

·

Thank you !
I also want to post an English version.

@noteman great post!!!!!

·

Thank you !!!!!

はじめまして!
これは便利!!
ありがとうございます(^^)

·

ありがとうございます😊

返信が遅れてすみません〜!

部分的にでも、ぜひ活用してください。

参考になります。ありがとうございます。

·

ありがとうございます😊

投稿から2日もたってしまっていたのですね。
返信がなかなかできずすみません。

マークダウンには見た目だけにとどまらない実質的なメリットもありますのでいずれまたご紹介させていただきます。

Thanks for sharing! A link to your post was included in the Steem.center wiki article 投稿の書式設定のヒント. Thanks, ありがとう and good luck again!