このサンプルサイトを今から加工してゆきます。


※クリックすると大きな画像が見れます



テンプレートを自由に操れるようになるための
もくじ



○まずはパーツの確認
何がどんな役割を果たすのか?】


 
  「index.html」はメインページとなる要のページ
 
  「css」ファイルで全体のデザインを整える
 
  「images」「js」「psd」は、今回そっとしておく
 
  「readme.txt」ファイルは はじめに読んでおく

○恐る恐るHTMLを操作してみる


 
  まずは「<h1>タグ」を修正して、基本の動きを覚える
 
  ホームページ公開には「ドメイン」「サーバー」が必要です
 
  <h>タグの修正は思いのほかカンタン
 
  テンプレートのどの部分が抵抗なく加工できるのか?
 
  タグの入力は基本コピーアンドペーストでやる

○タグを使った文字装飾をいろいろ試してみる


 
  タグの入力で1つだけ気をつけていただきたいことがあります
 
  <strong>~</strong> 「太字」で強調する
 
  <u>~</u> 「アンダーライン」で強調する
 
  よく利用する「改行の表示」をマスターする <br/>と<p>
 
  使ってみたい「番号付きリスト」と「箇条書きリスト」
 
  定義リストとは? 説明をするときに使うと便利
 
  フォントサイズを変えるタグはよく使う
 
  覚えておきたい「文字の色を変える」タグ



グーペの公式サイトへのリンク画像



まずはパーツの確認
【何がどんな役割を果たすのか?】




先ほどダウンロードして保存したテンプレート
を使って作業してゆきます。


ダウンロードしたテンプレートを場所を保管した画像



「index.html」はメインページとなる要のページ




「index.html」というファイルがありますが、
これがいわゆる「トップページ」になります。

トップページはwebサイトの「顔」のような、1番
主になるページです。

ちょっと開いてどういうページか見てみましょう。


開き方は、下の画像の通りお持ちのウェブブラウザ
を使います。



テンプレートのトップページを開こうとしている画像


ウェブブラウザをクリックすると冒頭の
サンプルサイトが表示されるはずです。



次は「TeraPad」で開いてみます。


テンプレートのトップページを開こうとしている画像


「TeraPad」でindex.htmlを開くと、たくさんの
文字が並んでいて、一瞬「げっ!」と思います。

でも、少し落ち着いて画面を眺めてみてください。

「黒い文字」は普通の文章だってわかるはずです。

まずは、「黒い文字」の部分を変えることから
はじめる予定です。


TeraPadでトップページを開いた画像



「css」ファイルで全体のデザインを整える




「css」フォルダを開くと、「○○○.css」
で終わるcssファイルがあります。


cssフォルダの画像


cssファイルのことを「スタイルシート」と
いいます。

スタイルシートはwebサイト全体のフォント
サイズなどのデザインを決める役割を果たして
います。

先ほどのトップページindex.htmlの
「HTMLファイル」と少し様子が違いますね


cssフォルダの画像


私は、文章の文字サイズが少し小さいと感じたので
文字サイズだけ数ヶ所だけ修正しましたが、今回は
HTMLファイルの修正を中心に説明しますので、
cssは文字サイズ以外触りません。




「images」「js」「psd」は、今回そっとしておく




画像などが格納されているファイルですが
今回は全く触りません。

サイトを構成するのに必要なフォルダなんだ
って考えておいてください。



「readme.txt」ファイルは はじめに読んでおく




テンプレート製作者さんからの注意事項です
軽く目を通しておいてください





グーペの公式サイトへのリンク


恐る恐るHTMLを操作してみる




まずは「<h1>タグ」を修正して、基本の動きを覚える




最初にわかりやすい<h1>タグを
修正して基本の動きをマスター
しましょう。


h1タグを修正する画像


まず、<h1>~</h1>の「~」の部分を
好きなタイトルに変更してみてください。

上の例では「HTMLファイルの修正のしかた」と
入力しています。

<h1>タグの「黒い文字」の部分だけなら
好きなように修正しても大丈夫です。

