ゼロから説明！はてな記法の使い方まとめ

はじめに

都合ではてなブログを使ったことのない人にはてな記法を覚えてもらう必要が出てきたので書きました。
はてな記法を使いたい人の手助けになりますように。

目次

はてな記法とは？

（ここだけ導入なので文体が丁寧です）
はてな記法と他の記法の比較などもしているので、記法を迷っている人は読んで損ないかも。

表示する

まずはてな記法ってなんだよって話ですよね。
はてな記法はブログを書く方法の一つです。
特に設定をしていなければ「見たまま記法」ってやつになっていて、太字とかにするとそれがそのまま記事執筆画面にも反映されると思います
一方はてな記法は全部をプレーンテキスト（装飾ないやつ）でやります。
太字だったら

<strong>太字</strong>

こんな感じで画面に表示されます。
なんかめんどくさそうですね。
でも、この記法を使うことで新しくできることがあります。
例えば、ここを開くためにさっき「表示する」ボタンを押したと思うんですが、あれは「見たまま記法」では実現できません（HTML使えばできるけど）。
他にも四角で内容を囲ったりとかもできるようになります。
要するにブログを見やすくすることができるというわけです。

上記のように色々なことができるものは「はてな記法」「Markdown方式」「見たまま記法（HTML使用）」の3種類あるんですが、それぞれメリットがあります。

• はてな記法
  • 3つの中で一番感覚が普通の文章を書くときに近いので、覚えるのが比較的簡単
  • 他の文章と近いので、他で使ったデータとかをコピペして使いまわせる
  • はてなブログ内でしか使えないので、他の実生活にあんまり活きない
  • はてなブログ内ではよく使われているので、やりたいことを検索すると割とパッと出てくる
• Markdown方式
  • 難しすぎず、でもいろんなところで使われている方式なので汎用性がある(大学のレポートをWordの代わりにこの方式で書くことで楽だぞ～みたいな記事とかがよく出回っています)
  • 改行に癖があったり、若干普通の文章とは感覚が違うので困るかも。HTMLほどではないし、はてな記法に似てるところもあるので結構簡単ではあります。
• HTML方式
  • 専用に勉強するようなやつなので、むずかしい
  • 難しいので、習得すれば仕事にできる(?)
  • はてなブログで一旦練習して、自分のサイトを立てたいみたいな野心があるならこれにすべき

下二つは僕もあんまり使ってないので正直わからないですが、大体こんなイメージです。
まぁ結局どれも若干記号を覚えることにはなります。
以上を読んで「はてな記法使おう！」となった人は以降も参考にしていただければと思います。

準備

「設定」→「基本設定」→「編集モード」
からはてな記法モードを選択して
一番下の変更を押す。
これではてな記法になります。

次に「記事を書く」を押して新しい記事を作る。

左上の編集のところにはてな記法と書いてあれば大丈夫。
「見たまま記法」とかになってる場合はたぶん赤字にしておいた「変更」ボタンを押せてない。

ここまで来ていたら大丈夫なので、以下に紹介するものを順番に自分の記事でも試してみてください。

上のツールバーについて

これ

目次

上のツールバーの↓これを押すと

[:contents]

という文字列が追加される。
この文字列だけで見出しを全部拾って載せてくれる。

太字

上のツールバーの下の方の１番左
文字列を選択してこのボタンを押すと

<strong>あいうえお</strong>

こんな感じで文字列に囲まれる。
この文字の内部だけ太字になる。

あいうえお
あいうえお

斜体

上のツールバーの下の方の左から２番目
文字列を選択してこのボタンを押すと

<em>あいうえお</em>

こんな感じで文字列に囲まれる。
この文字の内部だけ斜体になる。

あいうえお
あいうえお

打ち消し線

上のツールバーの下の方の左から３番目
文字列を選択してこのボタンを押すと

<s>あいうえお</s>

こんな感じで文字列に囲まれる。
この文字の内部だけ打ち消される。

あいうえお
あいうえお

アンダーライン

上のツールバーの下の方の右から３番目
文字列を選択してこのボタンを押すと

<u>あいうえお</u>

こんな感じで文字列に囲まれる。
この文字の内部だけ打ち消される。

あいうえお
あいうえお
（このブログではCSSで装飾いじってあるので蛍光色っぽくなってる、少し玄人向けなので最後に紹介）

文字の大きさ

上のツールバーの下の方の右から２番目
文字列を選択してこのボタンを押すと

<span style="font-size: 200%">あいうえお</span>
<span style="font-size: 180%">あいうえお</span>
<span style="font-size: 150%">あいうえお</span>
<span style="font-size: 80%">あいうえお</span>

