ワードプレス初心者のテーマファイルをいじらずにGoogleカレンダーをレスポンシブにする方法
ウェブサイト運営で、「カレンダーを表示させたい」という要望を持つサイト主さん。
理想とするイメージを突き詰めれば、キリがないわけですが、予算がなく手軽に自分で管理できるカレンダーを…となると、「Googleカレンダー埋め込み」は一番メジャーな選択肢です。
で、今回Googleカレンダーを設置された方から、「スマホ表示だと見切れてしまう」とお問い合わせがありました。
そうなんですよね、Googleカレンダーをただ埋め込むだけでは、スマホやタブレットの画面で表示が切れるんでした。いわゆるレスポンシブ対応になっていないのです。
というわけで、「レスポンシブにする方法ないのかな〜」と、Google先生にお聞きしたところ（=単なる検索）こちらのサイトがヒットしまして、試してみたところしっかりとGoogleカレンダーをモバイル表示に対応させることができました。
ただ、こちらのやり方では、style.cssというテーマのファイルをいじらなくてはいけません。意味もわからずいじらない方がいい、と思いますし、表示が崩れるなどのリスクもあります。バックアップを取れるとか、万が一に対応できるなら全然心配無いんですが、結構そうじゃない方も多いので。
「修正しなきゃ」とか「元に戻す」という時に大変なので、初心者の方には「追加CSS」を使うことをお勧めします。
追加CSSに行くには
⑴【外観】ー【カスタマイズ】に行きます。
⑵【カスタマイズ】とはビジュアルエディターのことで、画面で確認をしながらのデザイン変更などができます。
追加CSSは、style.cssの内容に追加、もしくは上書きしたいものを記入し反映させることができます。
⑶追加CSS内に、先ほどのサイトで提供されていたコードをコピペします。
他にもコードが記載されている場合は、末尾に追加したらOKです。
⑷入力後、上部の「公開」で保存させます。
うまく行かなかったり、何かおかしい、と思った時は追加したものをそのまま消去することで元に戻せるので、テーマファイルをいじるよりは低リスクかと思われます。
先ほどご紹介したサイト内で案内されている「2-1 style.cssにコードを追加する」についてのみで、それ以外は手順通りにお試しください。
あらためて下記のサイトを参考とさせていただきました。ありがとうございました。
無料相談（60分）
・WordPressサイトの更新作業をしばらくしていない。
・サーバー会社から連絡が来てるがよくわからない。
・制作者と連絡がつかなくなってしまった。
・自分で管理運営できるようになりたい。
など、現状の把握と今後の管理方法についてご相談を承ります。
