ココログで文字の長さで列幅が変わる表を書く方法

1. 前置き

ココログのリッチテキストエディタで表を書くと固定サイズが設定されるので、文字の長さを変えても列幅が変わりません。なので、列幅を指定するコードを削除する必要があり、とても面倒です。
しかし、通常エディタで<table>のHTMLコードを編集するのは面倒です。

昔はジャストシステム「xfy Blog Editor」があったようですが、今は無いようです。
そこで、次の方法を試してみました。

もっと良い方法があれば、コメントをください。

2. 記事作成手順

1. VS CODE + Markdown All in One で、マークダウンにより表やリストや見出し行などを記述する。
2. VS CODE + Markdown All in One で、マークダウンのプレビューを確認する。
3. VS CODE + Markdown All in One で右クリックし、HTMLに書き出す。⇒マークダウンの書式がHTMLになる。
4. ココログの通常エディタにHTMLを貼り付ける。⇒ココログで使えないHTMLコードが削除される。

この先は、このままココログで編集する場合と、HTMLをVS-CODEに戻す方法があります。戻す場合は、次のステップになります。

5. ココログの通常エディタのコードをローカルのHTMLファイルに貼り付ける。
6. VS CODE + Live Previe で、HTMLファイルを編集する。⇒ココログの通常エディタと異なり、編集画面と表示画面が同時に表示されるので、編集しやすいです。オートコンプリート機能も働きます。
7. ココログの通常エディタにHTMLを貼り付ける。

3. VS CODEでのマークダウンからHTMLへの変換

• #は<h1>、##は<h2>、###は<h3>、####は<h4>に変換されます。ココログのリッチテキストエディタでは<h1>などを書けませんが、機能は有効です。
• * は<li>に変換されます。
• ```は<pre><code>に変換されます。
• 表は<table>に変換されるので、ココログで<table style="border-collapse: collapse; margin-left: 15px;" border="1" cellpadding="2"> などに変更します。

4. ココログでのHTMLの変換

• CSSは削除されます。
• <pre>は機能せず行頭の空白が削除されます。なので<p>に置き替えます。

5. 参考

VS Code

https://code.visualstudio.com/

Microsoft Storeにもあります。

Markdown All in One

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

Live Preview

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server