ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【62日目】姉妹サイトを改装してみた

Posted:2020.10.31　 Last Update:2020.11.01

サイトの作成を開始して62日目。昨日はサイトの検索ボックスを完成させるついでに、サイトのヘッダー部分の見栄えを整えたり、Fontawesomeを導入したり、サイト全体がきれいになって嬉しかったです。今日は手つかずだった姉妹サイトの方も綺麗にしたいと思います。

姉妹サイトの様子

姉妹サイト「亀のチャレンジ」。先日まで英語30日チャレンジに挑戦していましたが、次のチャレンジまでしばらくお休みです。お休みの間に、こちらと同じくらい綺麗にしておきたい！

必要なものはちょこちょこつけ足していましたが、デザインはそのままでした。ちなみに、今の外観がこんな感じ。

どこから手を付けるか迷いますが、まずはナビゲーションバーから行きましょうか。

ナビゲーションの順番をこちらと同じにして、文字の大きさやリンクの装飾などのスタイルシートもコピペ。fontawesomeもこちらのサイトからコピーしてきました。ナビゲーションバーを変えた段階で、こんな感じになっています。

次はヘッダに行きましょう。昨日このサイトでも作ったばかりのヘッダ。設定をコピペして、先日作っておいたロゴも入れました。

微妙なので色を変えたりしたんだけど、まだ微妙…。少し置いて、後で考えましょう…。

次はメインの部分です。目次を入れるかまだ迷っていますが、ちょっずつ変更していきます。こちらも、このサイトから設定をコピペして、色を変えていきました。

結局目次も入れることに。検索ページも新しい検索をGoogle Program Searchで作成して作りました。

ふぅ。時間はかかったけど、ブログ本文ページはこんな感じになりました。やはり、ヘッダだけ浮いてるような気がしますね…。

まず、サイトのイメージカラーが青の中、亀の色が緑なのが気になります。ヘッダロゴを再作成しましょう。

最初にICOOM MONOから青い亀をダウンロード。次にPixerでロゴを作成しました。ついでに、少しバランスがおかしかったこちらのサイトのロゴも作成しなおしました。

ファビコンもついでに青くしておこう。

ここまでの作業で、全面的にさらに青くなってしまいました…。ここからどう色をバランスよく青を減らしていくか…。

いろいろと弄ってるうちに、また迷走し始めました。正解が分からない…。

イメージはあるんです。勉強サイトなので、知的に。でも、高尚なことをしているわけではないので、ポップに。名付けて「インテリジェンスポップ」。問題は、それがどんなデザインでどんな色なのか分からないこと…。

色を変える前が一番ましだったのがする…。

いっこうに色が決まらないので、今日はここまでにして、明日すっきりした頭で考えようと思います。色が決まったらサイトを更新できるので、ロードマップの次のステップにうつりたいな。

では、また明日。

ロードマップで進捗を見ると、こんな感じになっています。