こんな感じで文字列に囲まれる。
この文字の内部だけ大きさが変わる。
200%とか数字が書いてあるところの数字を書き換えると大きさ自由自在

あいうえお
あいうえお
あいうえお
あいうえお（これが等倍）
あいうえお

文字の色

上のツールバーの下の方の１番右
文字列を選択してこのボタンを押すと

<span style="color: #ff5252">あいうえお</span>
<span style="color: #2f4f4f">あいうえお</span>

こんな感じで文字列に囲まれる。
この文字の内部だけ大きさが変わる。
#ffffffとかなってるところを↓のサイトから取ってきたカラーコードに書き換えると色自在
www.colordic.org

あいうえお
あいうえお
あいうえお

画像

画像をドラッグ＆ドロップすれば自動で貼り付けてくれる。

[f:id:posalympic2021:20220219224914p:plain]
[f:id:posalympic2021:20220219224914p:plain:h200]

ドラッグ＆ドロップすると、怪文書が生成されるのでこれが画像になる。
基本的に上のものが追加されるが、これの末尾に「:h200」などを追加したのが下。
追加すると画像の表示する大きさを変えられる
h→heightのｈ、高さ
w→widthのw、横幅
数字は適当に雰囲気で合わせる。

URL

URLをコピー&ペーストすれば自動で貼り付けてくれる

[https://kurobasana.hatenadiary.jp/entry/kurosana_blogtechnique:title]
～～～
[https://kurobasana.hatenadiary.jp/entry/kurosana_blogtechnique:title=こちら]
～～～
[https://kurobasana.hatenadiary.jp/entry/kurosana_blogtechnique:embed:cite]

コピー&ペーストすると、怪文書が生成されるのでこれがURLになる
URLの後についてる[title]とかは重要
:title→タイトルが自動生成
:title=~~→その文でリンク生成

embed

cite→カードみたいなのが埋め込まれる

【基本から】使ったことのあるはてなブログ技術一覧【応用まで】 - ほうこうレポート
～～～
こちら
～～～
kurobasana.hatenadiary.jp

複合

<span style="color: #00cccc">この記事は<span style="font-size: 150%">ポサリンピック2021</span>の<strong><span style="font-size: 150%">2日目</span></strong>の企画について、詳細なレギュレーションなどをお伝えする記事です。</span>

この記事はポサリンピック2021の2日目の企画について、詳細なレギュレーションなどをお伝えする記事です。

続きを読む

これを押すと
（ ==== ）
　　↑これが出てくる
これの役割は

トップページで見たときにこの線より下を「続きを読む」にしてくれる機能
これがないとトップページ時点で全文が表示されて過去記事を遡りにくくなる

引用

これを押すと
（>><<）
　↑これが出てくる
これは引用っぽく四角を囲ってくれる

引用引用引用

はてな記法

箇条書き

文頭に「-」を付けるだけ。

-あいえうお
-かきくけこ
-さしすせそ
--あいうえお

↓比較用

• あいえうお
• かきくけこ
• さしすせそ
  • あいうえお

・あいうえお
・かきくけこ
・さしすせそ

番号付きリスト

文頭に「+」を付けるだけ。

+あいうえお
+かきくけこ
+さしすせそ
++あいうえお

1. あいうえお
2. かきくけこ
3. さしすせそ
   1. あいうえお

見出し

文頭に「*」を付けるだけ。
一個で大見出し、二個で中見出し、３個で小見出し。

*あいうえお
**あいうえお
***あいうえお

あいうえお

あいうえお

あいうえお

これ以外にも使用頻度は低いものの、はてな記法自体は色々あるので、↓こちらを参考にしてください。
help.hatenablog.com

もっといろんなことがしたい！

↓こちらをご覧ください
ここになくても、やりたいことを検索すると大体先駆者がやってくれてあるので真似できます。
kurobasana.hatenadiary.jp

抜粋

同じページの別の場所にジャンプ

後述。

あなたは今同じページ内をジャンプしました。

四角の枠で内容を囲う方法

こういうのとか、

見出しがあって

こういうのとか

参考
smatech.hatenablog.com

隠すボタン

表示する

表示内容

ただしこれを使うために色々仕込みをしなきゃいけないので、上のこちらをご覧ください参照です。

おわりに

とりあえず「見たまま記法」のまま記事を書く段階から卒業しましょう。
隠すボタンを使えたりなど、ブログをかっこよくいじれるようになります。

（見たまま記法のＨＴＭＬを使って書いてるよっていう人もいるのでそういう人たちはそのままでいてください）