Blog

WordPressの自作テーマが完成しました。

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

小学生のときにパソコンを与えてもらってからというもの、来る日も来る日もフラッシュゲームやwebサイトを作っていたわたくし…。

音楽を始めたのはまだ最近で、どうにか音楽活動に活かせないかと考えた末、「イベント情報やニュースをみなさんに簡単にみてもらえるようなものをつくればいいじゃん!」と、webサイトをつくることを決意しました。

静的?動的?

webサイトを制作するにあたって色々考えました。

htmlで静的サイトをつくるのか、phpを使って動的サイトをつくるのか。

イベント情報やニュースをみてもらうのが目的なので、半自動的に更新できたほうが体裁が整ったり、更新のモチベが上がったりするかな…?と考え、wordpressを導入することに。

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

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

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

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

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

仮のコーディング。

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

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

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

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

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

このようなサイトは基本的に「モバイルファースト」、つまり「小さなスマホ用のページからコーディングすれば楽だよね」という考え方でつくられているのですが、今回はパソコン用ページを先にコーディングしてしまっているので…

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

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

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

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

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

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

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