独学 [ 講座 ]

ホームページに使える無料テンプレート使い方解説【DLページ】

  ホームページに使える無料テンプレート使い方解説【DLページ】

自分でホームページを作るときに使える無料テンプレートのダウンロードと、使い方を解説します。

ネット上での情報発信が欠かせない時代になりました。

急ぎでホームページが必要な人もいるでしょう。知識がないままゼロから作成するのは大変です。テンプレートがあればホームページ作成の手助けになります。是非参考にしてチャレンジしてください。

様々なホームページに使えるよう、シンプルで、編集しやすいように作成しました。レスポンシブでスマホに対応しています。

編集作業はパソコンで行ってください。

【手順1】ファイルをダウンロードする

無料でダウンロードできるテンプレートのデザインです。パソコン、スマホに対応しているレスポンシブデザインです。

無料ホームページテンプレート(レスポンシブ・スマホ対応)
拡大して見る

※サンプルのデザインです。ダウンロードファイルには写真画像は含まれていません

まずは、利用規約を確認して、ファイルをダウンロードします。

ファイルはZIPで圧縮しているので、まずは解凍(展開)します。

Windowsの場合

ZIPファイルを右クリックを押すと「すべて展開」とあるので、それをクリックするとファイルが解凍(展開)されます。

ZIPファイルをタブルクリックで開くことはできますが、解凍(展開)されないので、サーバーにアップしても表示されません。必ず、解凍(展開)してください。

Macの場合

ZIPファイルをダブルクリックするとファイルが解凍(展開)します。 Macの場合は、これだけでOKです。

【手順2】ファイルの中身を確認

ファイルには、以下のものが入っています。

index.html(HTMLファイル)
L css(CSSが入っているフォルダ)
L img(画像が入っているフォルダ)

これをサーバーにアップしますが、今はサンプルのままなので、自分のホームページの情報に書き換えます。基本的には、index.htmlとimgフォルダの中の画像を差し替えます。

【手順3】index.htmlから必要な項目を選ぶ

まずは、index.htmlを開いて、不要な要素を削除します。index.htmlの編集には、メモ帳を使います。

WindowsもMacもメモ帳はデフォルトで入っていますが、できればHTMLの編集に適したメモ帳を使ってください。WindowsもMacも無料でダウンロードできるメモ帳ソフト(テキストエディタとも言う)があるので紹介します。

Windowsの場合

TeraPad

昔からあるWindowsの無料で利用できるテキストエディタです。

Macの場合

mi

こちらもMacでは一般的な無料で利用できるテキストエディタです。

「テキストエディタ 無料」で検索するとたくさん出てくるので、自分に合ったものなら何でもOKです。もちろん有料でも構いません。

ダウンロードが終わったら、TeraPadまたはmiでindex.htmlファイルを開いてください。通常はindex.htmlをダブルクリックすると元々パソコンに入っているメモ帳で開くので、右クリックでTeraPadまたはmiを選んで開いてください。

必要な要素を決める

ダウンロードしたテンプレートは特定のホームページではなく、様々なホームページに使えるように、複数の要素を入れています。必要な要素だけをピックアップし、不要なものは消します。

  • ヘッダーエリア
  • 大きい写真のメインエリア
  • NEWSエリア
  • WORKSエリア
  • MENUエリア
  • ACCESSエリア
  • CONTACTエリア
  • フッターエリア

ソースを見ると、例えばヘッダーであればこのようにヘッダーエリアの始まりと終わりにコメントタグを入れています。

<!-- ヘッダーエリア -->
<header id="header">
    <div class="inner">
        <h1>(サイト名)</h1>
        <nav class="gnav">
            <ul>
                <li><a href="#news">NEWS</a></li>
                <li><a href="#works">WORKS</a></li>
                <li><a href="#menu">MENU</a></li>
                <li><a href="#access">ACCESS</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </nav>
    </div>
</header>
<!-- ヘッダーエリア終り -->

コメントタグとは、「<!–」から始まり「–>」で終わるテキストのことです。テキストの前後にこのタグを入れるとホームページ上では表示されません。

つまり、「<!– ヘッダーエリア –>」と「<!– ヘッダーエリア終り –>」はホームページ上では表示されていません。ソースをわかりやすくするように付けているだけです。

このように、各要素ごとにコメントを入れているので、それを目安に不要な要素は削除しましょう。

例えばWORKSが不要な場合は、「<!– WORKSエリア –>」から「<!– WORKSエリア終り –>」までのテキストを消去します。

後から使いたいと言う人は、先ほどのコメントタグで前後を囲んでおくとホームページでは表示されません。実際に使う時にはそのコメントタグを外して使います。

うさ吉先生

コメントタグは表示されないが、ソースコードでは見ることができる。コメントタグに個人情報等は記載しないように注意だぞ!

