Code Monkey home page Code Monkey logo

wct2017's Introduction

wct2017

A WordPress theme for WordCamp 2017

デザインと入稿要素

このテーマでは、ウィジェットやメニューにこういう指定をするとこうなるという変な仕組みがあります。

  • メニュー名を circle-menu にして、アフターヘッダーウィジェットに挿入すると、丸いなんかあれなやつになります。
    • さらにそれぞれのメニューにカスタムクラスをつけると、なんかいい感じになります。
    • ticket チケットのアイコン
    • ticket-no カミングスーンのチケット
    • thumb 親指立ててるやつ
    • access マップアイコン
  • メニュー名を line-menu にしてアフターヘッダーウィジェットに入れると、サブメニューになります。

前提知識

このテーマはWordCamp Tokyo 2017のテーマです。

WordCampサイトには以下の制約があります。

  • マルチサイトである
  • 新たにテーマをインストールすることはできず、既存テーマから選択するだけ
  • PHPやJavascriptを追加することは一切できない
  • 可能なのはカスタムCSSを読み込むことだけ。このカスタムCSSは外部URLを設定できるので、このGithubリポジトリから読み込むことができます。

詳細については2015, 2016のWeb制作を担当した羽野さんのブログ記事「WordCamp Tokyo 2015のサイトデザインについてのおはなし 」を読んでください。フォーク済みのリポジトリはこちらです。

セットアップ方法

WordPressサイトの設定

VCCWをクローンしているので、それをダウンロードしてください。

wct2017/vccw

git clone [email protected]:wctokyo2017/vccw.git ./wct2017-vccw

これで、以下の設定が行われます。

  • WordPressマルチサイトのインストール
  • 必要なプラグインを諸々インストール
  • 必要な親テーマをインストール
  • このテーマリポジトリをインストールし、有効化

成功すれば、 https://wctokyo2017.dev でアクセスします。証明書のエラーは無視してください。

もし失敗した場合は、このリポジトリwct2017/vccw にイシューとして登録してください。

テーマのビルド

このテーマを初期化するにはnpmが必要です。

npm install

ファイルのビルドと監視

npm start

上記のコマンドを入力すると、各種ファイルが書き出され、監視が始まります。

静的HTMLによる確認

src/pugディレクトリにあるファイルは distフォルダにHTMLとしてコンパイルされ、BrowserSyncで監視することができます。

npm run server

本番環境へのデプロイ

デプロイメントといっても、CSSが変わるだけです。リリースはmasterブランチの docs フォルダにて行います。

コンテンツ(サイドバー、メニュー、ウィジェットなど)の適用とCSSの適用を両方行って初めてコンテンツ公開となるので、できる限りCSSを冗長化させてください。要するに、CSSとコンテンツを同時に更新しないと適用されないのは好ましくないということです。

次のコマンドで、デプロイ用のファイルが書き出されます。

npm run production

本番用のリソースは静的なHTMLとして Github Pages にデプロイされます。

wctokyo2017.github.io/wct2017/

WordCamp用サイトは以下のCSSを参照することで、デザインが適用されます。

https://wctokyo2017.github.io/wct2017/assets/css/style.css

依存技術

貢献するには

issuesから問題点を報告してください。 もしくは、プルリクエストを送ってください。

ライセンス

GPL 3.0またはそれ以降です。

wct2017's People

Contributors

fumikito avatar inc2734 avatar mignonstyle avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

wct2017's Issues

人口衛星の配置を左からの距離ではなく、中心からの距離で配置してみる

衛生が画面の左端から登っていますが、解像度やディスプレイサイズで横に伸びたときに、左すぎて気づかれないのでは?と思います。

画面の中心からの距離で、配置してみるとよいと思います。
その場合は衛生をどこから出してくるのか?となりますので、地平線の境界線から登ってくる感じでよいかなと思います。

中心からの配置方法は画面キャプチャか、この記事をご参考にしてください。
https://hyper-text.org/archives/2014/08/position_absolute_center_layout.shtml

macbook03

cssにhideクラス追加

忘れそうなので。
一時的に非表示にしたいボタンや説明文などに class="hide" をつければ非表示になるようにstyleを入れておいてください。

開発環境とフレームワークの決定

@inc2734 @h2ham

  • 環境(VCCW, Dockerなど)
  • CSSフレームワーク

上記2点を決めましょう。前提として……

  • テーマは親テーマが決まっているので、マークアップは一切いじれない
  • ウィジェットの中身などはいじることができる

などがあります。不明点があればコメントください。

メニューを作る

ティザーサイト用のメニューを作成。CSSだけで実現する必要がある。

英語のページの本文が小さいので1pxだけ大きくする

