Blog

サイトをリニューアル!WordPressの自作テーマが完成しました。

こんにちは。メカニカです。

今回はイベント情報やらニュースやらを自動的に更新できるようにすべく、WordPressを導入。思い切ってリニューアルしてみました。

Dreamweaverに関してはしばらく使ってなかったんですが、どうせAdobe CC契約してるし使ってやろうということで使ってみました。

CC 2017から追加された「リアルタイムプレビュー」なる機能が最高に便利です。

このツイートをした日から逆算すると、制作に一週間もかかったみたいです。

とりあえず、デザインを考えてみる。

トップページには大き目の画像を上に置いて、その下に新着情報を出すことにしました。サイドバーを置くと、ごちゃごちゃし過ぎて大事な事が伝わらない気がしたので、シンプルな感じで。

仮のコーディング。

大方デザインも決まり、ちょっと今の見た目に近づいて来ました。

初めてのjQuery。と、心が折れそうになる。

聞いたことはあったけど、なかなか使う機会の無かったjQuery。CSSと組み合わせてウザいカッチョいいアニメーションが出来ました。

スマホが普及してきたのに伴って、スマホに最適化されて無いサイトは「クソだ!」と言われる時代(要出典)なので出来ればレスポンシブデザインの方が望ましいのです。

詳しいコトは割愛しますが、要するに一つのページで「スマホ」と「パソコン」両方に対応してやろうというコト。

このようなサイトは基本的に「モバイルファースト」、つまりスマホ用のページからコーディングしていきます。

今回はパソコン用ページを先にデザインしてしまっているので…

コーディングを一からやり直し。

カッチョいいアニメーションに感動しつつ、なんとかモチベーションを取り戻し、作業再開。

モバイルファーストで一からコーディングをしました。

完成、ものづくりは最高。

何とかゴール。やっぱり、ものづくりは完成した時が一番嬉しいです。この辺はDTMと同じですね。

因みに今回、サイトをリニューアルするにあたってphotographerのtatsuki nakataさんに撮影していただいた、BOUNCE UP出演時の写真を使用しました。初めて東京のイベントに出演した時の写真で、大切な写真です。

あ!あと、DTM中には出来なかった「ながら作業」が出来るのがめっちゃ良かったです。

ずっと聴いてたにげるさんのミックス

追記

ご予約ページで個人情報を扱うので、ついでに常時SSL化しました。
今後ChromeではSSL接続でないと警告が出る仕様になるらしいです。なってた。

Google Chrome 56登場で待ったなし! “常時SSL/TLS化”の効果と実装のポイント

アドレスが「http://」から「https://」に変わってしまうので、記事数が多ければ多いほど検索結果へのダメージが大きくなるみたいです(諸説有)。
早めに済ませておいたほうが無難ですね。いずれ通る道になりそうなので、サイト運営者の方たちはお早めに。