テンプレートを、「１」から作ってみようという企画です。
これを読むことで、当サイトの「カスタマイズ向けテンプレート」をより有効に使って貰おうという主旨です。
また、テンプレートの構造やスタイルに対する理解が高まるので、テンプレートが作れるようにまでならなくとも、テンプレートが「読める」までにはなると思います。
テンプレートが読めれば、カスタマイズは自由に思った通りに出来るようになってきます。
■それぞれの項目へのリンクはこちらから。
まずは、一番最初の「裸のテンプレート」を作成していきます。
まずはHTML文書の基本、「head」と「body」を入れていきます。
① 「head」内は、画面には直接表示されない「ページのタイトル」とか「ページの概要」を入れる、多目的な情報ボックス。
② 「Body」内は、実際にタグやテキストを書いていく、画面に実際に表示される部分です。
ここは、よく分からないウチは、「再配布可能」として公開されているテンプレートの記述をそのまま利用していきましょう。
ざっと、簡単な説明のみ入れておきます。
※これらは、すべて FC2ブログ「環境設定の変更」で設定した値やキーワードが自動的に入るようにFC2ブログ独自タグが挿入されているので、いじらなくても大丈夫。
と言うわけで、これが「１」のテンプレート、素っ裸で何も表示される物が入っていないテンプレートのひな形の完成です。
■次回は、FC2ブログ専用独自タグを利用した、「ブログの構成」を考えていきます。
ページの構成とレイアウトを考える
これを読むことで、当サイトの「カスタマイズ向けテンプレート」をより有効に使って貰おうという主旨です。
また、テンプレートの構造やスタイルに対する理解が高まるので、テンプレートが作れるようにまでならなくとも、テンプレートが「読める」までにはなると思います。
テンプレートが読めれば、カスタマイズは自由に思った通りに出来るようになってきます。
■それぞれの項目へのリンクはこちらから。
| テンプレートの基礎 | |
|---|---|
| ①FC2テンプレートを１から作ってみる ②ページの構成とレイアウトを考える ③DIVブロックで骨格を作る ④HTMLとCSSファイルの編集を同時進行しよう | |
| テンプレート内のアイテム | |
| 【ヘッダー】 ⑤ヘッダー、フッターを作成する | |
| 【メインコンテンツ】 ⑦記事表示部分を組み立てる ⑧カテゴリ・サーチ・全記事表示などに分岐させる ⑨見やすい全記事表示部分を組み立てる ⑩RSSを出力させるタグをコピペする 【コメントエリア】 ⑪コメント、トラックバック表示エリアの組み立て ⑫コメントフォームをデザインする | 【サイドバー】 ⑥サイドバーにプラグイン表示をする |
| 【フッター】 ⑤ヘッダー、フッターを作成する | |
| 機能（ほぼ）全部のせテンプレート | |
| カスタム全部のせ | |
まずは、一番最初の「裸のテンプレート」を作成していきます。
基礎の基礎
<html>
<head>
①
</head>
<body>
②
</body>
</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">
<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>
どういうタグを利用してページを作成するか、IEやファイアフォックスなどに伝えるタグです。
ちなみにこれは、「新しめのタグ使用」で「ブロックレベルの厳密な決まり事を守らなくても良い」「タグ <frameset> は使用しない」と言う宣言だそうです。
互換モードというのもありますが、兎に角ブラウザ間での表示の違いが激しいので、あまりお勧めはしません。
↓ 下の <html> にくっついているのは、上の宣言とセットになっています。決まり文句的な物と解釈して良さそうです。
ちなみにこれは、「新しめのタグ使用」で「ブロックレベルの厳密な決まり事を守らなくても良い」「タグ <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上重要になってきます。
ちなみに、「キーワード」を追加で設定出来そうですが、内容が違う全ページにまたがって全く同じキーワードを設定するのもあまり意味がないかも知れません…
文字コードは○○です。とか、記事を書いた人のニックネームは○○さんです。とか、ページの概要は○○です。等という情報が書かれています。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ブログ独自タグが挿入されているので、いじらなくても大丈夫。
と言うわけで、これが「１」のテンプレート、素っ裸で何も表示される物が入っていないテンプレートのひな形の完成です。
<!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
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
