つくたろうのブログ

ポケモン色違い厳選や国立大学巡りが好きな大学生、つくたろうの気ままな雑記帳です。

【はてなブログ】Markdown記法でヘッダ無しの表を作る方法

www.tsukutarou.net
f:id:tsukutarou:20211130083241j:plain

こんにちは、つくたろうです。

はてなブログのMarkdownを使っていて、最近表を作る機会が増えました。

ヘッダーレスの表を作る局面もぼちぼち出てきたんですが、どうもはてなブログのMarkdownだと一筋縄じゃ行かないようなので、「はてなブログのMarkdownを使っているときにヘッダーレスのテーブルを実装する方法」を自分用にメモしておきたいと思います。

www.tsukutarou.net

やりたいこと

Markdownでテーブルを作るときに、通常は以下のように記述します。

| 見出し | 見出し |
| ---- | ---- |
| 中身 | 中身 |
| 中身 | 中身 |
見出し 見出し
中身 中身
中身 中身

ただしこの場合ヘッダー(見出し)の記述が必須となってしまいます。

ヘッダー部分をつけずに記述すると、

| 中身 | 中身 |
| 中身 | 中身 |

| 中身 | 中身 | | 中身 | 中身 |

↑のように、表が形成されません。

これを回避して、以下のように

中身 中身
中身 中身

見出しのない中身部分だけの表を作りたい。

www.tsukutarou.net

解決方法

身もふたもなくて申し訳ないのですが、「はてなブログのMarkdown記法で、Markdownだけでヘッダーなしの表を作るのは無理」です。

一行だけなら「ヘッダーそのものを表の中身部分にしてごまかす」ことができるんじゃないかなと思ったんですが、これもうまくいきませんでした。

|ヘッダーを|中身として|利用|
|---|---|---|
||||
ヘッダーを 中身として 利用

ということで考えつくのは以下の二つの方法があります。

・はてな記法で書く
・htmlで記述

はてな記法で書く

まず一応紹介しておきたいのですが、はてなブログでは「はてな記法で書くと簡単にヘッダーなしの表が作れる」という仕様があります。

書き方は以下のようになります。

|中身|中身|
|中身|中身|

この記事はMarkdown記法で書いているので以下の表はhtmlで再現したものですが、これと同じものが表示されます。

中身 中身
中身 中身

ただこれは普段からマークダウン記法で書いている人には使えませんよね。

もちろん表を使いたい記事だけはてな記法で書くとかはアリだと思います。

htmlで記述

結局これに尽きる。

htmlってとっつきづらそうなイメージがあるかもしれませんが、めちゃくちゃ簡単に作れます。

以下のコードをコピペして中身を適宜変えていただければ、簡単に任意の見出し無しの表が作れます。

 <table>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
 </table>

中身 中身
中身 中身

また、以下のように<tr>タグや<td>タグを増やしたり減らしたりすることで行や列の追加・削除も簡単です。

 <table>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
 </table>

中身 中身
中身 中身
中身 中身

 <table>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
      <td>中身</td>
    </tr>
 </table>

中身 中身 中身
中身 中身 中身

表の中身を太字や色付けも簡単

テーブル内の文字にも色付けやサイズ変更が可能です。

 <table>
    <tr>
      <td><b>中身</b></td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td><span style='color: #ff0000;'>中身</span></td>
    </tr>
 </table>

中身 中身
中身 中身

以前紹介↓したショートカットなどと組み合わせて、はてなブログのMarkdown記法でサクサクブログを書いていきましょう!
www.tsukutarou.net

おわりに

今回ははてなブログで 見出しのない表を
作るという 記事でした!
ここまで読んでくれて、ありがとうございました!

2021/12/01 つくたろう


大学生ランキング

www.tsukutarou.net
www.tsukutarou.net
www.tsukutarou.net