イカした釣りサイト作成術

ブログの全体構造を理解する

当ページは、少し踏み込んだブログのカスタマイズ術を紹介します。

慣れないと気絶しそうな文字が並びますが、ブログをカスタマイズすると言う事においては、こういったタグやhtml、スタールシートといった物を理解するという事を避けて通る事は出来ないです。
なるべく、コピーペーストとかで済むようにしますから、解らない時は、とりあえずここに書いてある手順で、カスタマイズをやってみましょう。（バックアップを取ってからやるようにして下さいね♪）

では、またまたシーサーブログを例にとって、ブログの全体的な構図を見てみましょう。

ブログにしても普通のサイトにしても、基本的にウェブサイトは＜html＞から＜/html＞に記述します。（ってか、されてます）

この＜html＞から＜/html＞の中で、大きく分けて「＜head＞から＜/head＞」と「＜body＞から＜/body＞」に分かれるわけですね。

こういう↓感じになります

＜html＞html始まり

　＜head＞head始まり
　＜/head＞head終わり

　＜body＞body始まり
　＜/body＞body終わり

＜/html＞html終わり

＜head＞部分はブラウザに文字や画像になって現れることは無いです。検索エンジンのクローラにサイト情報を伝えたり、ブラウザに正しくサイトを表示させるために補助的に記述するべき事を書きます。
タイトル付け、メタタグの記述やスタイルシートの指定などをこの部分でやります。

ブラウザにウェブサイトとして表現されるのはbody部分です。全体的な理解が必要ですが、まあ、head部分は適当に手を抜いていても何とかサイトにはなりますし、無料ツールのブログ機能を使っている場合は、純正の物で十分に間に合ってますから、ここでは割愛します。

上図はシーサーブログのbody部分の基本的なレイアウトです。
はじめて見た人は、かなり厳しい文字が並んでいると感じられるかも知れないですが、こんなのは慣れです。(^_^)v

ブログは＜div＞と言うタグで範囲を指定して、それぞれの＜div＞中に、ウェブマスターが指定した記述が自動的に構築されるようになってます。

それぞれの＜div＞はスタイルシートでレイアウトの位置やカラー、背景画像などが指定されていて、ウェブマスターが正しく理解していれば、イカした釣りサイトにする事が出来ます。

バナー部分、記事部分、サイドバーの部分、それにフッター部分、すべてにカスタマイズは可能です。
しかし、最初から、すべてが出来るわけが無いです。とりあえず、ブログ作成初心者の方は、サイドバーのカスタマイズからやってみてください。

それはさておき、シーサーブログの場合、基本レイアウトは、図の通り！

containerを指定されたdivの中に、バナー（ページ上部）、コンテント（記事部分）、サイドバー部分、それにフッター部分から成り立ちます。
上図は右サイドバーの基本レイアウトです、左サイドバーのテンプレートを使うと、＜div id="links-left"＞と言う範囲が自動的に作成されます。（下図参照）

3カラム（両サイドバー）にすると、containerの中に、div id="links-left"とdiv id="content"とdiv id="links"が左から自動的に並ぶように設定されています。

解りづらいですが、div id="links-leftが左側のサイドバー、div id="links"が右側のサイドバーのスタイルになります。

それぞれの＜div＞は、idやclassでスタイルを指定されますが、どのような＜div＞でも、終わりのdivはすべて＜/div＞と記述しないとダメです。
このため終わりのdiv（＜/div＞）は、場合によっては5つも6つも並ぶ時がありますが、これなんか、慣れるまでには、この＜/div＞は一体どのdivの終わりじゃ？ってな感じで、身体の疲れ具合によっては、すんなりと気絶しそうになります。(^_^;)

くどいようですが、この辺りは慣れです。
まずは、あなたのブログがどのようなhtmlで記述されているか、以下の手順で確認してみてください。

ブラウザのファイルメニュー、「表示」から「ソース」をクリックしてみて下さい。
気絶しそうな文字が並んでいると思いますが、それを管理画面から色々カスタマイズしていくってことですね。

では、ブログトップページにブログの説明文を入れて、あなたのブログをより一層、イカした釣りブログにカスタマイズする方法を見てみましょう。