STEP 01

HTMLの文字を変更する

最初に覚えるのは、会社名・見出し・本文・ボタンなどの文字変更です。HTMLタグそのものではなく、タグに挟まれている文章を中心に書き換えます。

1. 編集前に元ファイルをコピーする

配布ZIPを解凍したら、最初にフォルダ全体をコピーしてバックアップを作っておくと安心です。Template 001の場合、トップページは次のファイルです。

template001-simple-business/index.html

おすすめ： 編集用フォルダを「my-site」など別名でコピーし、配布時の元データはそのまま残しておきます。

HTMLでは、画面に表示される文字の多くがタグの間に書かれています。例えば次のような部分です。

変更前index.html

<!-- ★ここに会社名・屋号を書きます -->
<strong>NEXA</strong>

NEXA の部分だけを、自分の会社名や屋号に変更します。

変更後index.html

<strong>山田デザイン事務所</strong>

ポイント： <strong> と </strong> は残し、その間の文字だけを書き換えます。

見出しは <h1> や <h2>、本文は <p> で囲まれていることが多いです。

BEFOREビジネスの未来を、もっとシンプルに。

テンプレートに最初から入っているサンプル文章です。

AFTER地域に寄り添う、身近なデザイン会社。

自分の事業内容に合う言葉へ変更します。

見出しの例index.html

<h1>
  地域に寄り添う、<br>
  身近なデザイン会社。
</h1>

<br> は途中で改行するためのタグです。文章だけ変更する場合は、そのまま残しても構いません。

リンクボタンも基本は同じです。タグの中に表示文字があります。

ボタンindex.html

<a href="service.html" class="button">サービスを見る</a>

この場合は「サービスを見る」の部分だけ変更できます。href="service.html" はリンク先なので、文字だけ変更する段階では触らなくて大丈夫です。

スマートフォンでタップして電話できるリンクは、見えている番号と tel: の中の番号が別になっています。

電話番号contact.html

<a href="tel:0312345678">
  03-1234-5678
</a>

注意： 表示される電話番号だけ変更して、tel: 側を変更し忘れると、タップした時に別の番号へ電話してしまいます。

例えば <h1> の < や > を消すと、ブラウザがHTMLとして正しく読めなくなることがあります。

href="service.html" の " は半角記号です。リンク先を編集するときは、全角の「”」に変えないようにします。

別のファイルを開いている、保存できていない、ブラウザに古い表示が残っていることがあります。ファイルを保存してからブラウザを再読み込みします。

NEXT STEP

写真が自分のものに変わると、テンプレートの印象が一気にオリジナルになります。