【8日目】サイトの構成を考えてみた
Posted: Last Update:
お小遣いを稼げるブログ作成を目指して、8日目です。 昨日は苦しみつつサイトのヘッダとフッタを作って、今日はいよいよページのメインの部分を作りたいと思っています。
ロードマップ
進捗をロードマップでご紹介
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える ←ここに逆戻り
- サイトの基本構造を作って公開する
- 大枠の作成
- ヘッダの作成
- フッタの作成
- メインコンテンツの（ひな形）作成 ← 今ここ
- ナビゲーションバーの作成
- 関連情報エリアの作成
- リンクを開いた時の動きを作成
- 公開
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
お小遣いを得られるまでにだいぶ長い時間かかりそうです。いや、そもそもお小遣いなんか得られるのか…？ ……。 いや、まだ一週間なのにへこたれてどうする！頑張るぞぉ！
メインコンテンツの構想を練る
メインコンテンツ、上下（ヘッダとフッタ）を除いたページのど真ん中の部分ですね。 左側に細めの索引を配置して、右側に記事。下には関連情報を配置したいと考えています。 今まで使ってきたHTMLタグやらCSSを使いまわして、何とかやってみたい。まぁ、最終的には検索のお世話になるんでしょうけど（笑）。Google先生、偉大です。
で、早速検索が必要なことが…。HTMLタグの使い方について、この辺りはわかったのですが、この3つをきれいに配置するためには、何かでくくらなければならない。
- nav - 左側の索引（ナビゲーシヨン）
- article - 記事本文
- aside - 関連情報
何でくくるのか検索してみました。 不安だったのに、すぐに出てきました！。mainが使えそうです。
mainをどのファイルに入れるのが正しいか惑う
正解を探り当てた途端に、また手がとまりました。いや、ここまで手を動かしたのは検索だけなんだけれども（笑）
index.phpというファイルが、サイトのトップページに当たります。 これを直接弄らなくていいように、navとかarticleとかは、別のファイルに記録しようと考えています。別のファイルにすることで修正する場所が明確になります。そして、修正している時に全く関係のないところをうっかり触ってしまうという事故も防げます。パーツをもし使いまわしたくなった時にも、他のファイルから呼び出してくることもできて便利です。
では、そのnavとかarticleをくくるmainはどこに持ってくるのか…。 別にmainファイルを用意すると、その中にnavやarticleを含めなければならない。ファイルを分けている意味がなくなってしまう…。 ではindex.phpに直接mainを入れ込むか。でもそうすると、mainを変えたいときにindex.phpを弄らなければならない…。
どうしよう、どうしよう、と考えながらお茶を淹れてきました。
とりあえず、index.phpに入れることにしました。 ロードマップを見直して、パーツを囲っているだけのメインはほとんど触らないはず！と判断しました。
実際にindex.phpに書き込んだのはこれだけ。</main>
メインコンテンツの作成にやっと取り掛かる
mainの置き場も決まったところで、バリバリ進めましょう。
mainの横幅をそろえただけでブログっぽくなってきました！
（ついでにサイトの名称をローマ字に、…やや迷走中…。）
ここから、nav、article, asideの配置を行っていきます。 配置は昨日習ったFlexboxを使いました。 途中で関連情報を右側に入れてみようか、とも考えたました。でも、全体のバランスをみてやはり下に配置することにしました。関連情報のの情報が多い人もいますが、一行くらいにきゅきゅっと納めたい。個人的な経験上言わせてもらうと、関連情報なんてほとんど見てないし、「何か書いてあるわー」くらいに下の方にしおらしく存在してくれていればいいかと思います。
配置した結果、ヘッダと本文の境目が分かりづらかったので、メイン部分との間に横線もひいてみました。
今の状態です。うん、なかなかいいじゃん！
はじめたばかりだけど今日はここまで
と、ここでタイムアップ。なんだかあまり進んでいないので、もう少しやりたい気もしますが時間の管理大事です。
作っている間に気付きましたが、リンクの作成がナビゲーションバーなどの内容の作成とかぶってました。順番が違うのか、一緒に進めるべき内容なのか。ロードマップの見直しが必要かもしれません。 それもまた明日。
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