何を入れたらいいか思いつかない人は
例の通り入力してみてください。

変更はできましたか?

変更が終わったら「TeraPad」で「保存」
します。


h1タグを修正を保存する画像


「保存」ができたら変更が反映されて
いるか確認してみます。

今度はindex.htmlをウェブブラウザで
開いてみます。

「ほら、変更したタイトルが変わってるでしょ」


h1タグ修正がブラウザに反映した画像


私は初めてこの作業をしたとき「HTMLの
操作が自分にもできるかも」とけっこう
感動しました。

あなたはどうですか?

まだそんな感覚は持てませんか?


続けてすぐ下にある<p>~</p>で囲まれた
部分も変更してみましょう。

先ほどと同じように「TeraPad」で「保存」して
ウェブブラウザで確認します。

こんどは既にブラウザが開いているので、
「画面の更新」をして確認します。


※クリックすると大きな画像が見れます
h1タグの下の部分を修正してブラウザを更新する画像


「TeraPadで保存」→「ブラウザで確認」の
動作は今後もよく使いますので、早く慣れましょう。



ホームページ公開には「ドメイン」「サーバー」
が必要です




ウェブブラウザで作業をしていますが、
今やっている作業をいくらやっても、あくまで
自分のパソコン内の作業なので、他の人からは
見ることができません。

「このページが他の人に見られたら嫌だな」って
感じていた方はご安心ください。

ホームページを他の人から見てもらえるように
するためには、「ドメイン」と「レンタルサーバー」
が必要です。

また、レンタルサーバーに掲載するために
「アップロードの作業」も要ります。

ひとまずはそういう作業をしないと「公開」が
できないんだと覚えておいてください。

ここでは、「HTMLを修正して公開前のwebサイトを作る」
ことをメインにお伝えしてゆきますので、
ドメインやサーバーの知識は必要ありません。



ドメイン取得とレンタルサーバーを使用
しようと思うと通常お金がかかります。

サイト公開しようとお考えの方はぜひ取り組んで
みてください


サーバーでつながるネットのイメージ画像

「サーバーでパソコン同士がつながる世界が『ネット』」


ご参考まで、私が運営しているサイトに参考となる
記事がたくさんありますので、興味がある方は
ご確認ください。いくつかご紹介しておくます


そもそもホームページを作ることとはどういうこと?
ホームページ作成ソフト購入までにしておきたい「4つの準備」
いまさら聞けない「ドメイン名」超入門
これだけは知っておきたい!レンタルサーバーの基礎知識



<h>タグの修正は思いのほかカンタン




先ほど<h1>タグを修正してもらいましたが
<h2><h3>・・<h6>まで「css」で表示の
しかたが決めてあります。

下の画像のように<h2>が下線の2重線、
<h3>からは、フォントの大きさが違う
見出しになっています。


<ウェブブラウザの表示>        <TeraPadの表示>
hタグの画像矢印hタグの画像


<h2>タグの中身を変更して、「TeraPadで保存」
「ブラウザで確認」すると下のように<h2>タグが
表示されます。


<TeraPadの表示>
h2タグを修正した画像

        ↓↓↓

<ウェブブラウザの表示>
h2タグを修正した画像



テンプレートのどの部分が抵抗なく加工できるのか?




テンプレートの加工もだんだん慣れて
きたことと思います。

これからタグを使った加工もやって
ゆきますが、なにも知らない人が
自由に加工していいといわれても
適当にやったら、元に戻せなく
なりそうで怖いですよね。

基本的には本文の部分はいじっても
大丈夫ですが、具体的にいうと下の
画像の<h2>タグより下は、自由に
作りこむ部分です

上の部分を触ってもいいのでしょうが
HTMLに慣れるまでは、加工しないほうが
無難です。


さわって大丈夫な本文部分を示した画像


では、下はどこまでが大丈夫な部分でしょうか?

画像の</p>の上の部分が本文にあたります
ので、その部分が自由に加工できる部分と
考えてください。


