ひしもち 
あけましておめでとうございます、ひしもちです！
今日は、WordCamp Osaka 2019 Advent Calendar の6日目の記事として、WordCamp Osaka 2019 公式サイトのつくりかたについて書いていきます。
このアドベントカレンダーは、 「WordCamp Osaka 2019のつくりかたをリレーしよう」 というテーマで、WordCamp Osaka 2019 の実行委員たちによってはじめられています。
私は主にサイトのスタイリングを担当させてもらったので、その辺のお話がメインとなります。
大まかな道筋
以下が、公式サイトが今の形となるまでのかなり大まかな道筋です。
- とりあえずティザーサイトのデザインについて、ミーティング
- テーマを踏まえてトップのデザインをする
- GitHubにリポジトリを作って貰って、ローカルの開発環境を整える
- デザインに合わせてスタイルシートをゴニョゴニョする
- ティザーサイトオープン！
- コンテンツが増えるに従って、適宜スタイルの手直しをしていく
1. とりあえずティザーサイトのデザインについて、ミーティング
とにかくティザーサイトを作らなくちゃね、ということでミーティングが開かれました。
正式に「WordCamp Osaka 2019 やるよ！」となってすぐ……2019年6月頃だったと思います。
今年のテーマについてだったり、「こういうイメージがいいね」みたいなことを、委員長ズからお伺いしました。
2. テーマを踏まえてトップのデザインをする
今回、デザインはともさんが担当してくださっています！
アドベントカレンダー4日目の記事（ 懇親会用シールデザインって、実はリストバンド用やったんやで。 ）で、デザインの制作についても触れてくださってますので、ぜひこちらも合わせてご覧ください。
私あれ完全に「たこ焼き半分こしてるの図」だと思ってました。
さておき。
私は上がってきたデザインを見て、すこしだけ「ここをこうしたほうがいいかも」みたいなことを言わせてもらった気がします。
ともさんありがとうございました！
ともさんも私も、そもそも WordCamp 自体に参加したことがありませんでした。
「いつもの流れ」とか「ティザーサイトってだいたいこういうもの」というイメージが全然なかったので、この頃が一番手探りでオロオロしていたかも知れません（笑
WordCamp Osaka 2019自体の詳細が、まだほとんど決まっていない時期でした。
何をどこまで載せたらいいのか、ともさんにも、私にもよく分かっていない状態……。
そこで、デザイン班のリーダーにお願いしてワイヤーを書いてもらい、内容はそれをベースにしながらデザインを仕上げて貰いました。
3. GitHubにリポジトリを作って貰って、ローカルの開発環境を整える
この辺は私にはよく分かっていないです！ すみません！
GOUTENさんが色々な準備をしてくださって、「ここからクローンして vagrant up したらオッケー！」な状態にしてくださったので、クローンして vagrant up しました。
ありがとうございます！！
WordCamp の公式サイトには、色々な制約があります。
- 限られたテーマしか使用できない（Twenty ○○ シリーズと、その他数点）
- テーマファイルを編集できない（PHP編集不可）
- 編集可能なのはCSSのみ（外部CSSで元のCSSを上書き、もしくは、元のCSSは読み込まず外部CSSだけを読み込む）
- 限られたプラグインしか使用できない
これらの制約に従って、私はひたすらスタイルシートをゴニョゴニョする作業に着手することとなります。
4. デザインに合わせてスタイルシートをゴニョゴニョする
今回ベースとして使用したテーマは Twenty Ninteen です。
イチから全部スタイルを書くのは荷が重かったので、元のCSSを上書きする方法で行くことにしました。
色々苦しんだことがあったはずですが、もうあまり覚えていません！
ぼんやりと思い出せるのはこのくらい……
- コンテンツ区切りのアーチを作るのがたいへんだった
- デザインPC版のみで「レスポンシブよしなにします」って言ったら思いのほかたいへんだった
.entry .entry-summary > *を使って書かれたスタイル群の影響力が強すぎて上書きするのたいへんだった
もし次やることがあったら、ベースのテーマを先にちゃんと決めて、どういう構造になっているのか確認した上でデザインを見たほうがいいと思いました。
たぶん色んな方がそういうことを言ってくださっていたと思うのですけど、私には意味が理解できてなかったんですよね；
デザインが決まって「これで進めましょう」となったのが、7月の2週目に入るころ。
そこから丸々ひと月くらい掛かかりました。
5. ティザーサイトオープン！
そんなこんなでひとまずサイトがオープンされます。
私の手が届かなかった細かなところを、色々な方が少しずつ手直ししてくださったりしました。ありがとうございます！
6. コンテンツが増えるに従って、適宜スタイルの手直しをしていく
ティザーサイトオープンから本サイトへ切り替えを行うのではなく、そのまま少しずつコンテンツを付け加えていく形で運用しました。
コンテンツ公開ごとに「ここのスタイルちょっとおかしい」とか「デフォルトだと見づらいからちょっとスタイリングしたい」が出てきます。
その都度スタイルシートをゴニョゴニョしていきます。
公開前に調整が必要だった主なページは、タイムテーブルと、参加者や実行委員の一覧ページです。
それ以外はほとんど細かな調整のみで、私がすぐに対応できないときは他の方がやってくださったりもしています。
こうして、現在のサイトが育てられてまいりました。
まとめ
- WordCamp 公式サイトは、スタイルシートしか触れない
- デザインの前にベーステーマを決めて、デザインの大枠を合わせたほうがラクかも
- 色んな人が助けてくださってよかった！
作成中に助けてくださった皆さま、 サイトを見てくださった皆さま、ほんとうにありがとうございました！