ライブスケジュールを見やすくしたい

自分自身とか、知り合いとか友達でミュージシャンのひとたち、みんなブログ持ってますよね。
そしてライブスケジュールの記事ばっかりだったりします。
それしかなかったりする。

そして、ほとんど、縦長で日付とメンバーを羅列してるだけのフォーマット。
というかそれしか書きようがない。
そして、ライブの場所のリンクさえなかったりする。

私もそうでした!

ライブに来てほしいのに、情報提供に費やす労力を惜しむ?

好きなミュージシャンの演奏はスケジュールをチェックして聴きにいきたいものです。
でも、ブログのスケジュールが見にくいと、
チェックする気が失せます。

人気のミュージシャンのブログやHPは、やっぱり作りこまれていて、
演奏スケジュールもほとんどカレンダー形式でアップされています。

でも作りこむのはプロに頼まないと難しい・・・
コストがかかりそうだし・・・
という気持ちわかります。
そこで。

無料で見やすく美しいスケジュールをブログに!

見やすいスケジュールにしたら、みんなチェックしてくれるし、ライブを聴きにくるひとも増えるのでは・・・
と考えました。
WAY OUT WESTさんの情報誌のスケジュールカレンダーのページがお手本です。)

WordPressのプラグインのカレンダーでは私はこのThe Events Calendarプラグインが一番です。

cal2

The Events Calendarプラグインのいい所と悪い所

いいところ

  • 見た目美しい
  • 基本無料
  • イベント開催地に住所を入れたら詳細ページにデフォルトでGoogleMapが埋め込まれる
  • イベント、開催地、などはCSV形式のファイルからさくっとデータインポートできる
  • WordPressのバージョンに合わせて頻繁に更新してくれ

悪いところ

まだ途中ですがカスタマイズしてみました。

ちなみにこのプラグイン、
イベント詳細ページもデフォルトで見やすいです。
cal5


The Events Calendar プラグイン導入

ここからはWordPressを知っているひと向けです。

ここからダウンロードして、普通にプラグインをインストールして、有効化します。

次に、はるるさんが作ってくださった日本語化ファイルを入れます。
詳細はこちらから。
はるるさんありがとうございます!

基本的な使い方は上記はるるさんのページでもわかりやすく解説してくださっています。
インストールがうまくいったらダッシュボードに「イベント」が増えているはず。

カレンダーのページは固定ページで自分のホームURL+/events/で勝手に生成されます。
/events/の所はダッシュボードの[イベント]-[設定]から変更できます。
私は/calendar/にしました。

スラッグを変える

早速、インストールと同時に生成された固定ページをみてみます。
ばーん
cal4
これは公式ページのスクリーンショットですがデフォルトはこうです。

デフォルトではカレンダーの横幅が1000pxを超えていたので、
サイトデザインが崩れました
私のこのサイトは
賢威で作っていますが、固定ページ1カラムで最大950pxにしています。
またこのプラグインはレスポンシブ非対応なので、
今現在も、カレンダーページはスマホで見ると崩れてます。
この世の終わりってくらい。
これから見目よくしていきたいです。

カスタマイズしたこと

上記のデフォルトのカレンダーがこのようになるまでの軌跡です。

  1. カレンダーの横幅を自分のサイト幅に合わせる(950px)
  2. 曜日の色を変える。
  3. 「今日」の色を変える
  4. findボタン(検索ボタン)の色を変える。
  5. カレンダーの見出しが欧米風「events for MM月YYYY」になっていたのを、日本風(YYYY年MM月)に変える。
  6. 検索ボタンが英語findになっているのを日本語にする
    ※2015/1/15追記 日本語化したので不要
  7. 検索結果メッセージを日本語にする

2014/4/14追記
※5番についてはこちらの新しい記事を参考にしてください。
バージョン3.1以降は5番については下記は適用できません!

2015/10/28追記
3番と5番についてはこちらの記事(バージョン3.12.3に対応)を見てください!

the events calendarをカスタマイズする

1.カレンダーの横幅を自分のサイト幅に合わせる(950px)

変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-full.css

変更箇所

widthのここを変えると全体幅も小さくなりました。お好みのサイズに。
もともと250px

実際読み込んでいるCSSファイルはtribe-events-full.min.cssなので、
変更だけしてあとでminにしてminのほうのCSSファイルを上書きします

2.曜日の色を変える

変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-theme.css

変更箇所

カラーコードを私のサイトカラーのひとつにしました。もとは#666でした。

このCSSファイルもあとでminにしてからminのほうも上書きします。

3.今日の色を変える

2と同じファイルです。
変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-theme.css

2015/1/14変更済み バージョン3.9に対応しました
変更箇所(25行目のカラーコード)

カラーコードを同じくサイトカラーのひとつ#ffbab5にしました。

2015/10/28追記
こちらの記事(バージョン3.12.3に対応)を見てください!

4.findボタンの色を変えて角丸にする

変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-full.css

変更箇所

カラーコードとradiusをつけました。

5.カレンダーの見出しが欧米風「events for MM月YYYY」になっていたのを、日本風(YYYY年MM月)に変える。

※2014/4/14追記
バージョン3.1以降はこちらの新しい記事を参考にしてください!

2015/10/28追記
こちらの記事(バージョン3.12.3に対応)を見てください!

変更ファイル
wp-content/plugins/the-events-calendar/views/list
loop.php

変更箇所

6.検索ボタンが英語findになっているのを日本語にする

2015/1/15変更 日本語化ファイルを作ったのでそれを入れれば不要

変更ファイル
/wp-content/plugins/the-events-calendar/views/modules
bar.php

変更箇所

7.検索結果メッセージを日本語にする

変更ファイル
wp-content/plugins/the-events-calendar/lib/template-classes
month.php

変更箇所


変更したCSSファイルをminに変換する

忘れてはなりません。上記1~4番で変更した2ファイルを上書きアップロードしても変更は反映されません。
一緒にmin.cssファイルも作りなおして上書きアップロードする必要があります。

私はこのサイトを使ってmin.cssを作りました。

次回はイベント会場とイベントをCSVファイルから一括インポート

あくまで私のやり方なのでテンプレートによっては効かないかもしれません。
また、間違っているかもしれません。
気づかれた方はご指摘くださると、とてもありがたいです。
※The Events Calendar User CSSというプラグインも試したんですが、
うまくいきませんでした。

次回はThe Events Calendarプラグイン素敵な機能、
イベント会場とイベントの一括インポートをやってみます。

※カスタマイズが進むにつれ、この記事をちょくちょく更新していくかもしれません。