さわって大丈夫な本文部分を示した画像


慣れていないと怖くてHTMLを触りにくい
と感じている方は多いと思いますが、

下の画像のように、加工できる部分に
思い切り「enter(改行ボタン)」で
スペースを空けてから作業すると、
やりやすいですよ。


さわって大丈夫な本文部分を示した画像



タグの入力は基本コピーアンドペーストでやる




今からタグの入力をたくさん行いますが
基本コピペで作業します。

手打ちで頑張ると、誤入力で上手くいかない
ことが多いです。

テンプレートにたくさんタグの入力サンプル
がありますので、そこからコピペしてタグを
使うようにしましょう。



タグを使った文字装飾をいろいろ試してみる




みなさんお気づきかと思いますが、HTMLの命令は
基本「<○>~</○>」のスタイルで、文章などを
はさみ込みます。

これからご紹介します文字装飾も一部を除き同様です

<h>タグの修正では「黒い文字」の部分だけ
修正していきましたが、これからは実際に文章を
入力してからタグをつけていきます。



タグの入力で1つだけ気をつけていただきたいことがあります




HTMLのタグは<○>で始まり</○>で閉じる
とお伝えしました。

作業の途中で、対(つい)になっているどちらかが正しく
入力されていないと、サイト全体が崩れることがあります。

もし、作業中にサイトが崩れたら、タグがきちんと
対になっているかどうか確認すれば、たいていどこかに
入力漏れがあったりしますので、自分でも修正できます。

落ち着いて対応すればたいてい大丈夫です。

よくあるのが、「/(スラッシュ)」が抜けていたり、
「<」が2重で記載してあったり・・ほとんどが
ささいな入力ミスです。

当然ですが、サンプルテンプレートの入力例を消すときも、
<○>と</○>を対にして削除してゆきます。

もう片方が離れていることも多いので、注意深く見て
対(つい)で両方を消すようにしましょう。



<strong>~</strong> 「太字」で強調する




<strong>~</strong>
で囲んだ文字は、太字になります。

文字を強調したいときに使ってください。



<TeraPadの表示> strongタグを示したした画像
矢印
<ウェブブラウザの表示>

これから、今ご覧のwebサイトを作るところを
ご説明してゆきますので、ひとつひとつ試して





例文を実際に入力するときは、「ENTER」キーで
一度大きくスペースを空けてから作業すると
やりやすくていいと思います


画面に大きなスペースを空けた画像


大きく開けたスペースに、まずは文章を入力し
その後でタグをコピペするとスムーズです。


strongタグを入力する手順を示した画像



<u>~</u> 「アンダーライン」で強調する




アンダーラインを引いて強調するときに
使うタグです。

当サイトでは<h3>タグとあわせて使っています


<TeraPadの表示>
アンダーラインのタグを示した画像
矢印
<ウェブブラウザの表示>

<u>~</u> 「アンダーライン」で強調する



上のTeraPadの表示で「&lt;」「&gt;」が
気になった方は多いと思います。

半角の「<>」は普通にTeraPadで入力
すると、タグとして認識されてしまいますので
ウェブブラウザで<>として表示できません

全角で<>と入力してもいいのですが、全角で
入力したものをコピーして貼り付けると、命令文
として認識されませんので、タグをコピペして
貼り付けた人が困ることになります


カギかっこを示した画像


ですから<>を表示する際に「&lt;」
「&gt;」を使うのです。

おぼえておくと便利ですよ。



よく利用する「改行の表示」をマスターする <br/>と<p>




HTMLで文章を書いて、いくらTeraPad上で
改行しても、ブラウザで表示すると改行に
なっていません。

HTMLの文章を改行するのに利用するのが
<br/>です

下の画像のようにめちゃめちゃ多用しています。


※クリックすると大きな画像が見れます
br改行とpタグの説明

        ↓↓↓

※クリックすると大きな画像が見れます
br改行とpタグの説明


単に<br>で表記するとしている教材も
多いですが、このテンプレートは<br/>を
使用しているのでそれに従っています。



