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


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



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



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


 
  「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人もの人が集まるサイトを作ることができました。

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

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

ページのトップへ戻る