【はてなブログ】記事を書く(装飾編)

記事の編集と投稿方法について、綴っておきます。
これらの機能を使いこなせると、一味違う記事になるかもしれません！

記事の書き方については、はてな公式でも解説しています。参考にどうぞ。

参考

hatenablog.com

編集モードについて

はてなブログでは、 いくつか編集モードを選ぶことができます。
簡単に記事を書いたり、少し高度に設定して記事を書くこともできます。

なお、この 編集モードは一度記事を書き始めると途中での変更はできません (別の記事を書くときは変更できます)。
編集した記事がどのように表示されるかは、編集モード隣の「プレビュー」から確認できます。

用語

HTML

Hyper Text Markup Languageの略で、ウェブサイトを記述する際のプログラミング言語です。
このようにタグで囲むことで記述していきます。画像やリンクを貼り付けることもできます。

<p>こんにちは</p>

見たままモード

Microsoft Wordで書いているような操作性 でブログを書くことができます。
文字を大きくしたり斜体にするのも簡単で、様子を見ながら直感的に書くことができます。
初めのうちは「見たままモード」で良いでしょう。私も最初は使ってました。
このモードは、同時に「HTML」でも書くことができます。
「見たまま」で書いた内容は、「HTML」に自動で反映されます。逆も然りです。
ただし、HTMLで書いた内容は自動で補正が入ってしまうため、期待したような動作にならない可能性があります。
以下の「はてな記法モード」「Markdownモード」「HTMLモード」を利用すると回避できるかもしれません。

はてな記法モード

はてなが独自で用意しているモードで、HTMLを書くよりも比較的簡単 に書くことができるようです。
...慣れていないので私は使ってませんがｗ
はてなブログの前身である「はてなダイアリー」を利用していた方は馴染みがあるかもしれません。
HTMLも利用できるそうで、はてな記法にない文字の装飾はHTMLになるみたいです。
見たままモードのHTMLのように自動修正されないので、のびのびデザインできます。

Markdownモード

以上で紹介した「はてな記法モード」よりも一般的に利用されている言語のモードです。
具体的に言えば、 GitHubやTumblrで利用されている言語 です。
HTMLよりも手軽に記述することができ、もちろんHTMLでも書くことができます。
私は、このモードでゴリ押しでHTMLを書いてますｗ(勉強のためです)
同じく、見たままモードのHTMLのように自動修正されないので、のびのびデザインできます。
が、一部利用できないHTMLタグ(例えばStyleタグ)もあるようです。
Styleタグに関しては、回避する方法があります。
今後、記事にする予定です。少々お待ちを

HTMLモード(はてなブログPro限定)

はてなブログPro限定で純粋なHTMLで記述 できます。
自動修正が行われないため、自分の思うままにデザインできます。
一部Markdownモードで利用できないHTMLタグも、利用できると思われます。
私自身、Proには入会していないので検証できないです...。ごめんなさい

ブログのタイトルを設定する

検索されたりする時にも、 記事の看板 として表示されます。
よく考えてつけると、読まれやすくなるかも？
(私はだいぶ適当ですｗ)

本文の装飾

本文に装飾ができる簡易ツールです。アイコンにマウスを乗せると、機能名が表示されます。
できることは、以下です。なお、デザインはテーマによって変わります。

• 見出しの挿入
  見出しをつけて、 文書を構造的に書くことができます。
  文書を構造的に書くと、見やすいだけでなく 目次などにも反映 され、機械にも優しい文書となります。

  



• 箇条書き
  箇条書きで書くことができます。
  私はあまり使ってませんｗ

  



• 番号付きリスト
  番号の付いたリストを挿入できます。
  こちらも私はあまり使ってませんｗ


• リンク
  リンクを挿入できます。
  コピーしたリンクを直接貼り付けても、同じメニューが表示されるのであまり利用しないかもです。
  URLを直接本文に貼り付けても、ほぼ同じメニューが表示されます が、
  本文の文字を選択してから「リンク」を使って「プレビュー」→「選択範囲」を選ぶと、
  その文字がリンクになります(aタグ)。
  ホーム　←こんな感じです。

  



• 続きを読む
  ブログのホーム等で [続きを読む]というボタンを表示して、それ以下の内容を表示しない ようにします。
  記事の内部に入ると、[続きを読む]ボタンは表示されずに全ての内容を表示します。
  

  



• 引用
  引用した内容について、明示的に表示することができます。
  


• 目次
  目次を挿入することができます。 目次は「見出し」に応じて自動的に振られます。
  少し高度な話をすれば、見出しはhタグで構成されているので、hタグで指定した場合も目次に表示されます。
  

  



• 脚注
  脚注を挿入できます。ページの一番最後に説明を加えることができます。


• その他文字の装飾(ツールバー)
  B(ボールド) ... 文字を太くします。
  i(イタリック) ... 文字を斜めにできます。
  T(打消) ... 文字の中央に線を引き打ち消します。内容自体は消えません。
  U(アンダーライン) ... 下に線を引きます。
  文字の大きさ ... 文字の大きさを4つの型から変更できます。
  文字色 ... パレットから文字の色を選択し、変更できます。
  

おわりに

これらの機能をある程度使いこなせれば、華やかなブログが書けると思います。
最後に「公開する」をクリックすることで、記事を公開 することができます。
次は、写真の挿入や記事を書く上で便利な機能を紹介しようと思います。

• 記事を書く(機能編)
• 
• 公開設定を変更する