前回「Googleカレンダーをワードプレスの記事内に表示させる方法」についてご紹介しました。
今回はカレンダーのデザインをちょっとだけ変更する方法をご紹介したいと思います。
※なぜ記事を２つに分けたのかと言えば、画像やGIFを使いすぎてページが重くなりそうだったからです。
と、キャラクター達が語っていますが、
CSSなどを使ってがっつりデザインを変更するわけではないので、「初心者向けの記事」になります。
細かいデザインの変更がしたい人にとっては、意味のない記事になってしまうかもしれないのでご注意ください。
また、少しだけ応用編として
- 複数のカレンダーを１つのカレンダー内に表示させる方法
- Googleカレンダーを中央寄せする方法
もご紹介したいと思います。
今回の記事を理解するだけでも、見栄えのいいカレンダーを作ることができるようになるはずです。
このページの目次です。
Googleカレンダーのデザインを変更する方法（初級編）
まずは、Googleカレンダーにログインしましょう！
次に右のサイドバーに表示されているカレンダーの中から、カスタマイズしたいものを選びましょう。
マウスカーソルを対象のカレンダーのところに持っていくと、メニューが表示されます。
メニューをクリックしたら「設定と共有」に進みましょう。
ページ下部にある「埋め込みコード」が表示されている近くに
「カスタマイズ」
というリンクボタンがあります。
そこをクリックしましょう。
すると、このような編集画面が出てきます。
左のサイドバーを変更するだけでデザインが変わる
後は「左のサイドバーにある項目」に必要な情報を入力することで、簡単にカレンダーのデザインが変わります。
例えば、カレンダーの近くに表示されるタイトル名を変えたければ
「カレンダーのタイトル」
と言うところに、好きな文字を入力しましょう！
そもそも「タイトルも表示させなくてもいい！」
と言う場合は「表示」の項目の「タイトル」のチェックを外しましょう。
すると、右にあるプレビュー画面を見て頂ければわかると思いますが、タイトルの表示が消えます。
こんな感じで、自分の好きなようにカレンダーをカスタマイズしてみましょう！
編集が完了したら「HTMLの更新」をクリックしましょう。
後は前回と同じように
「埋め込みコードをテキストエディタに貼り付け」
しましょう。
※テキストエディタなのでお間違えの無いように！
１つのカレンダー内に、複数の予定を表示させる方法
ちょっとした応用編として
「１つのカレンダー内に、複数の予定（カレンダーリスト）を表示させる方法についてご紹介します。
と言っても、やり方はとても簡単。
このように、一度に表示させたいカレンダーにチェックを入れるだけです！
こうすることで
- スタッフ全員の予定を共有したり
- EVENT用のカレンダーと祝日用のカレンダーを別々に管理したり
色んな事に応用することができます。
簡単なので是非やってみましょう！
カレンダーを中央表示させる方法
最後にGoogleカレンダーを中央表示させる方法についてご紹介します。
もしかしたらサイトのデザインによっては、ただカレンダーを設置してしまうと情報が左に寄ってしまいバランスが悪く見えることもあるかもしれません。
なので、これらの要素を中央に表示させてみましょう。
イメージとしてはこんな感じです。
手順はたったの２つ！
ちょっとだけ難しい話になるので、オマケ程度にサラッとご紹介します。
詳しい内容に関しては、他サイトでも沢山ご紹介されているので検索してみましょう！
手順１
<div class=”calendar”>中央に表示させたい埋め込みコードを入力</div>
まずは、DIVで中央に表示させたい要素を指定しましょう！
手順２
<style>
.calendar { margin:10px 0; }
.hoge iframe { margin: 0 auto; display: block; }
</style>
後は、スタイルシートの編集ページに、上記のコードを張り付けるだけです！
スタイルシートを弄るのが嫌な人は、カレンダーのサイズ自体を大きくすることで強制的にセンタリングっぽくすることも出来ます。
自分のサイトのデザインに合わせて使い分けてみてください！
