ブログ記事作成を超効率化!ベタ打ち文を自動で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(FF14)にはチャット欄に打ち込むことで使えるテキストコマンドと、キーボ…
  2. 風林火山
    今更も今更ですが、2007年の大河ドラマ「風林火山」を全話見ました。 見終わってから気づいたけど全…
  3. 性別欄
    性別違和感を抱える人にとってやっかいな、各種書類や会員カードの「性別欄」。 できればなくなってほし…
  4. FF14ギルドリーヴレベル上げ
    ファイナルファンタジー14では、レベル15にならないと効率のいいレベル上げである「インスタンスダンジ…
  5. ネスカフェバリスタ-pm9631
    先日、生協のキャンペーンでネスカフェ ゴールドブレンド バリスタ(PM9631)が当選したらしくうち…
  6. GTX750to1060
    ファイナルファンタジー14では大型拡張「紅蓮のリベレーター」へアップデートされたことに伴い、必要・推…
  7. 戦国武将の歌
    辞世の句などで、わりとよく目にすることが多い戦国武将たちの詠んだ和歌。 どういう経緯で詠まれたもの…
  8. らーめん兜のレビュー
    札幌市の藻岩山のふもとに「甲冑姿でラーメンを提供してくれる店がある」と聞き、実態をたしかめるべく「ら…
  9. 伊藤ハム通好み「ミミガー」
    沖縄料理の一つで、コリコリとした食感が特徴の「ミミガー」(豚の耳)。 物産展や沖縄料理屋でしか…
  10. 札幌のバスと市電
    北海道最大の都市・札幌。一年を通じ移住や引っ越しで札幌圏に越してくる人も多いです。 ですが、市…
 スポンサーリンク


記事を書いている人

校倉

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

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

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

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

ページ上部へ戻る