HTMLテンプレートの使い方:ダウンロードしたらHTMLタグやCSSを使ってカスタマイズしよう

HTMLテンプレートの使い方

自分の好みのテンプレートを決めたら、まずどんなサイトにするか、ぼんやりでいいので全体像を考えてみましょう。

nov

自分が作りたいサイトのテーマなどをあらかじめ決めておいたほうが、いざテンプレートを使ってサイトを作るときに、スムーズにすすめることができます。

ここは面倒でもぜひ時間をかけてじっくり考えて欲しいと思います!

目次

ジャンルを決めてからサイト製作に取り掛かろう!

ジャンル・テーマを決めてからサイト製作に取り掛かろう。

テンプレートを使ってサイトを構築する場合、まずやってもらいたいのが、

自分がどんなテーマのサイトを作るか考えてください。

サイトのテーマが決まっていないと、いざテンプレートをダウンロードしても、スムーズにその後のステップが進みません。

おすすめとしては、やはり最初は自分のできるだけ得意な分野がいいと思います。自分の好きな趣味などもいいでしょう。

長く続けることができるのは、自分が得意&好きなことじゃないとなかなか続けられませんからね。

どんなテーマでなら自分が長く続けることができるか、また人気のサイトになるか、頭を絞ってよく考えてくださいね!

基本的に人々に役立つサイト作りを心がけていれば、自然とアクセスも上がってくると思います☆

自分が気に入ったデザインのテンプレートを決めたら、早速ダウンロードしてみましょう!大体のダウンロードファイルには「.zip」や「.lzh」という圧縮されたファイルになっています。まずはその圧縮されたファイルを解凍するところから始めてみましょう。

ジャンルを決めたら早速HPテンプレートをダウンロードしよう!

さあ、サイトのテーマが決まったら早速テンプレートをダウンロードしましょう。自分のお気に入りのHTMLテンプレートを探してダウンロードしてください!

ここで注意してもらいたいのが、テンプレートは配布サイトによって入手方法が違います。

大体はzipファイルやLZHファイルという圧縮された形式で配布されていますが、直接サイトにアップしているサイトもありますので、ダウンロード先のサイトをよく読んでからGETしてくださいね。

では初心者の方の為にダウンロードの仕方をご紹介いたします。

まず気に入ったテンプレートが見つかりましたら、まず配布サイトの利用規約をよく読みます。

次にテンプレートのところに「DOWNLOAD」または「保存」どとと書いてあるところをクリックします。そうすると、次のような画面になると思います。

※これ、サイト開設当時の【Windows7】の画面です(汗)ただ、Windows10や11でもほぼ同じような画面が出てきます。あとMacも似たような画面が出てきます。