英語だと本文が小さすぎるので大きくしていただきたいです。

.parent-pageid-121 .entry-content,
.category-english .entry-content {
    font-size: 17px; /* くらいが見やすかった */
    /* 見出しなどのバランスはお任せしたい */
}

英語文章とhtmlのクラスは以下のページで確認できます。

https://2017.tokyo.wordcamp.org/?page_id=272&preview=true
https://2017.tokyo.wordcamp.org/?p=294&preview=true

SP用背景画像作成、差し替え

スマホでみたときに読み込みに時間がかかっていたので、メインビジュアルをスマホ用のサイズの背景画像に差し替え

スマホからだと、英語ページに移動しても気づかない

スマホからだとグローバルメニューとhero画像部分がファーストビューに表示されますが:

  • メニューの"English"の色は変わらない
  • 画像の中の場所を記載した部分が日本語のままで、英語に変わらない

ので一見わかりません。

https://wctokyo2017.github.io/wct2017/assets/images/wct2017-date.svg
を英語ページの場合のみ英訳したversionにreplaceするのは可能でしょうか?

iPhone6のSafariでみたときに、開催日がよく見えない

iPhone6のSafariでみたときに、開催日がはっきりと認識できない感じがします。
その下の「ベールサール新宿・・・」は認識できるのですが、開催日は瞬間的にわからないので、もう少し認識できるようにしたほうがよいかも。
img_1842

メインビジュアルの大きさについて

東京島のがメインビジュアルの大きさが気になったので書きます。

僕のMacbook Proだと画面全体に広がってちょっと圧迫感がある感じがします。そして、スクロールして次にあるのかわかりにくい感じがしました。
macbook01

少しサイズを落としてみたのですが、このぐらいだと引き締まって綺麗に見えるなーと思います。
次の文章のタイトルも見えるので下になにかあるのがわかります。
macbook02

解像度や大きなディスプレイで違ってくると思いますので、ご参考に。

スタイルガイド作成

スタイルガイド用のデザインデータ作成しました
wct2017_styleguide_20170315.ai

リンクの文字色などは入っていないのですが、薄くなるとか濃くなるとかでよいので対応お願いいたします。
ティザーサイト用なので、ページネーションなどのデザインは作っていませんが、必要なものがありましたらお知らせください。

iPhoneで横にした時にサブタイトルがよく見えない。

「JOIN」を補足する、サブタイトルの「つながる人・・・」がPCならまだ認識できるのですが、スマホだとよく見えないです。
重要な箇所なので、もう少しはっきりと認識できたほうがよいかなと思いました。

img_1843

ボタンの色の修正

「登録」などのボタンの色をヘッダーのメニューのグリーンと同じ色にしてください
2017-07-22 18 10 16
2017-07-22 18 11 54

人工衛星の移動

@inc2734
移動するガイドラインを追加しました。

Googleドライブの20170315 修正・追加分
wct2017_teaser_top、PC、TB、SPそれぞれに追加してます。

アニメーションはトップページのみで大丈夫です。
よろしくお願いいたします。

スポンサーの詳細ページ作る

WEBデザイン班の方へ
 表示されるロゴの位置を修正頂きたいのです。自分 テーマの編集権限ないので、ある方にお願いいただけませんか?

primary-sidebar, After-headerとafter-contentsの有効活用

個別の記事ページなどでは、特に何も出ないので、以下のページに何かを足すと良いのかと思われます。

  • after-header ヘッダーの直後に出るやつ。フロントページとそれ以外で出しわけができる。
  • before-content コンテンツの直前に出るやつ。現状ワンカラムなので、after-headerと同じです。
  • primary sidebar

全ページに表示されますが、スタイルシートなどで表示を制御することはできます。

なにかアイデアありますか。僕は

  • primary-sidebarはデザイン的に3つぐらいが限度なので、最新投稿一覧、Facebookページウィジェット、あとなんか一つぐらいでいいかなと思います。
  • beforecontents は「いますぐ参加登録」とか、そういうボタンがはではでしくあるといいのかな?

スマホからだと英語の各ページへアクセスできない

  • デスクトップの横幅でみると右上の「English」がドロップダウンメニューになっていますが、615px(?)以下になるとドロップダウンメニューとして機能しなくなる
  • 加えて、「メニュー」は日本語のままで、開いても英語ページへのリンクがない

ので、スマホから英語版の各ページへアクセスできない。

不足要素のデザイン

現在のテーマにあてこんだときにまったくスタイルがあたらない部分のデザインをどうするかについて質問です。回答お願いします。

  • コメントフォームおよびコメント
  • サイドバー(現在は非表示)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.