Steemitでのブログの書き方[HTML方式]

Steemitでのブログの書き方[HTML方式]

こんにちは!前回はSteemitの登録方法を紹介しましたが、今回はSteemitでのブログの書き方を解説しようと思います。というのもSteemitのエディターですが、HTMLタグを用いたレイアウトとなっており、初心者の方には若干不親切で知識がないと使いにくい部分があるからです。ぜひ参考にしてください。

 

まずは右上の鉛筆マークをクリックしましょう!こちらがエディターになります。すると下のような画面に移ります。

 

 

こちらがエディターの画面になります。

タイトル
記事のタイトルを記載してください。初めての場合は自己紹介をするのがいいです。

本文
こちらは後ほど説明します。

タグ
タグは5つまで選択可能です。日本語で書く場合はJapaneseを入れましょう!日本人に見つけてもらいやすくなります。 タグは英語の小文字で基本入力します。

 

Steemitのエディターの使い方(HTML方式)

SteemitではHTML方式マークダウン方式の2種類の方式でブログを書くことができます。今回はHTML方式について説明いたします。

見出し

見出しはタグを使用します。<h1>が一番多きく、<h6>が一番小さくなります。

<h1>見出し</h1>

<h2>見出し</h2>

<h3>見出し</h3>

<h4>見出し</h4>

<h5>見出し</h5>

<h6>見出し</h6>

文字の装飾

よくつかうものとしては、太文字はボールドの<b>で囲います。また改行を入れたい場合は<br>。リンクを挿入したい場合は<a href=“リンク先URL(https://www〜)”>リンクを挿入</a>となります。これくらいは覚えておくと便利です。

<b>太文字</b>

<em>斜体(イタリック)</em>

改行<br>

<a href=“リンク先URL(https://www〜)”>リンクを挿入</a>

<del>削除済み</del>

<code>等幅テキスト</code>

<blockquote>引用符をつける</blockquote>

リストの作成

番号なしのリストの場合<ul>、番号ありのリストの場合<ol>を使用して作成いたします。

 

<ul>
<li>STEEM</li>
<li>STEEM POWER</li>
<li>STEEM DOLLARS</li>
</ul>

<ol>
<li>STEEM</li>
<li>STEEM POWER</li>
<li>STEEM DOLLARS</li>
</ol>

画像の挿入

画像はドラッグアンドドロップ、または下記画像の「選択してください」から選択画面に移ります。

罫線を入れる

罫線ですが文頭に- – -(ハイフン3つ)を入れることで下記のような薄い線が反映されます。


しかしちょっとこれだけだと使いづらいのでオリジナルで作成してみました。下記よりダウンロードしてご自由にご使用ください。

 

グラデーション・ライン

またでき次第追加していこうと思います。

表(テーブル)レイアウト

Steemitでは簡単な表を作成することも可能です。下記の例を参考にしてください。

<table>
 <tr>
  <th>タイトル 左</th>
  <th>タイトル 右</th>
 </tr>
 <tr>
  <td>1行目 左項目</td>
  <td>1行目 右項目</td>
 </tr>
 <tr>
  <td>2行目 左項目</td>
  <td>2行目 右項目</td>
 </tr>

左右に画像を配置するレイアウト

<div class=”pull-left”> Photo </div> サンプルテキスト

<div class=”pull-right”> Photo </div> サンプルテキスト

コードの書き方

<pre><code>SampleCode</code></pre>

いかがでしたでしょうか??ちょっとややこしいHTML方式のエディター。Steemitにはもう少しわかりやすいマークダウン方式のエディターや、busy・Partikoなどのサードパーティも充実していますので使い分けて、自分が一番使いやすいものを使ってくださいね!

Steemitカテゴリの最新記事