ブログ記事作成を超効率化！ベタ打ち文を自動でHTMLタグ化するツールを作りました

IT・ウェブ///
ブログ記事作成を超効率化するツール
ワードプレスなどブログ記事の作成で、地味に面倒くさいのが書いた文章に見出しを付けたり表にしたりするHTMLタグ付けの作業です。 本当にこれ面倒くさくて、記事公開まで地味に時間がかかったりするんですよね。 記事はすでに書きあがってるのにも関わらず。 同じような悩みをお持ちのブログ書いてる人、案外多いんじゃないでしょうか？ ということでJavaSctiptの勉強ついでに、ベタ打ちで作成したテキストと記事構成をHTMLタグ付きで自動出力してくれる、ブログ記事執筆効率化ツールを作りました。 無料＆登録不要でご利用いただけます。 [blogcard url=”https://azkr-tool.com/texttohedaertag.html″]

目次

どんなツール？

簡単に説明すると、このツールは見出しにしたい行を指定の書式で書いた文章をH2、H3タグに置換してくれるツールです。 元となる指定の書式は、テキストエディタ上でも見やすい形を取っているので、マークダウンエディタやHTMLのように記事作成時に読みづらいといった不便さがありません。 Wordやメモ帳、Googleドキュメントなどで書いておいた文章を入れると、オートでWordPressに貼り付ければ良いだけのHTML入りテキストに変換してくれます。 WordPress以外の、HTML編集に対応しているレンタルブログサービスや通常のHTMLコーディングでも使用可能になっています。 また、スマホからでも利用可能です。（iOSのSafariで確認済） 機能をシンプルにするため見出しのh2、h3、aタグ以外には対応していません。 個人的にWordpressの編集画面で見出しタグをあとから付けるのが一番面倒くさかったので、そこを重点的にしてある感じです。 それ以外のタグをオートで付与するようにしたい場合や、変換に使う指定の文字を変更したい時は、ウェブページをローカル環境に保存してJavaSctiptを弄れば変更が可能です。 （正規表現の箇所を修正してください） ※改造したものをネット上に再アップロードすることはおやめください。 [adrotate banner=”6″]  

使い方は？

  1. 「元テキスト」の欄に、HTML化したいテキストを貼り付けます。
  2. 変換された結果をコピーします。 （「結果をコピー」ボタンを押すか、結果欄でCtrl+A→Ctrl+C）
  3. コピーされたテキストをWordPressなど、ブログ編集の「HTML編集」画面に貼り付けます。
これだけ！

変換ルール

  • h2：◆から始まる行
  • h3：・から始まる行（全角ナカポツ）
  • aタグ：URL（httpもしくはhttpsから始まる行）。「別窓で開く」を付与します
改行はbrが入らずそのまま保持されるので、改行が自動付与されることが多いWordpressやブログサービスの編集画面で使いやすい形になっています。

このツールができたきっかけ

  • WordPressの公式編集画面がスマホからだと使いにくいから下書きをGoogleドキュメントで書いていた
  • いざ書き終わって公開するときに見出しタグを付けるのがめちゃくちゃ面倒
  • エディタはエディタでもマークダウン形式の記述は元のテキストだと読みづらい
  • Googleドキュメントとかで見やすいテキストの形のままコピペしたらHTMLタグにいい感じに自動変換してくれるサービスがあればな～
  • 探したけどなさそう
…よし、ツールにしてしまおう。ということで出来上がったのがこのツールです。 HTMLタグをちまちま入力するのが好き！って人ならいいんですけど、見出しタグの挿入って装飾でもないし、記事内容に関係ないのにやらないといけない作業だったので面倒だったんですよね、本当に。 実際に作ってみて使っていますが、記事制作がかなり楽になりました。 この記事もGoogleドキュメントで下書き→ツールを使って変換しています。 ぜひ利用してみてください！ 文章をHTML見出しタグ付きテキストに変換するツール ツールを使っていて便利だなと感じたらぜひサポートを頂けると嬉しいです！ 欲しいものリスト ◆この記事を読んだ人にオススメ！