ブログをサイト型にリニューアルしました！
いえぇーい
デザインの勉強からはじめて、Wordpressを色々調べてサイト型にする方法を考察してやってきました。
デザインの勉強といっても『おしゃれ サイト』で検索して出てきたのをひたすら分析しただけです。
仕事終わりに少しずつやっていたので思った以上に時間がかかりましたが、無事リニューアル完了です。
作業中にINPUTした情報は、今後ブログにOUTPUTしていきます。
テーマは、いろいろと調べましたが当初と変えずにCocoonでやってます。
Cocoon使っている中では、ITエンジニアの力ふんだんに使っていいデキかなと満足してます。
サイト型にするにもCocoonで十分すぎます。
ヘッダー部分の改良 黄金比or白銀比
黄金比や白銀比を勉強しました。
最初は黄金比を考えたんですが、このブログ外人なんて誰も見てないし、きてる外人がいるとしたら、スパムコメント職人だけだろうということで
『白銀比』を採用です！
白銀比で検索すると以下が出てきます。
つまりそういうことです。
というわけで、来る日も来る日も白銀比を考え２日間という果てしない時が立ちました。
ヘッダーにおしゃれを取り組むべく計算をし、そこで出した理想がこれです。
おしゃれな気がする。
ちなみに
白銀比は、41.43% : 58.57%。
黄金比は、38.20% : 61.80%。のはずです。
それで、Cocoonの「外観→カスタマイズ→追加CSS」の部分でひたすら書きました。
CSSを複雑に考えてしまう病にかかり、１度は混乱しましたが一回全部リセットして次の日やったらあっさり完成しました。
大体そんなもんです。
わけわからなくなったらリフレッシュ！
それでは、混乱に打ち勝ったBefore＆Afterをご覧ください。
Before
After
うん、白銀比素晴らしいね！
HOME画面をサイト型に変更 デザインむずかしい
HOME画面をものすごく考えました。
１回目のデザインは、実際にHTMLとCSSで作ってみたらいやぁもうダサいダサい
スーパーださかったので、すべてを忘れました。
ちなみに設計はこれです。
私は仕事の設計もすべてエクセルなので、今回もエクセルで作ってます。
全然いいデザインを作れなかった私は挫折しようかと思いましたが、これからサイトを作るお願いされたらお仕事を受けようとも思うので再び立ち上がりました。
そして、『おしゃれな デザイン』で検索しなおしオシャレを脳内に焼き付けました。
そんな２日間を過ごしついに新たなデザインを閃きました。
その時の設計がこちら。
サイトっぽい！
そして、固定ページで最初にビジュアルで雑にオブジェクトを配置してそのあとは、テキストに変更しHTMLをいじり倒しました。
激しい戦いでした。
なぜなら私は普通のプログラミングは好きですが、あまりHTMLとCSSを組むのが好きではないのです！
ざんねん！
やる気のない自分に鞭をうち、なんとか作りました。
固定ページないで完結すればいいので、固定ページないのカスタムCSSとカスタムJavascriptで組みました。
下のほうにあるこれ↓
ということで今のHOMEが完成しました。
見てってください。
レスポンシブ対応もちゃんと対応してます。
デザインから考えたら２週間くらいずっと考えてました。
無事、できて満足したので焼肉食いました。
WordPressがだいぶ詳しくなりました。
おまけ CONTENTS一覧の追加
固定ページでコンテンツ一覧も追加しました。
今はまだ少ないですが、これからも溢れ出るアイディアを形にしていき完成したものを載せていきます！
アイディアの設計書だけが増えていくけど、私の知識と技術が追い付かない状態です。
日々、勉強ですね。
せっかくなので、リニューアルした宇宙に憧れるエンジニアの巣を見て行ってください。
読んで頂き、ありがとうございます。
この記事が誰かにとって、一つの参考となれば幸いです。
新たな知識や技術を習得し続けていきたいです。
コメント