Template Party

テキストの一括置き換えツールを使ってhtmlの仕上げをしよう

titleタグ、metaタグなどの入力、最終確認。

最後に、html側でまだ入れ替えが完了していないテキストを入れ替えていきます。
マニュアルに使用したテンプレート以外のテンプレートも全て以下の入れ替え箇所がありますので探してみて下さい。(ロゴ画像はない場合もあります)

入れ替え箇所の解説

  • titleタグ
    Googleなどで検索する際に最も重要視されるワードです。店名以外に、所在地や人気商品名など盛り込んでおくといいでしょう。
  • metaタグ(description:サイト説明文)
    検索した際に出てくる一覧の説明文に使われる場合もあるので、見た人が訪問したくなる説明を入れましょう。
  • metaタグ(keywords:キーワード)
    今は重要視されていませんが、5〜10個ぐらい関連キーワードをカンマ区切りで入れておきましょう。
  • ロゴ画像のalt指定
    alt属性は画像(img)を「読んだ」場合の説明です。ロゴ画像はテンプレートによっては背景に指定されていてimgタグとしてないものもありますが、ある場合は必ず入れ替えておきましょう。ロゴ以外に画像を使っている場合はそれらのaltも記載して下さい。装飾など飾りの要素であれば空のまま(alt="")で構いません。
  • Copyright内の名前
    こちらもサイト名を入れておきましょう。その下の行は弊社の著作表示になるので無断で外さないよう注意して下さい。

今回はChromeでなく、置き換え専用ソフトを使うことにします。

Chromeを使って今までと同じように1枚のhtmlを開いて手動で入れ替えていってもいいのですが、面倒なので一括置き換えソフトを使ってみましょう。対象のフォルダを指定すれば、その中に含まれる全てのファイルを対象に文字列の置き換えができます。

Windowsの場合:Devasを使ってみる。

テキスト置き換えソフトも色々ありますが、今回はDevasを使ってみることにします。Vectorなどからインストールしておいて下さい。

(※画像内の再生ボタンを押すと動画が再生されます。約49秒。)

Macの場合:TextWranglerを使ってみる。

テキスト置き換えソフトも色々ありますが、今回はTextWranglerを使ってみることにします。Apple Storeなどからインストールしておいて下さい。

(※画像内の再生ボタンを押すと動画が再生されます。約1分19秒。)

一括置き換えが完了したら

トップページ以外の各ページごとのtitleタグだけ少し手を加えておくとよりいいと思います。
例えば「パン作りのこだわり」ページであれば、
<title>パン作りのこだわり|横浜のパン屋さん Sample Bakery</title>
などです。

<< 「初心者向け講座」メニュー一覧に戻る