アメブロの本文にGoogleカレンダーを埋め込む

※内容がわかりにくいみたいでしたので、後ろの方に、実際の手順を載せてあります。

Web制作を仕事にしている私としては、あんまりクライアントにアメブロとかやってほしくないんですけれど（企業としてやるなら独自ドメインとってCMS入れてほしい）、頼まれることも多いので、仕事としてアメブロのカスタマイズなんてこともやっています。

その中で、ネット上に情報がたくさんあるにもかかわらず「うまく行かない！」という人が多いのが、本文内にGoogleカレンダーを埋め込む方法。
（というか、本文内で iframeタグを使う方法です）

Googleカレンダーを本文中に埋め込む方法は、こちらの記事が有名です。

googleカレンダーを記事内＆携帯で表示する
http://ameblo.jp/heartfulchanneling/entry-11269637345.html

この記事からリンクされているのが、下記の記事です。

アメブロの禁止タグを使う方法
http://ameblo.jp/wazameba/entry-10736090264.html

しかし、この方法”だけ”ではうまく行かないことが多いのです。
なぜかというと、上記の方法は、jQuery を読み込んでいることが前提だからです。
どうやら、ブログ作成時に選択するデザインによっては、jQuery が読み込まれない場合があるらしく、動いたり動かなかったりするみたいなのです。

解決方法ですが、こちらもちゃんと上記のサイトで紹介されています。
記事内からリンクも張られているのですが、気が付かない人も多いようです。
（私も気が付きませんでした）

フリープラグインを利用したカスタマイズ
http://ameblo.jp/wazameba/entry-10626965362.html

まず、こちらの記事に従って jQuery を使えるようにしてから、アメブロの禁止タグを使える方法の記事に従って作業をすれば、本文中で iframeタグが使えるようになりますよ。

ちょっとわかりにくいかもしれないので、Googleカレンダーをアメブロの記事内に埋め込む手順を書いておきます。
Googleアカウントを持っていることが前提です。（当たり前ですね）

１．アメブロの「ブログ管理」－「サイドバー」の「プラグインの追加」を開きます。

２．「フリープラグイン」タブを開きます。

３．下記のコードを入力して「保存」をクリックします。

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script src="http://hana.poche.jp/wazameba/js/waza11.js"></script>
<script>
$(function(){prohibitedTagsUse();});
</script>

４．「ブログ管理」－「サイドバー」の「配置設定」を開きます。

５．使用しない機能のところに「フリープラグイン」があるので、使用する機能のところへドラッグして、「保存」してください。
ドラッグする位置はどこでもかまいません。

６．使用しているデザインの、本文部分の幅を調べてください。
調べ方がわからない人は、画面に定規を当てて測ってもいいです。

７．Googleカレンダーに移動します。Googleカレンダーの「設定」（右上のギヤのアイコンをクリックすると出てくる）で設定画面に入り、左上の「カレンダー」タブをクリックしてください。

８．カレンダーのリストが表示されるので、埋め込みたいカレンダー名をクリックしてください。

９．「このカレンダーを埋め込む」という項目があるので、右のほうにある「色やサイズなどをカスタマイズします」をクリックしてください。

１０．左カラムで、タイトルを変えたり、パーツを非表示にしたり、色やサイズを変えたりすることができます。
アメブロの本文部分の幅がわかっている場合は、幅に本文部分の幅を超えない数値を入力してください。
他の項目は、なるべくシンプルにすることをお勧めします。
設定出来たら、右上の「HTMLを更新する」をクリックします。
すると設定値が反映されます。
先ほどアメブロの本文部分の幅を定規で測った方は、幅に適当な数値を入れてみて、表示されているカレンダーの幅が測った幅より狭くなるように設定してください。

１１．HTMLが更新されたら、「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」の下のボックスの内容（HTML）をコピーします。

１２．アメブロに戻って記事を作成します。
作成するときは「タグ編集エディタ」にします。
カレンダーを埋め込みたいところに、先ほどコピーしたHTMLコードを貼り付けます。

１２．公開します。
エラーが出なければ、カレンダーが記事に埋め込まれます。
エラーが出る時は、下記を確認してください。
・フリープラグインの内容が正しいか？（コピーミスしていないか）
・サイドバーの配置設定で、フリープラグインが使用する機能のところにあるか？
（デザインを変えると、使用しない機能に戻ってしまうことがあります）
・記事を「タグ編集エディタ」で編集したか？

埋め込まれたカレンダーは、Googleカレンダーを更新すれば自動的に更新されます。

わざめーばさんのサイトは、アメブロの裏ワザ情報がたくさんあって、凄いなぁと思います。
ただ、やりすぎるとアメブロの規約に触れますから、使い方を間違えないようにしてくださいね。

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数