テンプレートを作る前にテンプレートを理解しないとと思いまして、忍者ブログのテンプレートの構造を解析していくことにします。
(3/15追記：作りながら分析することにしました)
テンプレートをいじるのが初めてという人にもわかるようにしたつもりです。
この記事は、ドキュメント宣言とヘッダ部分についてです。
全体像はこのようになってます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="keywords" content="<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3-->" />
<meta name="description" content="<!--$g_explanation-->" />
<link rel="stylesheet" href="http://<!--$g_user_id-->/css/" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://<!--$g_user_id-->/RSS/" />
<link rel="alternate" type="application/atom+xml" title="ATOM" href="http://<!--$g_user_id-->/ATOM/" />
<title><!--$g_title--></title>
</head>
これが何を示しているかを分析します。
まずはHTMLの冒頭部分。1行目に
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と、このように書かれてます。
これは
ドキュメントタイプ宣言の部分で、ここでどのHTMLでこのテンプレートが書かれているかを宣言しているのです。
忍者ブログでは
HTML4.01 Transitionalで書くことを宣言しています。
よって、この
HTML4.01 Transitionalの記述法に従って書かないとテンプレートがうまく作れないということになります。
とはいっても
HTML4.01 Transitionalはフレームが使えないだけで、非推奨のタグも使えるというものですのでたいていは大丈夫です。
XHTMLとはちょっと違うってぐらいでしょうか。
XHTMLとHTMLの違いが分からないという方は、気にしなくていいです。
気になる方はご自分で調べてください。
ここでは
HTML4.01 Transitionalで記述すればいいってことがわかればいいので、次の行に進んで、
<html lang="ja">
とありますが、これは
lang属性というもので言語コードを指定しています。「ja」で日本語を指定しています。
これは問題ないと思います。
さらに次の行に<head>と書いてあります。
ここからヘッダ（HEAD）部分になります。
このヘッダ部分は<head>から始まって</head>までを言います。
この部分には、ブログキーワードやタイトル、使用するスタイルシートのURL、お気に入りアイコンなどの情報がかかれます。
ページ上には表示されませんが、そのページがどのような内容なのか、誰が作っているのかなどの基本的情報を表示している情報です。
忍者ブログでは、ヘッダ部分の一行目に
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
とあります。
これはmetaとあるので
meta情報を記述しています。
meta情報にはいろいろなものを表示できます。name(http-equiv)で指定するものを、contentでその内容を示します。
ここでヘッダ部分の一行目の内容に戻ると、ここでは
Content-Typeを
text/html; charset=UTF-8とするとしてあります。
これは、言い換えると、「
UTF-8という文字符号コードでこのページは記述しています」という意味になります。
日本語の文字コードには、3種に大別されていて、UTF-8の他にShift_JisやEUC-JPがあります。Shift_Jisで書いているのに、違う文字コードを指定するとすぐ文字化けします。
ブラウザ(簡単に言えばPC)に、「
このページはUTF-8で書いてますよ」と知らせるためにこの情報を明記しているのです。
ブログパーツやブログペットを設置するときも文字コードを聞かれることがありますので、この文字コードをちょっと覚えておくといいです。
ヘッダ部分の2行目、3行目は次のようになってます。
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
これは、1行めと同じようなもので、
Content-Style-Typeはスタイルシートについてを、
Content-Script-Typeはjavascriptについてをそれぞれ表示しています。これも文字コードと同様に、スタイルシートやjavascriptを正しく表示するために必要な情報です。
ここまではどのブログであろうがホームページであろうがほぼ同じです。
次のヘッダ部分の4行目から、忍者ブログの独自タグ使われています。
<meta name="keywords" content="<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3-->" />
これも
meta情報ですが、今度は
keywordsを表示します。
keywordsは、もじどおりそのページのキーワードです。
日記を書いているなら「日記」と書くだろうし、アフィリエイトについて書いているなら「アフィリエイト」と書く部分になります。
忍者ブログでは、このキーワードを管理画面から入力できるようになってます。
それが、
<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3-->の部分に表示されます。
つまり、キーワードは３つ指定できるようになっているのです。
このキーワードの指定は、忍者ブログの管理画面から「環境設定」⇒「ブログの詳細設定」⇒「
ブログのキーワード１」、「
ブログのキーワード２」、「
ブログのキーワード２」で指定することができます。
ご自分のページ内容にあったものを入力しておけば、自動的にパソコンで表示するときにHTMLに挿入さます。
もちろん、テンプレートのHTMLに直接記入すれば３つ以上のキーワードを指定することが可能です。その場合は、<!--$g_keyword3-->の後ろに記入していけばOKです。ちなみに、管理画面から指定した他に「日記」「写真」「風景」というキーワードを指定するときは
<meta name="keywords" content="<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3--> 日記 写真 風景" />
という風にそれぞれのキーワードとキーワードの間をヒトマス空けて記入してください。
次は、
<meta name="description" content="<!--$g_explanation-->" />
となってます。また忍者ブログの独自タグが混ざってますが、今度に指定は、ブログの内容(要約)を表示するためのものです。
よくGoogleなどの検索を利用するときに表示されているのはこの部分です。
忍者ブログの場合は、ここに
<!--$g_explanation-->という独自タグを使用しています。
これは、
ブログの説明文章を表示するための変数ですので、ここには管理画面で入力したブログの説明文が表示されます。
多くのテンプレートはこの
ブログの説明文章をタイトル下に表示するようにつくってあるため、この部分をサブタイトルとして利用している方も多いと思います。サブタイトルではブログの説明というのとはちょっと違うと思った方は、この
<!--$g_explanation-->を削除して、直接テンプレートに説明文や要約をいれるといいと思います。
その場合は
<meta name="description" content="個々に要約文や説明文を直接入力してください" />
となります。SEO対策などでは、ここの文章が重要になる・・・らしいです。
個人的には、SEOをやる前に内容を充実させないと意味がないとは思いますが・・・
ここで忍者ブログのテンプレートにおいての
meta情報の指定は終わりです。
この他にも作者を示すなら、
<meta name="Author" content="作者名">
検索ロボットへの検索を拒否したい場合の、
<meta name="robots" content="noindex,nofollow">
などがあります。
ちなみに忍者ブログで作者を示すなら、
<!--$plugin_profile_nickname-->という独自タグを使って、
<meta name="Author" content="<!--$plugin_profile_nickname-->">
というタグをHTMLに入れると、忍者ブログで登録しているニックネーム(管理者名)が表示されます。
また忍者ブログのテンプレートに戻って、ここからは
link情報の指定になります。
link情報はhref属性で指定したページ文書を参照し、外部スタイルシートや、他のページ文書との関連を示します。
忍者ブログでの
link情報は次の3つです。
<link rel="stylesheet" href="http://<!--$g_user_id-->/css/" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://<!--$g_user_id-->/RSS/" />
<link rel="alternate" type="application/atom+xml" title="ATOM" href="http://<!--$g_user_id-->/ATOM/" />
上から順に、スタイルシート、RSS、ATOMのそれぞれのURLを示してます。
<!--$g_user_id-->という独自タグが入っていますがようは私の場合
IDがstartなので
・スタイルシートアドレス･･･http://start.blog.shinobi.jp/css/
・RSSのアドレス･･･http://start.blog.shinobi.jp/RSS/
・ATOMのアドレス･･･http://start.blog.shinobi.jp/ATOM/
となります。逆に言えば
<!--$g_user_id-->という独自タグは「
ID.blog.shinobi.jp」と表示されるということですね。
また、スタイルシートを忍者ブログ以外から引っ張ってくるような場合には、
http://<!--$g_user_id-->/css/という部分を変えればいいということになります。
テンプレートをひとつのブログで複数使うなどという場合には、ここをいじる必要がある・・・のではないかと。
この次に書かれているのは
title情報です。
ここに示された情報が、お気に入り(ブックマーク)に表示されるものになります。
通常はブログのタイトルですね。忍者ブログでもそうなってます。
<title><!--$g_title--></title>
<!--$g_title-->が、ブログのタイトルを表示する変数です。
このあと</head>とあり、ヘッダ部分が終わります。
なんだか、細かく分析しすぎました(-_-)」
ほとんどHTMLの解説になってます。
まとめると、
- HTMLのタイプはHTML4.01 Transitional
- 文字コードはUTF-8
- キーワードは３つまでなら管理画面から入力可能
- 説明文も管理画面から入力可能
- スタイルシートアドレスは、http://ID.blog.shinobi.jp/css/
- RSSのアドレスは、http://ID.blog.shinobi.jp/RSS/
- ATOMのアドレスは、http://ID.blog.shinobi.jp/ATOM/
といった感じになります。
次は、ページとして表示されるメイン部分の<body>の部分です。
PR
