ススメ

前回作った背景画像やインラインイメージを使ってまずは大枠となるブロックをコーディングします。HTMLは前回載せましたソースをベースに各タグ（段落タグなど）と全体の状態を見る為に仮の文章を挿入していきます。

デザイン、レイアウトを確認する場合に注意しなければいけないのが、トップページと記事ページの表示内容の違いを把握しなければいけません。（後々の忍者ブログ独自タグを挿入する場合にも重要）
違いを簡単に説明すると、トップページでは記事本文を複数表示（デフォルトでは5件だったかな？）し、記事ページでは１件の記事本文と追記記事、コメント、トラックバックを表示します。（カテゴリ表示やカレンダーでの表示はトップページと同じくくりになります。）

まずは、大まかなブロックをスタイルシートでコントロールしてレイアウトしようと思いますので比較的HTMLが短いトップページから進めていきます。

HTMLはこんな感じ･･･（bodyタグ内）

つづきはこちら Page top

テンプレートのデザインが決まったらHTMLにコーディングするワケですが、デザインをHTML化する場合、テーブルタグを主体にコーディングする方法とスタイルシート主体にする方法の大別して2種類の手法があります。ワタクシの場合は基本的に後者のスタイルシートを使ってデザインをHTML化していますので、説明等はスタイルシートを主体としたものになります。

では、コーディングを始める前に･･･
いきなりエディタでタグを書き始めると大変ですが、予めどのように「組む」かという々考えておくとコーディングが進めやすいのでオススメです。
具体的には、下図のような感じでデザインを構成するブロックを考えます。
（シンプルなレイアウトなので構成もシンプルになりますｗ）

つづきはこちら Page top

テーマ性の高いブログの場合は、テーマに合わせてデザインするということになりますが、ワタクシのブログのようにノンテーマ的な場合は、自由すぎて考えづらいところがありますｗ
テーマやデザインの好みは色々ありますので一概には「コレ」とは言えませんので、「こんな感じがイイナァ」というようなデザインのホームページを見つけて参考にすると良いカモ？

さて、ブログのデザインがイメージできたところで実際に具現化していくわけですが、ブログっぽい（らしい）レイアウトというのがありまして、下図のような感じであります。

つづきはこちら Page top

日課のニュースサイト巡りをしていいてたまたま見かけた記事で、なんともいえない衝撃が･･･
「こくばん.in」というサイトに投稿されたタモリ氏を描いた作品がすごかった！ｗ
そして投稿されている作品群も･･･

なんだココは！

つづきはこちら Page top

講座とかそういう偉そうなものじゃなくて俺的メモなのです。
重要なポイントですが･･･忍者ブログ用です。HTMLとかCSSについても書いていく予定ですが、他のブログテンプレートとかの作成に応用できるかどうかはワカリマセンし、作成方法等は色んなアプローチがありますので、ワタクシの記事が全てではないので、そのあたりを予めご了承ください。
忍者ブログについてですが、テンプレートはかなり自由に作成できるようになってます。また、一定の基準を満たすことで共有テンプレートとして公開できます。
（一定の基準と言ってますが･･･運営サイドで審査されます。）

つづきはこちら Page top