イメージ画像

自作サイト作成 HTML宣言文編

サイトに来てもらえた方にお願いがあるので
応援ポチの前に編集後記まで読んでもらえると助かりますm(__)m

PPCでアフィリすやるにしてもブログやサイトでするにしても
テンプレートが無いとできません。

無料で探せば出てくるけれど・・・
書かれている言葉の意味が理解できなくて
思い通りに修正できない・・・

という方はまずホームページでも作ってみながら
覚えてもらえれば早く覚えることができます。

『そんなこと言っても宇宙語なんか解読できない。』
『5分で頭痛が起こります。』という方に基礎的なことを綴ってみます。

とりあえずHPが作れるようになれば
次の段階のMT等のブログは独自タグがありますが
それぞれ必要なところをそのブログにあわせて
書き直してもらえれば作れますから^^

で・・・ここから私の理解している形で書きますので
正式名称での言い方では無いことがしばしばあると思いますので
そのあたりの(゜゜;)\(--;)ナンデヤネン!はナシで・・・

ではまず初めにこちらのサイトのページソースを表示して下さい。
IEならページ→ソースの表示
クロームなら開発/管理→ソース表示で見てください。

●画像

基本的なサイトの構成はこのようになっているかと思います。
(タグの範囲を理解しやすくするためにこんな色付けにしています)

私的には各種ブログの独自タグを埋め込む作業を除けば、
ここまで理解できるようになっていれば大きな山場は超えたと思います。

残るは細かい調整をしたり使いやすくするために色んなタグを定義しておいたり
SEO的にどのようにするのかとかそういう調整作業になりますので。

一番上のソースから順番に見ていきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

この宣言文は『厳密型』『移行型』『ボックス型』の3種類ありますが
上記の移行型で作成するようにしましょう。

HTMLという古い手法ではなくXHTMLという新しい書き方にしようと
なってきているのですが、
ブラウザがXML方式に対応しきれていない
(未だに古いブラウザを使っている人がいる)ので
推奨されていないタグ方法でも使えるようにしておくと便利だからです。

でこれにセットで<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">と ソースで表示がされていないですが
<?xml version="1.0" encoding="Shift_JIS"?>があります。

<html・・・>は要素名がどのXML応用言語なのかを示すものですが・・・
ややこしいのでそのまま使って下さい^^;
ちなみに"ja"とはジャパニーズの"ja"です。

<?xml・・・>はこのHTMLのバージョンを示す文章で、
Shift_JIS(シフトJIS)・euc-jp(日本語EUC)・utf-8(UFT-8)といった
文字コードがあります。

一般的なのはシフトJISですがMTだとUFT-8になりますし、
CGIプログラムを組み合わせる方は日本語EUCを使う方もいます。

まずサイト表示させるための宣言文として
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
の順番で3文を記入して下さい。

でいきなり難しいことを言っておいてなんなのですが・・・
この3文を書かなくてもブラウザで表示することは可能です^^;

ただブラウザの認識を高めることでブラウザごとの
表示のズレを少なくさせるための宣言文なんです。

なのできちんと書いておきましょう^^

HTMLを知らない人はいきなり『なんじゃコリャ?』の内容でしょうが
私も初めてテンプレートを作成したときこの段階で
テンパッていました(滝汗

『HTML 書き方』とかで検索すると
サイトによってこの部分がバラバラで
どれが正しいのかすらわからずグチャグチャでした^^;

ある意味今日の記事と次の『ヘッド』の部分までが一番理解しにくい
半強制的に書かないといけない部分なので
これを超えれば後は自分なりのデザインとなりますので
頑張ってください^^

<<編集後記>>

最近コメントを書かずに応援ポチだけをして回っているのですが
カスタマイズの記事はあっても作成の仕方の記事が殆どないので
タメになるかな?ということで書いてみました。

で冒頭に書いたお願いなのですが・・・

『自作テンプレートを作成してみよう』と考えたら
どの形で作成されます?

HPですか?ブログですか?
ブログだとどのブログですか?

もしよければ『置き手紙』でメッセージを貰えると
嬉しいです。

その情報をどうするのか…
それは・・・まぁお楽しみにということで^^

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

タグ

2010年1月29日

ユウ (16:11) | コメント(0)

カテゴリ:06.自作テンプレ作成編

コメントする




« PPCの規約変更・掲載不可 | ホーム | 自作サイト作成 head文編 »

このページの先頭へ