テンプレート＠忍者ブログ http://axia610.blog.shinobi.jp/ 忍者ブログのSEOに配慮したシンプルなテンプレートを作成しています。 Fri, 05 Jun 2009 05:42:04 GMT ja © Ninja Tools Inc. 【テンプレート】ごちそうさま cat_g_b_ss.jpg  cat_b_o_ss.jpg  cat_p_b_ss.jpg

猫がテーマのテンプレートです。ヘッダには透過画像を使っていますので、背景の色をお好みで自由に変えることが可能です。猫のシルエットが白色なので、背景色は若干、濃いめにする方が良いと思います。CSSに簡単なコメントを入れておきました。

  • 2009.06.10
    IEでの閲覧時にレイアウトが崩れてしまっていたのを修正。
  • 2009.06.10
    IEでの閲覧時にコメント欄のレイアウトが崩れてしまっていたのを修正。
    プラグイン表示箇所の行間を修正。

Another HTML-lint gateway　100点

cat_score_ss.jpg

CSS Validation Service 合格

Valid CSS!

Markup Validation Service 合格

Valid XHTML 1.0 Transitional

]]> テンプレート http://axia610.blog.shinobi.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/%E3%80%90%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%80%91%E3%81%94%E3%81%A1%E3%81%9D%E3%81%86%E3%81%95%E3%81%BE Fri, 05 Jun 2009 05:42:04 GMT axia610.blog.shinobi.jp://entry/14 【パーツ】カテゴリーナビゲーションバー navi_ss.jpg

ナビゲーションの項目は、検索エンジンにサイトリンクとして登録される可能性があるので、可能なら設置しておきたい。でも、ナビゲーションリンクはリストの管理が面倒臭い。そこで、カテゴリー項目をリストに利用した疑似的なナビゲーションバーを作ってみた。検索エンジンにサイトリンクを生成してもらうのが目的なので、これで十分かと。

HTML

<div id="ListNavi">
<ul>
<!--plugin_category-->
   <li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title--></a></li>
<!--/plugin_category-->
</ul>
</div>

CSS

/**************************************************************************************
ナビゲーションバー用デザイン
**************************************************************************************/
/*ナビゲーションバー全体の設定*/
#ListNavi {
width:770px;
}
/*リスト全体の設定*/
#ListNavi ul{
list-style: none;
margin: 0;
padding: 0;
}
/*リスト個々の設定*/
#ListNavi li{
width: 152px;
height: 25px;
float: left;
margin: 0;
padding: 0;
font-size: 80%;
text-align: center;
color: #EEEEEE;
display: block;
border:outset 1px #333333;
}
/*リンクの設定*/
#ListNavi a {
text-decoration: none;
color: #EEEEEE;
display: block;
width: 100%;
padding: 5px 0;
}
/*カーソルが合っている状態のリンクの設定*/
#ListNavi a:hover {
color: #EEEEEE;
border:inset 1px #333333;
background-color:#383838;
}

幅や色は、使用しているテンプレートに合わせて設定してください。背景色とボーダーを使ってますが、画像を使ったほうが見栄えが良いと思います。

]]> パーツ http://axia610.blog.shinobi.jp/%E3%83%91%E3%83%BC%E3%83%84/%E3%80%90%E3%83%91%E3%83%BC%E3%83%84%E3%80%91%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%90%E3%83%BC Thu, 04 Jun 2009 01:52:29 GMT axia610.blog.shinobi.jp://entry/13 【テンプレート】シャーロック・ホームズ Holmes_ss.jpg

シャーロック･ホームズをテーマにしたテンプレートです。２カラムの左メニューで、折りたたみ式のメニューを実装しています。横並び型休日表示カレンダーは、小粋空間様と徒然日記様のスクリプトとHTMLソースを利用させて頂きました。この場を借りて感謝いたします。

メニューの開閉の初期状態は、Plugin1,2,3は開いた状態で、Plugin4,5は閉じた状態になります。初期状態はHTMLの修正で変更できます。

Another HTML-lint gateway　99点

減点は、プラグインの開閉と横並びカレンダーにスクリプトを利用している為。

Holmes_score_ss.jpg

CSS Validation Service 合格

Valid CSS!

Markup Validation Service 合格

