kamenokoki.com

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

Posted:  Last Update:

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

姉妹サイトの様子

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

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

2020.10.31 姉妹サイトの様子

ナビゲーションバー変更

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

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

2020.10.31 ナビゲーションバー変更

ヘッダ変更

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

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

2020.10.31 ヘッダ変更

本文部分変更

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

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

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

2020.10.31 本文部分変更

ヘッダデザインを考える

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

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

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

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

2020.10.31 ヘッダデザインを考える1

サイトカラーに迷走する

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

2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1

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

2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1 2020.10.31 サイトカラーに迷走する1

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

今日はここまで

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

では、また明日。

おまけのロードマップ

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

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する
    • お問い合わせページを作る
    • 検索ボックスを作る
    • サイトマップページを作る ←明日はここから
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告