BlogNINJAブログを使いこなそうと始めたブログ。ないブログに表示されています。新しい記事を書く事で広告が消えます。│▲2006-03-12(Sun)テンプレートを作る!!テンプレートを作る前にテンプレートを理解しないとと思いまして、忍者ブログのテンプレートの構造を解析していくことにします。(3/15追記:作りながら分析することにしました)テンプレートをいじるのが初めてという人にもわかるようにしたつもりです。この記事は、ドキュメント宣言とヘッダ部分についてです。全体像はこのようになってます。/><title><!--$g_title--></title></head>これが何を示しているかを分析します。Transitional//EN">と、このように書かれてます。これはドキュメントタイプ宣言の部分で、ここでどのHTMLでこのテンプレートが書かれているかを宣言しているのです。Transitionalで書くことを宣言しています。Transitionalの記述法に従って書かないとテンプレートがうまく作れないということになります。Transitionalはフレームが使えないだけで、非推奨のタグも使えるというものですのでたいていは大丈夫です。XHTMLとはちょっと違うってぐらいでしょうか。XHTMLとHTMLの違いが分からないという方は、気にしなくていいです。気になる方はご自分で調べてください。lang="ja">とありますが、これはlang属性というもので言語コードを指定しています。「ja」で日本語を指定しています。これは問題ないと思います。次の行に<head>と書いてあります。ここからヘッダ(HEAD)部分になります。このヘッダ部分は<head>から始まって</head>までを言います。この部分には、ブログキーワードやタイトル、使用するスタイルシートのURL、お気に入りアイコンなどの情報がかかれます。ページ上には表示されませんが、そのページがどのような内容なのか、誰が作っているのかなどの基本的情報を表示している情報です。これはmetaとあるのでmeta情報を記述しています。meta情報にはいろいろなものを表示できます。name(http-equiv)で指定するものを、contentでその内容を示します。charset=UTF-8とするとしてあります。これは、言い換えると、「UTF-8という文字符号コードでこのページは記述しています」という意味になります。日本語の文字コードには、3種に大別されていて、UTF-8の他にShift_JisやEUC-JPがあります。Shift_Jisで書いているのに、違う文字コードを指定するとすぐ文字化けします。ブラウザ(簡単に言えばPC)に、「このページはUTF-8で書いてますよ」と知らせるためにこの情報を明記しているのです。ブログパーツやブログペットを設置するときも文字コードを聞かれることがありますので、この文字コードをちょっと覚えておくといいです。ヘッダ部分の2行目、3行目は次のようになってます。/>これは、1行めと同じようなもので、Content-Style-Typeはスタイルシートについてを、Content-Script-Typeはjavascriptについてをそれぞれ表示しています。これも文字コードと同様に、スタイルシートやjavascriptを正しく表示するために必要な情報です。ここまではどのブログであろうがホームページであろうがほぼ同じです。次のヘッダ部分の4行目から、忍者ブログの独自タグ使われています。/>これもmeta情報ですが、今度はkeywordsを表示します。keywordsは、もじどおりそのページのキーワードです。日記を書いているなら「日記」と書くだろうし、アフィリエイトについて書いているなら「アフィリエイト」と書く部分になります。忍者ブログでは、このキーワードを管理画面から入力できるようになってます。<!--$g_keyword3-->の部分に表示されます。キーワードは3つ指定できるようになっているのです。このキーワードの指定は、忍者ブログの管理画面から「環境設定」⇒「ブログの詳細設定」⇒「ブログのキーワード1」、「ブログのキーワード2」、「ブログのキーワード2」で指定することができます。ご自分のページ内容にあったものを入力しておけば、自動的にパソコンで表示するときにHTMLに挿入さます。テンプレートのHTMLに直接記入すれば3つ以上のキーワードを指定することが可能です。その場合は、<!--$g_keyword3-->の後ろに記入していけばOKです。/>という風にそれぞれのキーワードとキーワードの間をヒトマス空けて記入してください。忍者ブログの独自タグが混ざってますが、今度に指定は、ブログの内容(要約)を表示するためのものです。Googleなどの検索を利用するときに表示されているのはこの部分です。忍者ブログの場合は、ここに<!--$g_explanation-->という独自タグを使用しています。これは、ブログの説明文章を表示するための変数ですので、ここには管理画面で入力したブログの説明文が表示されます。多くのテンプレートはこのブログの説明文章をタイトル下に表示するようにつくってあるため、この部分をサブタイトルとして利用している方も多いと思います。サブタイトルではブログの説明というのとはちょっと違うと思った方は、この<!--$g_explanation-->を削除して、直接テンプレートに説明文や要約をいれるといいと思います。SEO対策などでは、ここの文章が重要になる・・・らしいです。個人的には、SEOをやる前に内容を充実させないと意味がないとは思いますが・・・ここで忍者ブログのテンプレートにおいてのmeta情報の指定は終わりです。content="noindex,nofollow">などがあります。content="<!--$plugin_profile_nickname-->">というタグをHTMLに入れると、忍者ブログで登録しているニックネーム(管理者名)が表示されます。忍者ブログのテンプレートに戻って、ここからはlink情報の指定になります。link情報はhref属性で指定したページ文書を参照し、外部スタイルシートや、他のページ文書との関連を示します。忍者ブログでのlink情報は次の3つです。/>上から順に、スタイルシート、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の解説になってます。説明文も管理画面から入力可能スタイルシートアドレスは、http://ID.blog.shinobi.jp/css/RSSのアドレスは、http://ID.blog.shinobi.jp/RSS/ATOMのアドレスは、http://ID.blog.shinobi.jp/ATOM/といった感じになります。次は、ページとして表示されるメイン部分の<body>の部分です。FORM-コメント投稿-この記事へのコメント投稿フォームです。Decoration:Message:Pass:※編集時に必要です。Secret:※チェックすると管理者へのみの表示となります。*TRACKBACK-トラックバック-この記事のURLとトラックバックURLです。必要に応じてご使用くださいませ。Leaf(2)NinjaBLOG(17)プレビュー用記事(6)新規テンプレいじり(17)[テンプレート]未定(0)■Search■About●このブログについて忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。_)ペコリなお、このブログで実験もしています。常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。→こちらは記事の内容を下に移転&閉鎖しました。Blogがメインブログになってます。night-・・・現在作成中のメインHP●リンクについてこのブログはリンクフリーです。解像度:1024*768●FireFox私が普段利用しているブラウザ。Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪ダウンロードは▼からどうぞ●Pingoo!忍者ブログのPing送信先は10件まで。それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。12345678910111213141516171819202122232425262728293031■CM&TB●コメントパンくずナビをつけるMichalexcire⇒(01/18)パンくずナビをつけるViktorianitemY⇒(01/17)コメントや最新記事にNew&Upマークをつけるkirara⇒(04/06)しばらく休止いたします。photo[ブログ]今日もいろいろあったんよ。■Thanksテンプレートを作成するに当たってよく利用させていただいているサイト様です。■QRcodeQRコードをクリックするとメールフォームが開きます。メールフォームでPCから携帯にこのブログのURLを送ることができますもし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。■EntryNavigation最新記事のタイトル一覧しばらく休止いたします。(12/15)・・・何ヶ月?(06/09)NinjaBlogのカテゴリーをタグクラウド風に(02/18)プラグインタイトルを虹色の文字で(02/17)リンクバナー(02/07)トラックバックを承認制にしました。○忍者ブログで共有化中のテンプレ●Alternation-緑×白-記事番号で背景色が交互に変わるちょっとおもしろテンプレ。Leaf初の携帯用テンプレート。さわやかな感じに仕上げてみました絵文字使用。トップページにカテゴリー表示アリ。●ブルーチャイナ涼しげなチャイナ風左右メニューテンプレ。「China」の色違いのような感じですが、配置は違いますのでご注意ください。※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。⇒ピンクチャイナ●Gray2blockノート風テンプレ「Gray」の2カラム版です。●Chinaかわいい系の3カラムテンプレート。同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。⇒China-BlueVer-●Gray灰色のノート風罫線テンプレ。追記開閉式の3カラムです。●JapnBlueサッカー日本代表ユニフォームなテンプレ。※このテンプレには2カラムバージョンもあります。なしの5ブロックテンプレ。Alpha.忍者ブログ[PR]。