どもです！ワーゲンバス旅人ブロガーのたむ（@tamunikki_type2）です！
ﾄﾞﾓヽ(´Д｀ ) ( ´Д｀)ノﾄﾞﾓ
今回は、ブログの執筆スピードを上げるための、HTMLコードテンプレを作成したので紹介します。
なお、このテンプレが活きるのはライブドアブログです。
ワードプレスやはてなブログで運用されている方は、より簡単なプラグインの方法があるみたいなので、そちらを参考にしてください。
ブログの読みやすさの肝となる目次と見出しですが、これをリンクさせることでブログの読みやすさが格段に上がります。
はてなブログやワードプレスではプラグインなどがあるらしく、このリンクを比較的簡単に作ることが出来るみたいなんですが、ライブドアブログにはそのような便利なものが見当たりません。
そのため、いちいちHTMLコードを手入力して記事を書いていたんですが、これがめっちゃ時間掛かるんですｗ
ブログを毎日更新するには作業時間を短く出来れば出来るほどいいので、HTMLコードをテンプレ化しました！
目次数が少なく、シンプルな記事を書くときに使用できる、大見出しのみの目次リンクのテンプレを作成しました。
目次項目一つに、大見出し一つがリンクするシンプルなテンプレです。
そのHTMLコードはこちら。
このコードをそのままコピーして、記事作成画面のHTMLタグ編集ページにペーストすればOKです。
もしくは、ブログ設定画面から定型分の管理画面を開き、新しい定型分を作るを押し、定型分の欄にペーストして登録すれば、目次リンクのテンプレの完成です。
HTMLコード内の「見出し○」と書いてある部分を書き換えれば、目次の項目と本文の見出しタイトルを変更することが出来ます。
本文は「ここに文章を入力」のところに上書きすればOK。
本文見出しと本文は、通常の記事を書く画面（HTMLタグ編集画面じゃないほう）でも上書きするだけで簡単に編集できるので、僕は本文見出しと本文は通常の記事を書く画面で書いています。
ただ、目次項目だけはHTML編集画面で書いています。
それは、目次の方は「見出し○」を一度消してから書いてしまうとリンクコードも一緒に消えてしまうので、「見出し○」の中に項目文を書き、その後にいらない文を消すという作業が必要になるためです。
「見出し○」外だとリンクが消える。
「見出し○」内だとリンクが消えずに書ける。
いちいち書いて消してっていう作業を重ねるより、本文を書き終えてからHTMLタグ編集画面へ切り替え、本文見出しの文をコピーし、目次項目にペーストする方がはるかに作業負担が軽いので、この方法をとっています。
次に作ったのは、大見出しの中を細分化するために必要な小見出しの項目を追加した目次テンプレです。
大見出し（h2）一つにつき、小見出し（h3）を三つ付くようになっています。
今までいちいち小見出しを追加しては、HTMLタグ編集画面でコードを手入力していたんですが、あらかじめ小見出しを含めたテンプレを作ることで、作業の簡易化を図ってみました。
HTMLコードはこちらです。
このコードをそのままコピペ出来ます。
最後の大見出し（h2）2つは記事のまとめに使うようにしています。
HTMLコードの定型文化、目次の各項目や、見出し、本文の編集作業は前の項目「大見出しのみの目次リンクのテンプレ！」と同じ作業でOKです。
記事を書いて行くと、目次テンプレよりも見出しが追加で必要になることがあります。
また、そもそもPC版のライブドアブログでは見出しコード（h2やh3など）がワンタッチで入力することが出来ず、その都度HTMLタグ編集画面でコードを入力しなければいけません。（なぜかスマホアプリではワンタッチで編集できます）
いちいちそんなことやっていても時間を浪費するだけなので、リンク付きの見出しのテンプレを作成しました。
作ったのはリンク付きの大見出し（h2）と小見出し（h3）、その見出しに飛べるリンク付き目次のテンプレです。
大見出し（h2）のテンプレHTMLコード。
小見出し（h3）のテンプレHTMLコード。
追加用目次のテンプレHTMLコード。
これらを定型文として登録しておくと、記事作成時にスムーズに目次項目と見出しの追加をができるので、記事作成の時間を短縮することが出来ます。
まず、本文中の見出しを追加したいところに、定型文として登録した「見出し」を選択して挿入します。
次に、追加した見出しに目次から飛べるようにするため、目次内の該当する位置に定型文として登録した「追加用目次」を選択して挿入します。
このままではリンクが重複していて目次から見出しへ飛べないので、HTMLタグ編集画面に切り替え、コードを一部編集します。
編集といっても簡単です。
追加した見出しと目次のコードの「”」に挟まれている数字を変更するだけです。
このように書き換えるだけで、目次から見出しへのリンクを追加できます。
見出しの並んでいる位置（上から2番目）と、変更した数字（"6"にしている）が違いますが、他の見出しリンクに数字が被らなければ問題なく飛べるので大丈夫です。
記事内に挿入する、ツイッターアカウントへのリンクをテンプレ化しました。
HTMLコードはこちらです。
コードのここを、紹介したいツイッターアカウント名に書き換えればリンクの完成です。
これでアカウントの紹介記事を書くのが捗ります！
以上、ブログの執筆スピードを上げる、リンク付きHTMLテンプレの紹介でしたー
テンプレを作成するのには少し時間が掛かりますが、その最初にだけ時間を割けば、その後の作業効率が格段に上がるので、テンプレを作成することをオススメします。
また、あなたが書いて行く上で「こうなったらいいのにな」って思ったら、どんどんオリジナルに編集して行きましょう。
自分でHTMLコードを入力してテンプレを作成することによって、自然とHTMLについて覚えて行きますよ。
一緒に作業効率を上げて、ブログをどんどん育てて生きましょう！
それではー|°о\X/о°|
ﾄﾞﾓヽ(´Д｀ ) ( ´Д｀)ノﾄﾞﾓ
今回は、ブログの執筆スピードを上げるための、HTMLコードテンプレを作成したので紹介します。
なお、このテンプレが活きるのはライブドアブログです。
ワードプレスやはてなブログで運用されている方は、より簡単なプラグインの方法があるみたいなので、そちらを参考にしてください。
目次と見出しのリンクをテンプレ化した！
ブログの読みやすさの肝となる目次と見出しですが、これをリンクさせることでブログの読みやすさが格段に上がります。
はてなブログやワードプレスではプラグインなどがあるらしく、このリンクを比較的簡単に作ることが出来るみたいなんですが、ライブドアブログにはそのような便利なものが見当たりません。
そのため、いちいちHTMLコードを手入力して記事を書いていたんですが、これがめっちゃ時間掛かるんですｗ
ブログを毎日更新するには作業時間を短く出来れば出来るほどいいので、HTMLコードをテンプレ化しました！
大見出しのみの目次リンクのテンプレ！
目次数が少なく、シンプルな記事を書くときに使用できる、大見出しのみの目次リンクのテンプレを作成しました。
目次項目一つに、大見出し一つがリンクするシンプルなテンプレです。
そのHTMLコードはこちら。
<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;"> <b>目次</b><br /> <a href="#1">見出し1</a><br /> <a href="#2">見出し2</a><br /> <a href="#3">見出し3</a><br /> <a href="#4">見出し4</a><br /> <a href="#5">見出し5</a><br /> </div> <h2 id="1">見出し1</h2> ここに文章を入力。 <h2 id="2">見出し2</h2> ここに文章を入力。 <h2 id="3">見出し3</h2> ここに文章を入力。 <h2 id="4">見出し4</h2> ここに文章を入力。 <h2 id="5">見出し5</h2> ここに文章を入力。
このコードをそのままコピーして、記事作成画面のHTMLタグ編集ページにペーストすればOKです。
もしくは、ブログ設定画面から定型分の管理画面を開き、新しい定型分を作るを押し、定型分の欄にペーストして登録すれば、目次リンクのテンプレの完成です。
HTMLコード内の「見出し○」と書いてある部分を書き換えれば、目次の項目と本文の見出しタイトルを変更することが出来ます。
本文は「ここに文章を入力」のところに上書きすればOK。
本文見出しと本文は、通常の記事を書く画面（HTMLタグ編集画面じゃないほう）でも上書きするだけで簡単に編集できるので、僕は本文見出しと本文は通常の記事を書く画面で書いています。
ただ、目次項目だけはHTML編集画面で書いています。
それは、目次の方は「見出し○」を一度消してから書いてしまうとリンクコードも一緒に消えてしまうので、「見出し○」の中に項目文を書き、その後にいらない文を消すという作業が必要になるためです。
「見出し○」外だとリンクが消える。
「見出し○」内だとリンクが消えずに書ける。
いちいち書いて消してっていう作業を重ねるより、本文を書き終えてからHTMLタグ編集画面へ切り替え、本文見出しの文をコピーし、目次項目にペーストする方がはるかに作業負担が軽いので、この方法をとっています。
小見出し付きの目次テンプレ！
次に作ったのは、大見出しの中を細分化するために必要な小見出しの項目を追加した目次テンプレです。
大見出し（h2）一つにつき、小見出し（h3）を三つ付くようになっています。
今までいちいち小見出しを追加しては、HTMLタグ編集画面でコードを手入力していたんですが、あらかじめ小見出しを含めたテンプレを作ることで、作業の簡易化を図ってみました。
HTMLコードはこちらです。
<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;"> <b>目次</b><br /> <a href="#1">見出し1</a><br /><a href="#2">見出し2</a><br /><a href="#3">見出し3</a><br /><a href="#4">見出し4</a><br /> <a href="#5">見出し5</a><br /><a href="#6">見出し6</a><br /><a href="#7">見出し7</a><br /><a href="#8">見出し8</a><br /> <a href="#9">見出し9</a><br /><a href="#10">見出し10</a><br /><a href="#11">見出し11</a><br /><a href="#12">見出し12</a><br /> <a href="#13">見出し13</a><br /> <a href="#14">見出し14</a><br /> </div> <h2 id="1">見出し1</h2> ここに文章を入力。 <h3 id="2">見出し2</h3> ここに文章を入力。 <h3 id="3">見出し3</h3> ここに文章を入力。 <h3 id="4">見出し4</h3> ここに文章を入力。 <h2 id="5">見出し5</h2> ここに文章を入力。 <h3 id="6">見出し6</h3> ここに文章を入力。 <h3 id="7">見出し7</h3> ここに文章を入力。 <h3 id="8">見出し8</h3> ここに文章を入力。 <h2 id="9">見出し9</h2> ここに文章を入力。 <h3 id="10">見出し10</h3> ここに文章を入力。 <h3 id="11">見出し11</h3> ここに文章を入力。 <h3 id="12">見出し12</h3> ここに文章を入力。 <h2 id="13">見出し13</h2> ここに文章を入力。 <h2 id="14">見出し14</h2> ここに文章を入力。
このコードをそのままコピペ出来ます。
最後の大見出し（h2）2つは記事のまとめに使うようにしています。
HTMLコードの定型文化、目次の各項目や、見出し、本文の編集作業は前の項目「大見出しのみの目次リンクのテンプレ！」と同じ作業でOKです。
追加用の「リンク付き見出し」と「リンク付き目次」のテンプレ！
記事を書いて行くと、目次テンプレよりも見出しが追加で必要になることがあります。
また、そもそもPC版のライブドアブログでは見出しコード（h2やh3など）がワンタッチで入力することが出来ず、その都度HTMLタグ編集画面でコードを入力しなければいけません。（なぜかスマホアプリではワンタッチで編集できます）
いちいちそんなことやっていても時間を浪費するだけなので、リンク付きの見出しのテンプレを作成しました。
作ったのはリンク付きの大見出し（h2）と小見出し（h3）、その見出しに飛べるリンク付き目次のテンプレです。
大見出し（h2）のテンプレHTMLコード。
<h2 id="1">見出し2</h2>
小見出し（h3）のテンプレHTMLコード。
<h3 id="1">見出し3</h3>
追加用目次のテンプレHTMLコード。
<a href="#1">見出し1</a>
これらを定型文として登録しておくと、記事作成時にスムーズに目次項目と見出しの追加をができるので、記事作成の時間を短縮することが出来ます。
まず、本文中の見出しを追加したいところに、定型文として登録した「見出し」を選択して挿入します。
次に、追加した見出しに目次から飛べるようにするため、目次内の該当する位置に定型文として登録した「追加用目次」を選択して挿入します。
このままではリンクが重複していて目次から見出しへ飛べないので、HTMLタグ編集画面に切り替え、コードを一部編集します。
編集といっても簡単です。
追加した見出しと目次のコードの「”」に挟まれている数字を変更するだけです。
このように書き換えるだけで、目次から見出しへのリンクを追加できます。
見出しの並んでいる位置（上から2番目）と、変更した数字（"6"にしている）が違いますが、他の見出しリンクに数字が被らなければ問題なく飛べるので大丈夫です。
ツイッターアカウントへのリンクをテンプレ化した！
記事内に挿入する、ツイッターアカウントへのリンクをテンプレ化しました。
HTMLコードはこちらです。
Aさん（<a href="https://twitter.com/a" target="_blank">@a</a>）
コードのここを、紹介したいツイッターアカウント名に書き換えればリンクの完成です。
これでアカウントの紹介記事を書くのが捗ります！
「こうだったら捗るのに」と思ったらどんどんテンプレ化していこう！
以上、ブログの執筆スピードを上げる、リンク付きHTMLテンプレの紹介でしたー
テンプレを作成するのには少し時間が掛かりますが、その最初にだけ時間を割けば、その後の作業効率が格段に上がるので、テンプレを作成することをオススメします。
また、あなたが書いて行く上で「こうなったらいいのにな」って思ったら、どんどんオリジナルに編集して行きましょう。
自分でHTMLコードを入力してテンプレを作成することによって、自然とHTMLについて覚えて行きますよ。
一緒に作業効率を上げて、ブログをどんどん育てて生きましょう！
それではー|°о\X/о°|
コメント