Valid XHTML 1.0 Transitional

]]> テンプレート http://axia610.blog.shinobi.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/%E3%80%90%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%80%91%E3%82%B7%E3%83%A3%E3%83%BC%E3%83%AD%E3%83%83%E3%82%AF%E3%83%BB%E3%83%9B%E3%83%BC%E3%83%A0%E3%82%BA Fri, 29 May 2009 12:43:48 GMT axia610.blog.shinobi.jp://entry/11 【テンプレート】ライムグリーン（可変左メニュー） lime_L_ss.jpg

シンプルな、ライムグリーンのテンプレートです。２カラムで左側にメニューを配置しています。記事部分の幅が可変するリキッドデザインです。レイアウトが崩れるのを防ぐ為に、最小幅は480pxにしています。

ブログタイトルにH1、記事タイトルにH2を使用しています。HTMLは、ヘッダー、記事、プラグイン、フッターの順に配置しています。

Another HTML-lint gateway

100点

lime_R_score_ss.jpg

CSS Validation Service 合格

Valid CSS!

Markup Validation Service 合格

Valid XHTML 1.0 Transitional

]]> テンプレート http://axia610.blog.shinobi.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/%E3%80%90%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%80%91%E3%83%A9%E3%82%A4%E3%83%A0%E3%82%B0%E3%83%AA%E3%83%BC%E3%83%B3%EF%BC%88%E5%8F%AF%E5%A4%89%E5%B7%A6%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%EF%BC%89 Sun, 24 May 2009 10:25:38 GMT axia610.blog.shinobi.jp://entry/10 テンプレートのページ幅 　テンプレートを作成する時、ページ幅をどうするか悩みます。選択肢は3つ。標準とされる、800にするか、両サイドにメニューを配置しても記事幅を確保できる1024にするか、可変幅のリキッドデザインにするか。

　ホームページやブログのページ幅は、800x600を想定して作成される事が多い。これは、SVGA時代の名残りなんでしょうかね。いまや、ネットブックですら1024x600が主流なので、800に拘る必要は無いと言いたいのですが、少数派であれ存在するのは事実だし、携帯のフルブラウザ、PSP、iPhoneなど携帯端末の利用者も多い。

　まぁ、ページ幅は訪問者の傾向に合わせて、サイト運営者が決めればいいことですから、作る側は選択肢が広がるように、色々なテンプレート用意しろって事でしょうか。

]]> ETC http://axia610.blog.shinobi.jp/etc/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E5%B9%85 Fri, 22 May 2009 06:52:21 GMT axia610.blog.shinobi.jp://entry/8 トラックバック Ping URL の自動検知 　新規テンプレート作成で生成されるHTMLのソースの中に

<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://<!--$g_user_id-->/Entry/<!--$entry_no-->/"
trackback:ping="http://<!--$g_user_id-->/Trackback/<!--$entry_no-->/"
dc:title="<!--$entry_title|strip_rdfstr|strip_tags|wordwrap:200-->"
dc:subject="<!--$entry_category|strip_rdfstr|strip_tags|wordwrap:200-->"
dc:date="<!--$entry_year-->-<!--$entry_mon-->-<!--$entry_day-->T<!--$entry_hour-->:<!--$entry_min-->:<!--$entry_sec-->+09:00"
dc:description="<!--$entry_text|strip_rdfstr|strip_tags|wordwrap:200-->"
dc:identifier="http://<!--$g_user_id-->/Entry/<!--$entry_no-->/" />
</rdf:RDF>
-->

　という記述があります。これは、トラックバック Ping URL の自動検知のRDFで、その記事にトラックバックしようとする人が自動検知を利用してトラックバックURLを取得する為のものです。

　積極的にトラックバックを受け付ける必要が無いなら削除しても問題ないでしょう。逆に、削除したほうがトラックバックスパムを受ける可能性が低下して良いかもしれない。

　減点は無いけど、文法チェックでもエラーが出ますしね。

]]> ETC http://axia610.blog.shinobi.jp/etc/%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%83%90%E3%83%83%E3%82%AF%20ping%20url%20%E3%81%AE%E8%87%AA%E5%8B%95%E6%A4%9C%E7%9F%A5 Fri, 22 May 2009 00:25:32 GMT axia610.blog.shinobi.jp://entry/7 HTMLの見出しタグ 　SEOに見出しタグが有効だという話は良く耳にしますし、当然、SEOを意識したテンプレートを作る時は、見出しタグの配置にも気を配ります。ブログのテンプレートの場合、ブログタイトルに<h1>、ブログの説明に<h2>、記事のタイトルに<h3>のように配置したり、ブログタイトルに<h1>、記事のタイトルに<h2>を配置したりする事が多いと思います。

