忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.01│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

テンプレートを作る!!

テンプレートを作る前にテンプレートを理解しないとと思いまして、忍者ブログのテンプレートの構造を解析していくことにします。
(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-Typetext/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-->の部分に表示されます。
つまり、キーワードは3つ指定できるようになっているのです。

このキーワードの指定は、忍者ブログの管理画面から「環境設定」⇒「ブログの詳細設定」⇒「ブログのキーワード1」、「ブログのキーワード2」、「ブログのキーワード2」で指定することができます。
ご自分のページ内容にあったものを入力しておけば、自動的にパソコンで表示するときにHTMLに挿入さます。

もちろん、テンプレートのHTMLに直接記入すれば3つ以上のキーワードを指定することが可能です。その場合は、<!--$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

  • キーワードは3つまでなら管理画面から入力可能

  • 説明文も管理画面から入力可能

  • スタイルシートアドレスは、http://ID.blog.shinobi.jp/css/

  • RSSのアドレスは、http://ID.blog.shinobi.jp/RSS/

  • ATOMのアドレスは、http://ID.blog.shinobi.jp/ATOM/



といった感じになります。
次は、ページとして表示されるメイン部分の<body>の部分です。
PR
*COMMENT-コメント-
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
12

02
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter