見出し画像
Photo by koge0koge

noteで実装不可のHTMLタグと理想の見出し構造

没有

noteを使ってみて、h2タグが置けない・箇条書きリストが使えない・tableタグが使えないなどなど意外に不便な非対応タグが多かったのでまとめました。2021年1月現在の記事見出し構造と、理想の見出し構造も。今後の機能拡充に超期待。

noteで実装してほしいマークアップ

フリーランスのメイヨーです。noteを使ってみて非対応のタグが意外とあることに驚いたので備忘録。

  • H3以外の見出しタグ　→追記）実装済み

  • 箇条書きリスト(ul > liタグ、ol > liタグ)　→追記）実装済み

  • 表(tableタグ)

  • 画像Altの任意編集　→追記）実装済み

  • markdown対応 できたらうれしい

リストタグが使えなくて推奨の方法がベタ書きなのは嘘でしょ…となった。引用じゃないのにblockquote、そしてbタグも内心ムズムズするけど置いておこ。
※本文のポイント（noteのはじめかた）より引用

<blockquote name="LmtZT">
<b>
・まず冒頭に「これは何か」を書こう<br>
・箇条書きで要点や目次作ろう<br>
・一つの記事で一つのテーマを扱おう<br>
・長い文章は分割しよう<br>
・こまめに段落をわけサブタイトルをつけよう<br>
・1500字を超えたら、記事の分割を検討しよう<br>
・文末にもまとめを作ろう<br>
・公開前に音読をしよう<br>
・愛や興味をそそぎこもう
</b>
</blockquote>

画像Altの任意編集はChromeアドオンを作成している方がいらっしゃるそう。（Twitterだって任意編集できるのだから）公式対応してくださるとうれしいな。

現在のnote記事見出しタグ構造

見出しタグについては任意設置できるのがH3限定で、結果的に見出し構造がこうなる（ロゴ画像h1→h1→h4→h3→h2→h3→略）のがおえええ～ってかんじ。

<h1><img src="ロゴ" alt="note"></h1>
<h1>記事タイトル</h1>
            <h4>目次</h4>
        <h3>任意見出し</h3>
        <h3>任意見出し</h3>
        <h3>任意見出し</h3>
        <h3>任意見出し</h3>
    <h2>このクリエイターの人気記事</h2>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>
    <h2>こちらもおすすめ</h2>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>

理想のnote記事見出し構造

せめてh2 > h3くらいの任意見出しが設置できると、うれしいなあ。

<h1>記事タイトル</h1>
    <h2>任意見出し</h3>
        <h3>任意小見出し</h3>
        <h3>任意小見出し</h3>
        <h3>任意小見出し</h3>
    <h2>任意見出し</h3>
        <h3>任意小見出し</h3>
        <h3>任意小見出し</h3>
        <h3>任意小見出し</h3>
    <h2>任意見出し</h3>
        <h3>任意小見出し</h3>
        <h3>任意小見出し</h3>
        <h3>任意小見出し</h3>
    <h2>このクリエイターの人気記事</h2>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>
    <h2>こちらもおすすめ</h2>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>
        <h3>記事タイトル</h3>

逆にnoteのよかったところ

非対応のタグはさておき、書きやすさは故・NAVERまとめ並みに優れてると思う。外部URLの埋め込みもきれいだし、物書きさんでなくても使いやすい作り。

書きたい！発信したい！と思ったらすぐに書いて公開できるテンポの良さはあると思う。

ただ、テキストしか書けないわけではないぶん、もっとこうなったら表現の幅が広がるのに。コンテンツが充実するのに。的に期待してしまうのかも。

NAVERまとめだって表は作れなかったでしょ、と考えるとその通りなのだけど。見出しは複数パターン付けられたしリストタグもあったような。

note機能実装追記）

iOSアプリ版では、2021年6月のアップデートで画像Altの任意編集機能が追加されました。やったね！ぜひブラウザ版も実装してください。

実装追記）

さらに、2022年1月現在ベータ版ブラウザでリストタグやH2タグ・H3タグの付与もできるようになりました！やったね！！

あとはTableタグが実装されたら最高です。。

いいなと思ったら応援しよう！