Adobe Museに埋め込んだGoogleカレンダーをレスポンシブ化させる方法

Googleカレンダーをレスポンシブ化してみる

今回はAdobe Museに埋め込んだGoogleカレンダーをレスポシブ化させる方法についてです。残念ながらAdobe Muse（CC2018）の設定ではGoogleカレンダーをレスポシブ化させることは出来ません。
ネットで一通り検索して調べてみたところ、以前の投稿で採り上げたGoogleカレンダー埋め込み支援ツールからGoogleカレンダーのHTMLコードを取得し、そのコードをdivタグで囲んでclassを設定。更にそのclassに対してCSSのposition指定を使用してレスポンシブ化させる方法が一般的でした。

とはいってもclassやCSSについて良くわからない方もいるでしょうし、実際私もCSSでレスポンシブ化させる際のposition指定については理解できていません。
なので、今回は簡単に利用できるサイトを使用してレスポンシブ化のためのコードを取得します。

Embedresponsively.com にアクセス

Googleカレンダーをレスポシブ化させるためには、下記のサイトを利用します。

Embedresponsively.com（リンク）

画面が開いたら、上に並ぶ青い文字の中の右から二つ目「Generic iFrame」をクリックしてください。

Generic iFrameをクリック

次に、「Generic iFrame Embed:」の下にある枠の中に、Googleカレンダー埋込支援ツールにて取得したHTMLコードを入力（コピー＆ペーストで可）し、枠の右端にある青い「Embed」ボタンをクリックしてください。

コードを入力して、Embedをクリック

そうすると枠の下にGoogleカレンダーが表示され、その下の「Embed Code:」の下にある枠にレスポンシブ用のCSSを含んだ新たなコードが出力されます。

出力されたコードをクリップボードにコピー

この出力されたコードを全て選択してコピーし、Adobe Museのオブジェクトメニュー内、「HTMLを挿入...」で開いたウインドウの枠内にペーストしてください。

Adobe Muse

↓

Adobe Muse

以上の手順でGoogleカレンダーのレスポンシブ化となります。ブラウザ幅を動かして動作を確認して見てください。

レスポンシブ化されたGoogleカレンダーの初期値の高さを変更する

前述の手順でGoogleカレンダーをレスポンシブ化できるのですが、このままの状態ではGoogleカレンダーの高さが少し縦に潰れて見えます。

Embedresponsively.comから取得したコードの初期の状態
（position: relative; padding-bottom: 56.25%）

高さはコードのCSSの一行目、「padding-bottom: 56.25%」の中の「56.25%」の値なので、これを100%を超えない数値で書き換えてみてください。 75％前後の値であれば初期の外観に近くなると思います。

padding-bottom: を75%にすることで、カレンダーの縦横の比率が3：4に。

Embedresponsively.comのコードの難点：スマホのような狭い画面幅ではスケジュール文字が見えなくなる

これまでに紹介したEmbedresponsively.comで取得したコードでレスポンシブ化はできるのですが、画面幅を狭めていくとカレンダーの縦横の比率を保ったまま縮小されます。よって画面幅が320pxのサイズになるとカレンダーの高さが足りなくり、スケジュールの文字が見えなくなってしまいます。

画面幅320pxの状態。
レスポンシブ化によってカレンダーの高さが足りなくなってしまい、スケジュールの文字が見えません。

これではちょっと実用性に欠けるので、以下でコードに手を加えてカレンダーの高さを変えずに幅のみをレスポンシブ化させてみます。

Embedresponsively.comのコードを改変し、Googleカレンダーの幅のみをレスポンシブ化させる

まずはEmbedresponsively.comで取得したコードに改行を入れて整理します。前もって padding-bottom: の値は75％にしてあります。
また、GoogleカレンダーのHTMLコードが入る箇所には <!-- ~ --> にてコメントで記述したので、実際の使用の際にはこのコメントをGoogleカレンダーのHTMLコードに置き換えて使用してください。

Embedresponsively.comから取得したコードに改行を入れたもの

高さを変えずに幅のみをレスポンシブ化させるための編集点は以下の2点で、

1. 上から3行目、CSSの overflow: の値を hidden から visible にし、見えなくなってしまう部分を表示させる。
2. 上から6行目、CSSの height: 100%; を削除し、高さを変えない設定に。

となり、以下のコードとなります。

Googleカレンダーの幅のみをレスポンシブ化させるコード

※このコードの動作保証はできません。自己責任にて使用してください。※転載不可。

上記のコードを使用するとGoogleカレンダーの幅のみがレスポンシブ化され、下の画像のようになります。

カレンダーの高さを保ち、幅のみが可変します。

まとめ

以上、Adobe MuseでのGoogleカレンダーのレスポンシブ化を紹介しましたが、Museの機能のサイズ変更が使えない分だけ扱いが難しいと感じました。
Googleカレンダーにレスポンシブな動きを加えずに、ブレイクポイントごとにサイズの違うカレンダーを切り替えて表示させるのも一つの手段としてアリなのではとも思います。

以上です。