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

ブログ記事作成を超効率化するツール

スポンサーリンク


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

どんなツール?

簡単に説明すると、このツールは見出しにしたい行を指定の書式で書いた文章をH2、H3タグに置換してくれるツールです。
元となる指定の書式は、テキストエディタ上でも見やすい形を取っているので、マークダウンエディタやHTMLのように記事作成時に読みづらいといった不便さがありません。

Wordやメモ帳、Googleドキュメントなどで書いておいた文章を入れると、オートでWordPressに貼り付ければ良いだけのHTML入りテキストに変換してくれます。

WordPress以外の、HTML編集に対応しているレンタルブログサービスや通常のHTMLコーディングでも使用可能になっています。
また、スマホからでも利用可能です。(iOSのSafariで確認済)

機能をシンプルにするため見出しのh2、h3、aタグ以外には対応していません。
個人的にWordpressの編集画面で見出しタグをあとから付けるのが一番面倒くさかったので、そこを重点的にしてある感じです。

それ以外のタグをオートで付与するようにしたい場合や、変換に使う指定の文字を変更したい時は、ウェブページをローカル環境に保存してJavaSctiptを弄れば変更が可能です。
(正規表現の箇所を修正してください)

※改造したものをネット上に再アップロードすることはおやめください。

 

使い方は?

  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見出しタグ付きテキストに変換するツール

ツールを使っていて便利だなと感じたらぜひサポートを頂けると嬉しいです!
欲しいものリスト

◆この記事を読んだ人にオススメ!

JavaScript初心者が考える、初心者に最適な学習本の条件4つ

Javascriptで命名規則を実装するには?-FF14風ランダム名前メーカーができるまで

【GoogleChrome】コーディング中にCSSがうまく反映されないときはキャッシュの削除&再読込を!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でフォローしよう!

スポンサーリンク


校倉

投稿者プロフィール

「戦国らいふ」は校倉が管理しているブログです。
ブログと管理人についての詳細はこちら。
連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な相談等には対応しておりません

この著者の最新の記事

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。

 スポンサーリンク


おすすめ記事

  1. FF14リテイナー装備
    ファイナルファンタジー14で、冒険者(プレイヤー)の荷物などを預かってくれる「リテイナー」。 容姿…
  2. 風林火山
    今更も今更ですが、2007年の大河ドラマ「風林火山」を全話見ました。 見終わってから気づいたけど全…
  3. オンラインイラスト講座sensei3
    2016/3/2、イラストSNS最大手Pixivがイラストの講座動画サイト「sensei(センセイ)…
  4. 甘くない北海道土産ランキング
    旅行の楽しみといったら、お土産!という人は多いですよね。 ましてやそれが食べ物のおいしい北海道…
  5. アマゾン 荷物届かない
    数日前にアマゾンで注文したBluetoothの機器とUSBの充電器が、 配達予定日になっても届かな…

Facebook

 スポンサーリンク


記事を書いている人

校倉

ゲーム・創作活動・歴史などが好き。

記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な人生相談等には対応しておりません

ページ上部へ戻る