次は<p>ですが、<p>タグは段落を示すタグで、
<p>~</p>で囲まれた部分を1つの段落と
見なして、</p>の後には自動で余白ができます。

このテンプレートでは、<p>~</p>で囲まれた部分
のフォントが少し小さく表示されるよう設定されて
いますので、文章は段落<p>で囲むようにしました



使ってみたい「番号付きリスト」と「箇条書きリスト」




「番号付きリスト」と「箇条書きリスト」も
このサイトで使ってみました。

オリジナルのテンプレートにありますので、
コピペして使ってみてください。


<TeraPadの表示>
リストのタグを示した画像
矢印
<ウェブブラウザの表示>

普通のリスト

  • 普通のリスト1
  • 普通のリスト2
  • 普通のリスト3

番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3
    li要素の中はブロックレベルのタグを使用することが出来ます。
    例えば、<p>タグも記述することが出来ます。



定義リストとは? 説明をするときに使うと便利




定義リストは、よく用語の説明などに使用します。

当サイトのトップページの始めのほうに使って
いますので、そのまま使用例として掲載します。

例では背景がグレーで囲まれた部分で、用語の説明を
しています。


<TeraPadの表示>
定義リストのタグを示した画像
矢印
<ウェブブラウザの表示>

テキストエディタとは?
コンピュータで文字情報(テキスト)のみのファイル、 すなわちテキストファイルを作成、編集、保存するためのソフトウェア (プログラム)です。 文字情報の入力、削除、コピー、貼り付け、検索、 置換、整形などの機能を備えています。今回はwebサイトを作るHTML言語 を操作するのに使います。

※Wikipediaのコメントを引用しました



フォントサイズを変えるタグはよく使う




フォントサイズを変えるタグもよく
使うタグです

<span style="font-size:○○px">~</span>で表します

数字の部分を変えるといろいろな大きさの
文字に変えることができます

黒字の「大きな字」の部分にフォントサイズを
変えたい文字を入力します


<TeraPadの表示>
フォントの大きさを変えるタグを示した画像
矢印
<ウェブブラウザの表示>
大きな字



私は文中で<strong>タグと
あわせて使う使い方もしてみました


<TeraPadの表示>
※クリックすると大きな画像が見れます
リストタグとstrongタグをあわせて使った例の画像
矢印
<ウェブブラウザの表示>
  • 普通の画像処理は軽くて使いやすい「JTrim」
  • 文字入れは多機能な「PhotoScape」



覚えておきたい「文字の色を変える」タグ




今回は使っていませんが、文字の色を変える
タグもよく使います

<span style="color:カラーコード">~</span>で表します


<TeraPadの表示>
フォントの色を変えるタグを示した画像
矢印
<ウェブブラウザの表示>
文字の色を赤にする



カラーコードについては無料ソフト
を使って、コードをコピペすると
いいでしょう。

ネットで探したカラーコード生成ソフト
「ColorMaster」をご紹介しておきます。


ColorMasterを使用している画像

無料ダウンロードはこちらから→ Vector ソフトを探す!




タグの使用ができるようになったら

次のステップはこちら→画像の加工とリンクの貼り方を学んでみる!




グーペの公式サイトへのリンク画像

Category

管理人deep

管理人deep

管理人の「deep」です。
よろしくおねがいします。

3児の父、現役サラリーマン アフィリエイーターです。

今から4年前、HTMLによるサイト作成に多くの時間を投入しましたが、あえなく挫折。

2年後に再びホームページ作成に取組み、今では毎日600人もの人が集まるサイトを作ることができました。

この経験を生かして、これからホームページを作ろうとお考えの人たちに、できれば最短距離でサイト公開して欲しいと考えています。

運営サイトの「ホームページの作り方」では、サイト作成のポイントやコツをわかりやすくご説明してますので、きっと「稼ぐホームページ」が作れるようになりますよ



私がおすすめするソフト

SIRIUS

SIRIUSのイメージイラスト