※ただし、パソコンのセキュリティレベルによってはこの様な画面が出てこない場合もあります。
(ちなみにnovが今使っているPCも出てこないです。だから画像を新しいものに差し替えることができません。。

ファイルのダウンロード画面

ここで保存をクリックします。

そうしたら、次に保存先を決める画面が出てくると思います。

ファイルの保存画面

ここはわかりやすいように「デスクトップ」に保存してください。

そうするとデスクトップにこのようなアイコンが出てくると思います。

ダウンロードしたLZHファイル

このアイコンは使用している解凍ソフトによって異なります。何もソフトを入れてない場合は、WindowsフォルダのZipアイコンが出てきます。

昔は(というかnovは今でも使っていますがw)Lhaplus(ラプラス)というフリーソフトがおすすめの解凍ソフトでしたが、今は【Windows標準のエクスプローラー】で開くことができます。

エクスプローラーでZipファイルを開く方法
STEP
ダウンロードしたZipファイルを【右クリック】

STEP
プログラムから開く⇒エクスプローラーとクリック

STEP
開いたエクスプローラーから中身をデスクトップや好きな場所へ【ドラッグ】して取り出す

ラプラスの場合は、ダウンロードしたアイコンをダブルクリックして解凍します。

解凍したテンプレートファイル

テンプレートファイルが出てきます。

ただ、最近はラプラスで解凍すると、ファイル名が日本語の場合【文字化け】が発生するときがあるので、初心者には推奨しません(^_^;)

HTMLやCSSを使ってテンプレートをカスタマイズしよう

テンプレートをダウンロードしたら、次にファイルをカスタマイズする必要があります。ブログテンプレートなどはそのまま使うこともできますが

HTMLファイルのテンプレートはカスタマイズが必須です。

nov

ここで自分らしいオリジナリティが出せるかでサイトのデザインが決まるといっても過言ではありません!

ダウンロードしたHTMLファイルやCSSファイルをカスタマイズしよう!

テンプレートはもちろん、ダウンロードしただけでは使えません(ブログはある程度使えますが)。自分の好きなように記事を入れたり、画像を入れたりしてカスタマイズします。

その際にあると便利なのがやはりDreamweaverホームページビルダーに代表されるオーサリングソフト(HP作成ソフト)です。

しかし、時代の流れとともにDreamweaverはサブスクモデル、ホームページビルダーも利用者がすっかり減りました。。

HTMLとCSSがわかると、より自分好みのサイトを作ることができます。

しかし、本当に自分の思い通りにカスタマイズしたいのならHTMLとCSS(スタイルシート)の知識は欠かせません。

基本的なHTMLタグの知識はこちらのページでもご紹介していますので、是非参考にしながら徐々に覚えていくといいと思います。

スタイルシートは少し難しいので、HTMLを覚えたら本やネットなどを見て少しずつ覚えていくといいでしょう。

画像は人間の視覚を刺激しますので、印象に残るサイトを構築することができます。

画像に関してはこちらのページでも紹介していますが、素材サイトなどでダウンロードしてきたものを利用すれば無料で作れます。

もちろん、自分で撮ってきてもOKです。

ホームページは画像があると無いとではサイトの雰囲気が全然違ってきますので、できるだけ画像を使いながら、人に優しいサイト作りを心がけてください。

nov

手を入れた分だけ、サイトの出来が違ってきますので、少しずつでもいいので、頑張って自分の理想に近づけていきましょう!

レンタルサーバーを借りてHPを公開しよう(レンタルサーバー、ドメインの選び方)

ホームページはプロバイダなどで提供されている無料スペースでも公開することはできますが、

自分だけのサイトをじっくり育てて生きたいなら、レンタルサーバーとドメインは欠かせません。

レンタルサーバーならcgiやphpなどが使えるので、より自由にサイトを表現することができます。

レンタルサーバーの選び方は以下のページを参考にしてみてください。

また、WordPressを使う場合はMYSQLというデータベースが必須なので、基本的に有料レンタルサーバーしか使うことができません(無料サーバーでも一部可能ですが、初心者には敷居が高すぎます)。

ホームページを公開するためのサーバーを借りよう!

ホームページはただ作っただけでは誰も知りません。多くの人に見てもらうにはホームページを公開する必要があります。

そこで無料、または有料のサーバーを借りてホームページを全世界に公開しましょう!

サーバーにファイルをアップロードすることによって初めて世界中の人があなたのHPを見ることができます。

一般的にレンタルサーバーといわれるホームページスペースは、無料と有料のものがあります。

一応プロバイダの無料HPスペースなどもありますが、これは後々ホームページを移転するときにドメインが変わってしまい、SEO的にかなり不利になるのでオススメできません。

やはり本格的にホームページを運営したいなら断然有料のレンタルサーバーをオススメします。

もちろん、無料でも全然構わないんですが、無料だと広告やいろいろな規制が入ってしまうのですし、正直、ビジネスとしては使い物になりません。

それでも別に気にならないって人は無料サーバーを借りてください。

有料の場合色々なサーバーがありますが、当然、値段やサービスによって違ってきますので、こちらでいろいろと調べてから借りてくださいね。

あと注意事項として、先ほども書きましたが大事なことなので何度でも書きますw

WordPressやMovable Typeでサイト構築する場合は、MySQLというデーターベースが使えるサーバーでないとインストールできません。

まあ最近は、大手のサーバーで最安値プラン以外ならほぼMySQLが利用可能ですので、それほど心配することはないと思いますが。。

また無料ブログならサーバーは必要ないので、そういうのが面倒な人にはオススメです(ただ、ホームページのように自由にデザインはできませんし、Webから収入を得たいを考えているのなら、無料ブログはおすすめできません)。

サーバーと合わせてドメインも取得しよう!

また、レンタルサーバーを借りると同時に必要になってくるのがドメインです。ドメインとは簡単にいうと、インターネット上の住所に当たるといえばわかりやすいでしょうか。

一人一人違うドメインを運営しているので、同じドメインというのはありません。

例えばヤフーのURLは http://www.yahoo.co.jp/ですよね。

この yahoo.co.jp の部分がドメインという事になります。

このドメイン、多くは、終わりが.comや.netなどで占められていると思います。これはなぜかと申しますと、単に名が知れていて、価格が安いからです。

例えば、ヤフーのドメインの最後は.jpで終わっていますが、この.jpは.comの3倍くらい高いのです。ですのでわたしは、.jpはほぼ持っていません(^_^;)

まあそれはさておき、皆さんもいずれドメインを取ることになると思います。

FTPソフトでサーバーにアップロードしよう

サイトが完成し、レンタルサーバーも借りたら、次はFTPソフトでファイルをアップロードします。ファイルをアップロードすることによって、はじめて世界中の人々に自分の作ったホームページが公開される事になります!

FFFTPを使ってサーバーにHPをアップロードしよう!

  • HTMLテンプレートを使ってホームページもできた
  • ドメインも取った
  • レンタルサーバーも借りた

そうしたら次にFTPソフトを使ってホームページをアップロードしましょう。

アップロードすることによって初めて、世界中の人があなたのHPを見ることができます。

ホームページをアップロードするためにはFFFTPなどに代表されるFTPクライアントソフトが必要になります。

ちなみにホームページビルダーDreamweaverなどのHP作成ソフトでもホームページをアップロードできます。

代表的なFTPソフト、FFFTPの使い方は以下のサイトを参考にしてください。

またFFFTPは、Windowsしか使うことができません。

Mac用のFTPソフトは、ハッキリいって今まで無料ではあまり良いソフトがありませんでしたが、最近は、Windowsでも利用者の多いFileZilla(ファイルジラと呼びます)が、評判も高くおすすめです。

nov

もちろんnovもMacで使っています!

特にWindowsでFFFTPに慣れていらっしゃる方は画面や操作法が似ているのですんなり使えると思います。

これらFTPソフトでHPをアップロードしたら試しに自分のHPのアドレスを入力して確認してみてください。

ブラウザに自分のホームページが出てくると結構感動しますよ!

いろいろなブラウザでサイトを確認しよう

ホームページを公開したらそれで終わり、ではありません。キチンと表示されているか、いろいろなブラウザで確認する必要があります。そして確認できたら、ようやく自分のサイトをより多くの人に見てもらうために、アクセスアップを施していくのです。

キチンと表示されるか、ブラウザで確認しよう!

実際に自分のホームページをブラウザで確認することができたら、次にいろいろなブラウザで確認してみましょう。

初心者の為に軽く説明しておきますが、ブラウザとはMicrosoft Edgeに代表されるHPを見るためのソフトです。多くの方がWindowsで最初から入っているEdgeを使ったことがあると思いますが、Edge以外にも様々なブラウザが存在するのです。

代表的なものとしてFireFoxGoogle Chromeなどがあります。

ちなみにどちらもWindows、Macで利用可能です。

ブラウザによって多少のズレが生じる場合がありますので確認をします。

ホームページはブラウザによって多少見方が変わるので、一応Edge以外に、これら2つのブラウザでもちゃんと見えるか確認した方が良いでしょう。

ブラウザによっては多少ズレが起きる可能性もありますので、その場合はスタイルシートなどで編集してください。

ただ、大体のテンプレート配布サイトは事前にこれらのブラウザで確認済との記載がしてあると思いますので、それほど神経質になる必要もないかと思います。

また、ChromeやFireFoxにはHP作成に便利なプラグインがたくさんありますので、ぜひ使っていただきたいブラウザですね。ちなみにプラグインとは拡張機能のことです。

以前は、Webデザイナーなどは好んでFireFoxを使われていましたが、最近はChrome派も多いです。またEdgeも昔のIE(Internet Explorer)よりは利用者も多いですね。

また、Macは先ほど挙げたFireFox、ChromeとMac標準であるSafariで確認するといいでしょう。

いずれにせよ

FireFox、ChromeはWin、Mac共にインストールしておいて損はありません。

さらに近年は、パソコンよりスマートフォンからのアクセスの方が、かなり多くなってきています。

当然、ジャンルにもよりますが、中には全体の9割近くがスマホからアクセスされているサイトも結構あります。

というか、最近はパソコンのブラウザ間の確認より、スマホから自分のホームページにアクセスしてサイトを確認する方が重要です!

iPhoneなら標準のSafari、AndroidならChromeか、インストールされているブラウザでOKです。

ちなみに、スマホでいちいちURLを入力するのは面倒なので、ブラウザの拡張機能(アドオン)を利用するのがおすすめです。

【QR Code Generator ブラウザ名】で検索すれば、どのブラウザでもアドオンを追加できますので、簡単にスマホから自分のサイトを確認することができますよ!

いよいよ完成!検索エンジンに登録しよう!

これで晴れてあなたのホームページが世界中で見れるようなりました!しかし、

これだけではハッキリいって知り合いぐらいしかあなたのHPを見てくれません。

そこで少しでも多くの人に見てもらうために、検索エンジンにインデックス登録される必要があります。

検索エンジンといえばYahoo!やGoogleなどありますが、どちらもインデックスされるには、基本、作って放置しておけば、いつかロボットがあなたのサイトを見つけてくれます。

ただし、近年は新規ドメインでサイトを作っても、なかなかクローラーが回ってこないので、インデックス登録されるのにも時間がかかっています。

ロボットがあなたのサイトを見つけてくれれば、勝手にインデックス登録はしてくれますが、そのロボットが来ないのです!

ですので

サイト完成の初期段階は【Google Search Console】を使ってインデックス登録へのリクエストを「手動で」やるのがおすすめです。

詳しくはGoogleで「サーチコンソール インデックス登録方法」とかで検索すれば、AIをはじめ、いくらでもやり方が出てきますw

nov

後はあなた自身で工夫してアクセスアップに励んでください!

目次