人類、聞いて〜！
はてなブログの編集ボタンでテーブルやコードの挿入がないの！！！
画像だけ見せられてもしらんがなという。
ちなみにはてなブログの入力補助ツールバーの機能一覧はこちらです。
そう、技術のアウトプットのためにはてなブログで記事を書いてみようと思ったのですが、そもそもMarkdownがわからないと技術ブログを書くスタート地点にも立てないんですよ。
Notionとかにはちゃんとコードのボタンはあったはずなんですけどね。Qittaには書く勇気がなかったのでまとめてません。
どうしてわざわざはてなブログを選んだのかはまた記事を別に書こうと思います。
で、これを機にちょっとだけ書き方をまとめてきました。
ちゃんとした活用例はMarkdownのGitHubやネットの海の中に腐るほど記事があると思うのでそちらをご覧ください。
記法一覧
| やること | Markdown & HTML | メモ |
|---|---|---|
| 改行 | 文章の後に[半角スペース]×2 |
はてなブログでは<br>でも改行できます |
| 太字 | **太字** |
前後に[半角スペース]か [改行]挿入 |
| 斜め | *italic type* _italic type_ |
前後に[半角スペース]か [改行]挿入 |
| 打ち消し | ~~打ち消し~~ |
前後に[半角スペース]か [改行]挿入 |
| リスト |
* 黒ぽちリスト
* テキスト
* テキスト
1. 番号つき
2. テキスト
3. テキスト
|
ハイフン-、プラス+、アスタリスク*の いずれかを先頭に記述します。 ネストはタブで表現します。 インデントを下げると また1から始まる |
| コード（長い） | ```ruby puts 'Hello' ``` |
はてなブログではruby:title.rbのようにコード内にファイル名を表示する機能が無いようです |
| コード（短） | `puts 'コードスパン'` |
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` は [半角スペース]で挟む |
| トグル （折りたたみ） |
<details> <summary>トグル文字</summary> ```rb puts 'ここは中身です' ``` </details> |
<details> <summary>[トグルに表示したい文字]</summary> [ここに空行が必要] ```[言語] [コードの中身] ``` |
| 引用 | > 引用されている > **中で太字だってできる** > > > 2回目の引用 |
引用の上下に[空行]が必要 |
| 区切り線 | * * * *** ***** - - - --------------- |
どれも一緒だから好きなのを選んでね |
| リンク | [Google](https://xxxx.com/ "Google") [Google](https://xxxx.com/) |
[リンクテキスト](URL "タイトル") 下はタイトルなし |
| リンク （複数貼る場合） |
[リンク名]: https://xxxx.com/ [リンク名] ←URLを一度定義すればこれだけで貼れる [表示テキストを変える場合はこちらに書く][リンク名] |
こちらではURLを括弧でくくらない。 |
| リンクカード | (空行) https://xxxx.com/ (空行) |
|
| 画像埋め込み |  |
  |
| チェックボックス | - [ ] チェックなし - [x] チェック済み |
|
| テーブル(Markdown) | | 左揃え | 右揃え | 中央揃え | |:------|------:|:-----:| | TH1 | TH2 | ----|---- | TD1 | TD3 | | TD2 | TD4 | |
コロンの位置が 左→左揃え 右→右揃え 左右両方→中央揃え |
| テーブル（HTML） | <table>
<caption>テーブルタイトル</caption>
<thead>
<tr>
<th>名前</th> <th>説明</th>
</tr>
</thead>
<tr>
<td>チンアナゴ</td> <td>白黒みずたま</td>
</tr>
<tr>
<td>ニシキアナゴ</td> <td>オレンジ</td>
</tr>
</table> |
|
| 見出し | # これはH1タグです ## これはH2タグです ### これはH3タグです #### これはH4タグです ##### これはH5タグです ###### これはH6タグです |
H1~H6まで はてなブログの場合、 ・h1→ブログタイトル ・h2→ブログのひとこと ・h3→大見出し ・h4→中見出し ・h5→小見出し SEO的には手動で h2をタイトルにしたほうが いいらしい ゴニョゴニョ |
最低限これ位知っていれば最低限技術ブログを書くスタート地点に立てているのではないでしょうか。
他にもあるとは思いますが、私的に使う機会があまりなさそうだったものは省いています。
詳しくは参考文献から調べてみてください！
ちなみに、はてなブログの場合はテーブル内のMarkdownは無効化されるのですが、HTMLタグは反映されてしまうので、 下記のサイトでわざわざ<や>を無効化する変換サイトを使用しています。 大変便利で重宝しております。
最後に、ちょっとした活用例だけ紹介します。
活用例
文章
チンアナゴはすごいという話（クリックして表示）
チンアナゴ•••彼らの独特な姿や仕草は、 心温まる愛らしさに満ちています。
彼らの細長くしなやかな体は、まるで 海の中で踊るリボンのよう に美しく、見ているだけで心が和みます。 彼らが海底を泳ぐ様子は、まるで エレガントなバレリーナの踊り のようであり、とても愛らしいです。
ChatGTPに書かせました。
コード
**<details><summary>チンアナゴはすごいという話（クリックして表示）</summary>** > チンアナゴ•••彼らの独特な姿や仕草は、 **心温まる愛らしさに満ちています。** > > 彼らの細長くしなやかな体は、まるで *海の中で踊るリボンのよう* に美しく、見ているだけで心が和みます。 > 彼らが海底を泳ぐ様子は、まるで ***エレガントなバレリーナの踊り*** のようであり、とても愛らしいです。 </details>
なにこれ