HTMLでサイトを作成するソフトで、私がこれまで一番よく使ってきたソフトです。

直感的な操作で簡単に高品質なサイトを作れるのが最大の特徴です。

操作性が良いのでwebサイト作成のストレスがとても少ないのが特徴です。

入力が必要な項目はポイントが押さえてあり、SEOにも強いという特徴がありますので、上位検索を目指して稼ごうとお考えの方にはおすすめのソフトです

バージョンアップで追加料金が発生したことはないので安心して使うことができるのも魅力です。

サポートフォーラムも充実しており、わからないこともフォーラムでで解決できます。

私が実際にSIRIUSを使って作成したホームページをぜひご確認ください


シリウス(SIRIUS)でホームページを実際に作成した使用感を記事にしました

私がおすすめするソフト

自分で更新できる最短ホームページテンプレート

自分で更新できる最短ホームページテンプレートの商品イメージ画像

どうしてもHTMLをマスターして、一生ものの知識を身につけたいとお考えのあなたにぜひおすすめします!

この商品は「ソフト」ではなく、HTMLのテンプレートを直接加工してwebサイトを作ります。

最大の特徴は「動画解説」です。解説の大部分が動画で、難解なHTMLが簡単にマスターできます。

購入して試してみましたが、あまりにスイスイできてしまったので驚きました

私が「自分で更新できる最短ホームページテンプレート」で作成したレビューページをぜひご覧ください


自分で更新できる最短ホームページテンプレート 特典付きレビュー

私がおすすめするソフト

賢威7.1、8

賢威8のイメージ画像

wordpressでホームページを作ってみようかな?とお考えのあなたには断然おすすめのソフトです。

wordpressのデザイン性の高いページが作れるほか、カスタマイズもできるので、上級者まで対応できます。

テンプレートは基本無償バージョンアップ。追加費用がかからない安心感がいいです。

特に初心者の方には「SEOマニュアル」と「サポートフォーラム」がついているのが心強いです。

マニュアルは正統派のSEOが解説してあり、正しく実践することで、検索エンジンの上位表示を目指すことができます

サポートフォーラムはわからないことにぶつかったときに頼りになります。たいていの疑問はここで解決できます。

フォーラム利用は賢威購入者なら無料でできます

私が「賢威」で作成したレビューページをぜひご覧ください


賢威7を実際に使い、webサイトを作った感想を書きます

私がおすすめするソフト

グーペ

グーペー公式ページへのリンク画像

お店のホームページに強みを持つホームページサービスです。

テンプレートも豊富で、定型のフォームに入力していくと、デザイン性の高いきれいなお店のホームページが出来上がります。

忙しいお店の経営の合間に更新をすることができるよう、シンプルに作りこみがされています。

初心者でホームページのことがよくわからない方でも、ワードやブログの感覚で入力が可能です。

めんどくさいドメインの契約、サーバー設定は不要。

更新はスマホでもできてかんたん!副管理者を置くことでスタッフの方が更新することも可能です

お店のホームページをご検討されている方は、ぜひ選択肢の一つに入れてください。

グーペー(Goope)でも実際にホームページを作りました。ぜひ参考にしてください。


グーペを実際に使い使用感を記事にしました

ホームページ作成ソフトの選び方

パソコンの前でこちらに向かってOKサインをする若い女性の画像

ホームページ作成ソフト選びにこちらのページもぜひ参考にしてください

google検索でも上位表示されているページです

ホームページ作成ソフト 簡単で便利なおすすめソフトの選び方

ホームページ作成ソフト徹底比較!使いやすいソフトはどれ?

比較して考える若い女性

あなたの探しているソフトはどんなソフトですか?ホームページ作成ソフトにはそれぞれのソフトの特徴があります。

SIRIUS・賢威8・グーペ(Goope)・jimdo・wixなど人気主要8商品を徹底比較!実際にソフトを使って作成したwebサイトでソフトの特徴も詳細にご説明します

ホームページ作成ソフトを徹底比較!使いやすいソフトはどれ?

ページのトップへ戻る