　ただ、テンプレートに見出しタグを配置しても、利用する側が見出しを意識してブログを構成しなければ、意味が無いどころか逆効果になりかねません。ブログの場合は、キーワードを意識して、タイトルを付けたり、記事を書いたりする人は少ないでしょうし。

　とはいえ、あまり意識しすぎると、ブログっぽくないブログになってしまうので、難しいところです。まぁ、集客を目的にしたブログなら、それでも構わないのでしょうが。

　ちなみに、シンプル・ライトブルーとシンプル・ピンクには、見出しタグのは設定していません。ていうか、忘れてましたゴメンナサイ。後日、見出しタグを追加したものをアップします。

]]> ETC http://axia610.blog.shinobi.jp/etc/html%E3%81%AE%E8%A6%8B%E5%87%BA%E3%81%97%E3%82%BF%E3%82%B0 Thu, 21 May 2009 10:33:10 GMT axia610.blog.shinobi.jp://entry/6 【テンプレート】 シンプル・ピンク pink_ss.jpg

　シンプル・ライトブルーのピンク版です。ピンク色をベースに、斜めのストライプを入れたテンプレートです。

　ブログの説明文はバランスを考えて、途中で折り返す程度に幅を設定してあります。

　プラグイン5をトップページの記事の上に配置してありますので、フリーエリアを設置してメッセージボードなどに利用できます。

　共有テンプレートでは左メニューで登録してありますが、スタイルシートの .PluginBlock と #EntryBlock の float のパラメーターを入れ替えれば、右メニューに変更できます。要望が多いようなら、右メニューも共有テンプレートに登録します。

　画像と配色を変えただけなので、シンプル・ライトブルーとスコアは同じです。

Another HTML-lint gateway 100点

pink_score_ss.jpg

CSS Validation Service 合格
正当なCSSです!

Markup Validation Service 合格
Valid XHTML 1.0 Transitional

]]> テンプレート http://axia610.blog.shinobi.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/%E3%80%90%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%80%91%20%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%BB%E3%83%94%E3%83%B3%E3%82%AF Thu, 21 May 2009 04:17:16 GMT axia610.blog.shinobi.jp://entry/4 HTMLエディタの仕様 　忍者ブログのHTMLエディタは、「FCKeditor」というオープンソースのエディタで、非常に高性能で使い易い。

　ただ、注意しなければいけないのは、生成されるHTMLがXHTML 1.0である点。使用しているテンプレートのDOCTYPEがXHTML 1.0で宣言されていなかった場合、大量の文法エラーを吐く事になります。

　HTML4.01で宣言されているテンプレートも多いので注意したほうがいい。ブラウザ上では普通に見えるので、知らずにいる人も多いんじゃないだろうか。SEOを意識するなら、今すぐにでもXHTML 1.0のテンプレートに変更しよう。

　ちなみに、忍者アクセス解析の解析用ソースはXHTML 1.0準拠ではないので注意。BRタグとIMGタグを少し修正する必要がある。

　同じNINJA TOOLSのサービスでも違ったりするので、外部のソースを貼る時は、特にチェックしておこう。

]]> ETC http://axia610.blog.shinobi.jp/etc/html%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%AE%E4%BB%95%E6%A7%98 Tue, 19 May 2009 12:04:11 GMT axia610.blog.shinobi.jp://entry/3 【テンプレート】 シンプル・ライトブルー light_blue_ss

　少し濃いめの水色をベースに、斜めのストライプを入れたテンプレートです。

　ブログの説明文はバランスを考えて、途中で折り返す程度に幅を設定してあります。

　プラグイン5をトップページの記事の上に配置してありますので、フリーエリアを設置してメッセージボードなどに利用できます。

　共有テンプレートでは左メニューで登録してありますが、スタイルシートの .PluginBlock と #EntryBlock の float のパラメーターを入れ替えれば、右メニューに変更できます。要望が多いようなら、右メニューも共有テンプレートに登録します。

Another HTML-lint gateway 100点

light_blue_score_ss

CSS Validation Service 合格
正当なCSSです!

Markup Validation Service 合格
Valid XHTML 1.0 Transitional

]]> テンプレート http://axia610.blog.shinobi.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/%E3%80%90%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%80%91%20%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%BB%E3%83%A9%E3%82%A4%E3%83%88%E3%83%96%E3%83%AB%E3%83%BC Mon, 18 May 2009 17:16:38 GMT axia610.blog.shinobi.jp://entry/1