上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テンプレートを、「1」から作ってみようという企画です。
 これを読むことで、当サイトの「カスタマイズ向けテンプレート」をより有効に使って貰おうという主旨です。
 また、テンプレートの構造やスタイルに対する理解が高まるので、テンプレートが作れるようにまでならなくとも、テンプレートが「読める」までにはなると思います。
 テンプレートが読めれば、カスタマイズは自由に思った通りに出来るようになってきます。

■それぞれの項目へのリンクはこちらから。

テンプレートの基礎
FC2テンプレートを1から作ってみる
ページの構成とレイアウトを考える
DIVブロックで骨格を作る
HTMLとCSSファイルの編集を同時進行しよう
テンプレート内のアイテム
【ヘッダー】
ヘッダー、フッターを作成する
【メインコンテンツ】
記事表示部分を組み立てる
カテゴリ・サーチ・全記事表示などに分岐させる
見やすい全記事表示部分を組み立てる
RSSを出力させるタグをコピペする

【コメントエリア】
コメント、トラックバック表示エリアの組み立て
コメントフォームをデザインする
【サイドバー】
サイドバーにプラグイン表示をする
【フッター】
ヘッダー、フッターを作成する
機能(ほぼ)全部のせテンプレート
カスタム全部のせ


 まずは、一番最初の「裸のテンプレート」を作成していきます。




基礎の基礎


<html>
<head>
 ①
</head>
<body>
 ②
</body>
</html>

 まずはHTML文書の基本、「head」と「body」を入れていきます。

① 「head」内は、画面には直接表示されない「ページのタイトル」とか「ページの概要」を入れる、多目的な情報ボックス。

② 「Body」内は、実際にタグやテキストを書いていく、画面に実際に表示される部分です。



①Head内


 ここは、よく分からないウチは、「再配布可能」として公開されているテンプレートの記述をそのまま利用していきましょう。
 ざっと、簡単な説明のみ入れておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

どういうタグを利用してページを作成するか、IEやファイアフォックスなどに伝えるタグです。
 ちなみにこれは、「新しめのタグ使用」で「ブロックレベルの厳密な決まり事を守らなくても良い」「タグ <frameset> は使用しない」と言う宣言だそうです。
 互換モードというのもありますが、兎に角ブラウザ間での表示の違いが激しいので、あまりお勧めはしません。

↓ 下の <html> にくっついているのは、上の宣言とセットになっています。決まり文句的な物と解釈して良さそうです。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%template_language>" lang="<%template_language>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<%template_charset>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<!--not_permanent_area--><%introduction><!--/not_permanent_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />

 メタ情報。
 文字コードは○○です。とか、記事を書いた人のニックネームは○○さんです。とか、ページの概要は○○です。等という情報が書かれています。SEO上重要になってきます。

 ちなみに、「キーワード」を追加で設定出来そうですが、内容が違う全ページにまたがって全く同じキーワードを設定するのもあまり意味がないかも知れません…

<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title>

 ページのタイトル情報です。各ページごとに記事タイトルとブログタイトルの情報が同時に表示されるようにしてあります。

<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<link rel="top" href="<%url>" title="Top" />
<link rel="index" href="<%url>?all" title="<%template_index>" />

 リンクの情報です。トップページは「http://○○」ですとか、インデックス(目次ページ)全記事表示ページですとかが書かれています。

</head>
<body>
 ②
</body>
</html>


※これらは、すべて FC2ブログ「環境設定の変更」で設定した値やキーワードが自動的に入るようにFC2ブログ独自タグが挿入されているので、いじらなくても大丈夫。


 と言うわけで、これが「1」のテンプレート、素っ裸で何も表示される物が入っていないテンプレートのひな形の完成です。

<!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="<%template_language>" lang="<%template_language>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<%template_charset>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<!--not_permanent_area--><%introduction><!--/not_permanent_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<link rel="top" href="<%url>" title="Top" />
<link rel="index" href="<%url>?all" title="<%template_index>" />
</head>
<body>

</body>
</html>



■次回は、FC2ブログ専用独自タグを利用した、「ブログの構成」を考えていきます。
ページの構成とレイアウトを考える
このエントリーをはてなブックマークに追加
Sat.01.01.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。