ワードプレス初心者のテーマファイルをいじらずにGoogleカレンダーをレスポンシブにする方法

ワードプレス初心者のテーマファイルをいじらずにGoogleカレンダーをレスポンシブにする方法

ウェブサイト運営で、「カレンダーを表示させたい」という要望を持つサイト主さん。

理想とするイメージを突き詰めれば、キリがないわけですが、予算がなく手軽に自分で管理できるカレンダーを…となると、「Googleカレンダー埋め込み」は一番メジャーな選択肢です。

で、今回Googleカレンダーを設置された方から、「スマホ表示だと見切れてしまう」とお問い合わせがありました。

そうなんですよね、Googleカレンダーをただ埋め込むだけでは、スマホやタブレットの画面で表示が切れるんでした。いわゆるレスポンシブ対応になっていないのです。

というわけで、「レスポンシブにする方法ないのかな〜」と、Google先生にお聞きしたところ(=単なる検索)こちらのサイトがヒットしまして、試してみたところしっかりとGoogleカレンダーをモバイル表示に対応させることができました。

Googleカレンダーをレスポンシブ対応でウェブサイトに埋め込む方法

ただ、こちらのやり方では、style.cssというテーマのファイルをいじらなくてはいけません。意味もわからずいじらない方がいい、と思いますし、表示が崩れるなどのリスクもあります。バックアップを取れるとか、万が一に対応できるなら全然心配無いんですが、結構そうじゃない方も多いので。

「修正しなきゃ」とか「元に戻す」という時に大変なので、初心者の方には「追加CSS」を使うことをお勧めします。

 

追加CSSに行くには

⑴【外観】ー【カスタマイズ】に行きます。

外観・カスタマイズ・追加CSS

⑵【カスタマイズ】とはビジュアルエディターのことで、画面で確認をしながらのデザイン変更などができます。

追加CSSは、style.cssの内容に追加、もしくは上書きしたいものを記入し反映させることができます。

外観・カスタマイズ・追加CSS

⑶追加CSS内に、先ほどのサイトで提供されていたコードをコピペします。

他にもコードが記載されている場合は、末尾に追加したらOKです。

外観・カスタマイズ・追加CSS

⑷入力後、上部の「公開」で保存させます。

外観・カスタマイズ・追加CSS

 

うまく行かなかったり、何かおかしい、と思った時は追加したものをそのまま消去することで元に戻せるので、テーマファイルをいじるよりは低リスクかと思われます。

先ほどご紹介したサイト内で案内されている「2-1  style.cssにコードを追加する」についてのみで、それ以外は手順通りにお試しください。

 

あらためて下記のサイトを参考とさせていただきました。ありがとうございました。

Googleカレンダーをレスポンシブ対応でウェブサイトに埋め込む方法

 

更新情報を受け取る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です