HOME > arsvi.com の運営と作業 >

エディタ(TeraPad)でHTMLファイルを編集する


Tweet
last update: 20190523




■「TeraPad」というソフト

「TeraPadはシンプルなSDIタイプのテキストエディタです。」
フリーソフトです。

◆ソフトのホームページ
 https://tera-net.com/library/tpad.html
 から、最新ヴァージョンをダウンロードします。

その他のおすすめエディタ

◆EmEditor
 https://jp.emeditor.com/#download
◆初心者でも使いやすいオススメのテキストエディタ19選(2017/01/13)
 https://ferret-plus.com/810
◆Macで使えるフリーのテキストエディタ15選【2019年版】(2019/02/05)
 https://blog.codecamp.jp/mactext-editor-15


>TOP

■HTMLファイルの編集方法

サンプルファイルを保存する

サンプルページから、目的に該当したファイルをダウンロードします。

[htm版]

  1. サンプルページの[htm版]をクリックして開く
  2. [htm版](開いたページ)のソースを表示する (Ctrl+U)
  3. ファイル →「上書き保存」を選択 (Ctrl+S)
  4. 半角英数字のファイル名に変更し、拡張子「.htm」を「ファイル名」の後に記す (例:1607oh.htm)
  5. ファイルの種類が「HTMLファイル」であることを確認し、「保存」する

[txt版]

  1. サンプルページの[txt版]をクリックして開く
  2. 点線(↓−−−−−−−−−−−−−−−−−−−−−−−↓)より下の部分をすべてコピーする
  3. テキストエディタを開いてコピーを張り付ける
  4. ファイル →「名前を付けて保存」を選択
  5. 半角英数字のファイル名をつけ、拡張子「.htm」を「ファイル名」の後に記す (例:1607oh.htm)
  6. ファイルの種類を「HTMLファイル」に変更する
  7. 文字コードがファイルに記載されている文字コードと同じであることを確認する
  8. 「保存」する

保存したファイルを編集する

  1. 保存したファイルをテキストエディタ(「TeraPad」など)で開く
  2. 各サンプルページに記されている「解説/ルール」をよく読み、記載すべき情報を書き加える
  3. 各サンプルページに記されている「解説/ルール」の(点線で区切られた)箇所は削除する
  4. 書き換えたファイルを「上書き保存」する (Ctrl+S)
  5. 保存したファイルをダブルクリックで開き、きちんと更新されていることを確認する

ファイルの文字コードを確認する

ファイルに記載された文字コードと同じ文字コードで保存してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title> TeraPadを使ってHTMLファイルを編集する</title>

名前を付けて保存する

文字コードを間違えていた場合は、文字コードを一致させるために「名前を付けて保存」を選択します。
  1. ファイル →「名前を付けて保存」を選択
  2. 「文字コード」を、ファイルに記載されている文字コードと同じ文字コードに変更する。
  3. 「保存」する


※注


>TOP

■エディタの便利な機能

改行の<br>タグを一括置換でつける

目次や長い文章を入力すると、必然的に改行が多くなります。
改行のタグは<br>というタグなのですが(もちろん本当は半角です。しかし半角で書くとタグとして扱われてしまうので、ここでは便宜的に全角で書いています)、これをひとつひとつ手打ちで(もしくはコピペで)入力していては、たいへんな労力と時間のロスになります。
そこで、TeraPadの機能を使って一括置換でこのタグをつけます。

◆方法
編集するファイル(すでにいろいろタグが入っている)とは別に新しいファイルを開いて、そこに改行タグをつけたい文書を打ち込み/コピペします。
 ↓
上のメニューの[検索]から[置換]を選択する、もしくは[Ctrl+R]を押します。
 ↓
[置換]のウィンドウが開きます。
 ↓
「オプション」の3番目の「\n=改行……」という項目にチェックをいれます。
 ↓
「検索する文字列」に \n と入れます。
 ↓
「置換後の文字列」に <br>\n と入れます。★<br> は半角で!
 ↓
「すべて置換」をクリックします。
 ↓
「置き換えますか?」と確認されるので、「すべて」をクリックします。
 ↓
改行箇所すべてに<br> タグがつきます。
 ↓
全体をコピーして、編集するファイルの該当箇所にペーストします。
 ↓
保存します。できました。


「マクロ」機能でタグを自動作成する

頻度の高い編集作業として、
http://www.arsvi.com/z/t01.htm
というようなURLに、
<a href=""></a>
というリンクのタグ(これも本当は半角)をつけて、
<a href="http://www.arsvi.com/z/t01.htm">http://www.arsvi.com/z/t01.htm</a>
としてリンク指定をする(すると実際の表示は http://www.arsvi.com/z/t01.htm となる)という作業があります。

 ★注意:ここでは例としてこのURLを挙げていますが、実際にwww.arsvi.com内のページにリンクする場合は
相対パスにしてください。


相対パスでは、arsvi.com のトップページのアドレス「http://www.arsvi.com」を削除して、
「..」(半角ドット2つ)に置き換えます。

<a href="http://www.arsvi.com/z/t01.htm">
  ↓
<a href="../z/t01.htm">

「マクロ」機能を使うと、これが一瞬でできます。
要は、選択したURLにタグをつける過程を記録しておいて、[Ctrl+*]という操作だけでそれを再現するように設定するのです。

マクロの使い方は以下のブログ記事を参照してください。わからなかったら近くのPDやRAに質問してください。

◆Tera Padにマクロを使え!(いきなりホームページ/2010年06月15日)
http://edeito.seesaa.net/article/153325076.html


*作成:村上 潔 更新:小川 浩史
UP: 20110325 REV: 20160717, 0719, 20180718, 0719, 0730, 20190521, 0523
サンプルファイル集  ◇ウェブページ作成の注意点  ◇arsvi.com の運営と作業
TOP HOME (http://www.arsvi.com)