【7日目】サイトの全体像を整えてみた
Posted: Last Update:
お小遣いを稼げるブログを目指して、早くも7日目になりました。20年ほど前にHTMLとCSSを素人ながらに少し触ったきり、情報も知識も更新していませんでした。新しい便利な技術はたくさんあるけれど、自力でやってみようと心に決めたのですが…。技術の進歩に取り残されながら、Google検索で猛勉強中です、
ロードマップ
どれくらい進んでいるか、簡易ロードマップで確認してみましょう。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える ←ここに逆戻り
- サイトの基本構造を作って公開する
- 大枠の作成
- ヘッダの作成
- フッタの作成
- メインコンテンツの（ひな形）作成 ← 今ここ
- ナビゲーションバーの作成
- 関連情報エリアの作成
- リンクを開いた時の動きを作成
- 公開
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
サイトの見栄えを少しずつ改善していく
昨日はサイトの最上部を作るのに数時間かかった上に、サイトすら完成していません。6日分の日記をメモ帳に置いたまま放置している状態です。 ロードマップで言えば後半の方が負荷が重いのに、まったく進んていません！でも、へこたれないぞ！ 今日の目標はヘッダを完成させることです。 昨日までの進捗は昨日の日記を見ていただけると詳しくわかりますが、何となく形が見えかな？という感じですね。
回想ばかりしていても進まないので、早速始めましょう。
サイトのヘッダ部分から形を整えている所です。
まずは横幅をそろえてみました。なんだかサブタイトルが邪魔…。
サブタイトルが邪魔だ！と消したら、今度はメニューが上の方にひっついてしまいました。修正しないと…。
ヘッダのメニューの位置が定まらない
メニューの位置を変えたいだけなのに、悪戦苦闘…。
疲れてきてしまったので、亀さんの画僧をダウンロードしたりして、遊んでしまいました。アイコンに使いたい。 お世話になったのはICOOON MONO。 記事の見出しとかの分類にも使えそう。
亀さんに癒されながら、気を取り直して修正しつつ、亀さんの画像で遊ぶ。
いや、もっぱら亀さんの画像で遊びながら、サイトの修正をはかる…（真面目にやれ）
ネット検索をしながら、あれをやってもこれをやっても御妙な結果に…。やっとメニューが下の方に行ったと思ったら、画面サイズを変えるとメニューがタイトルにかぶってしまう…。でも、亀さんは活躍してます。
亀さんの癒し効果に勝るこのイライラ！
今日はこれくらいでやめておこうか、と思いつつ、昔はなかったFlexboxなるものでサイトを弄ってみた。
…最終手段だと思っていた機能が一番簡単だった。ありがとう、Flexboxを開発してくれた人！
散々時間を使ったのに、正解を見つけたらあっという間に修正できました。
大きい画面
小さい画面
フッタも作ってみた
この勢いを借りてフッタも作ってしまおうと思います。
ヘッダのパーツを使いまわしできるので、サクサク進みました。10分で完成。わーい。
今日はここまで！予定になかったアイコンも入手したし、上出来の日ではないでしょうか。 明日は、メインコンテンツの（ひな形）作成に取り掛かりたいと思います！
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
