FC2テンプレートを１から作ってみる

スポンサー広告

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

　テンプレートを、「１」から作ってみようという企画です。
　これを読むことで、当サイトの「カスタマイズ向けテンプレート」をより有効に使って貰おうという主旨です。
　また、テンプレートの構造やスタイルに対する理解が高まるので、テンプレートが作れるようにまでならなくとも、テンプレートが「読める」までにはなると思います。
　テンプレートが読めれば、カスタマイズは自由に思った通りに出来るようになってきます。

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

テンプレートの基礎
①FC2テンプレートを１から作ってみる ②ページの構成とレイアウトを考える ③DIVブロックで骨格を作る ④HTMLとCSSファイルの編集を同時進行しよう
テンプレート内のアイテム
【ヘッダー】 ⑤ヘッダー、フッターを作成する
【メインコンテンツ】 ⑦記事表示部分を組み立てる ⑧カテゴリ・サーチ・全記事表示などに分岐させる ⑨見やすい全記事表示部分を組み立てる ⑩RSSを出力させるタグをコピペする【コメントエリア】 ⑪コメント、トラックバック表示エリアの組み立て ⑫コメントフォームをデザインする	【サイドバー】 ⑥サイドバーにプラグイン表示をする
【フッター】 ⑤ヘッダー、フッターを作成する
機能（ほぼ）全部のせテンプレート
カスタム全部のせ

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

基礎の基礎

　まずは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>　にくっついているのは、上の宣言とセットになっています。決まり文句的な物と解釈して良さそうです。

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

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

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

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

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

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

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

<!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ブログ専用独自タグを利用した、「ブログの構成」を考えていきます。
ページの構成とレイアウトを考える