例えば、飲食店のサイトだったら、全部使用できます。

  • ヘッダーエリア
  • 大きい写真のメインエリア
  • NEWSエリア:新着情報
  • WORKSエリア:料理のお写真を掲載。タイトルを「お料理の写真」に変える
  • MENUエリア:メニューを掲載
  • ACCESSエリア:所在地を掲載
  • CONTACTエリア:お問い合わせメールを記載
  • フッターエリア

例えば、会社のホームページだったら、こちらも全部使用できます。

  • ヘッダーエリア
  • 大きい写真のメインエリア
  • NEWSエリア:新着情報
  • WORKSエリア:実績を掲載
  • MENUエリア:ABOUTにして、事業内容を掲載
  • ACCESSエリア:所在地を掲載
  • CONTACTエリア:お問い合わせメールを記載
  • フッターエリア

例えば、趣味のサイトだったら、ピックアップして使います。

  • ヘッダーエリア
  • 大きい写真のメインエリア
  • NEWSエリア:新着情報
  • WORKSエリア:作品を掲載
  • CONTACTエリア:お問い合わせメールを記載
  • フッターエリア

など、用途に合わせて必要なものをピックアップしてください。

【手順4】index.htmlの各要素の編集

各要素のテキストや画像を編集していきます。編集箇所は赤字部分です。

headの編集

headエリア

index.htmlを開いた一番上部のエリアです。ここは、title、description、keywordを編集します。

編集箇所

title
サイト名
description
サイトの説明文
keyword
サイトのキーワード。キーワードは「,」で区切ります

ここは、検索順位に関わってくるので、必ず変更しておきましょう。

ヘッダーエリアの編集

ヘッダーエリア

ヘッダーエリアは、h1とメニューを編集します。

編集箇所

h1
サイト名・タイトル名
メニュー
不要なメニューは、<li>から</li>まで列ごと削除

大きい写真のメインエリアの編集

大きい写真のメインエリア

大きい写真のメインエリアは、<p>の中のテキストと画像を編集します。

編集箇所

<p>の中のテキスト
サイト名や、何のサイトかを記載。写真だけでいい人は、このエリアを削除(<br>は、改行の意味)
画像
imgフォルダの「img_mainvisual.jpg」の画像を変更。大きさは横長の解像度72の横幅1400pxがベスト

画像のサイズ変更は、パソコン内のソフトで可能です。

Windowsの場合

ペイント

[ホーム]→[サイズ変更]

ペイントソフトで開き、サイズ変更の水平方向のピクセルを変更しましょう。デフォルトはパーセントなので、ピクセルにします。縦横比を維持するは、必ずチェックを入れておきます。

Macの場合

プレビュー

[ツール]→[サイズを調整]

プレビューソフトで画像を開き、解像度を72にし、幅を1400ピクセルにしてOKを押します。縦横比を固定は、必ずチェック入れておきましょう。

NEWSエリアの編集

NEWSエリア

NEWSの情報を記載します。日付と内容を変更してください。

編集箇所

日付
更新した日付
内容
お知らせ内容

NEWSを増やしたい場合は、<li>から</li>までまでをコピーして追加してください。

WORKSエリアの編集

WORKSエリア

掲載したい画像のみにし、不要なものは消します。

編集箇所

画像
imgフォルダの「img_works_××.jpg」を変更。大きさは横長の解像度72の横幅600pxがベスト

画像は、縦横の比率が同じ方が綺麗に見えます。

altは、画像の説明です。何の写真か記載しましょう。例えば、うさぎの写真であれば、「alt="うさぎ"」とします。

MENUエリアの編集

MENUエリア

MENUなどの情報を掲載するエリアです。

編集箇所

テキスト
任意のテキスト情報

各ブロックは、<li>から</li>までが一括りです。増やしたい場合は、NEWSと同じ要領で、<li>から</li>までをコピーして追加してください。

ACCESSエリアの編集

ACCESSエリア

所在地等の情報とGoogleMapの表示エリアです。

編集箇所

所在地
所在地等の情報
GoogleMap
GoogleMapのタグ

GoogleMapを表示しない場合は、「地図のiframeタグを貼ります」エリアを削除してください。

GoogleMapの貼り方はこちら

CONTACTエリアの編集

CONTACTエリア

ここは、各テキストを任意のものに書き換えてください。メールアドレスの書き換え箇所は、2箇所です。

編集箇所

メールアドレス
メールアドレスを2箇所変更してください

フッターエリアの編集

フッターエリア

サイト名を書き換えてください。

編集箇所

サイト名
サイト名。日本語でも問題ないですが、英語表記が一般的です

編集が終わったら画像、index.htmlファイルを保存します。途中でパソコンが落ちてしまう可能性もあるので、作業ごとに保存する癖をつけましょう。

これでテンプレートの編集は終わりました。あとは、このファイルをサーバーにアップすれば、ホームページが公開できます。

うさ吉先生

自分で作ったホームページは達成感がある。是非活用してくれ!

お困りですか?