FC2ブログへのZenbackの導入

広告

FC2が提供している無料ブログサービスであるFC2ブログへZenbackのコードを設置する方法について解説します。記事下及びサイドバーへ設置する方法となります。

1.FC2ブログの記事下へ設置
2.FC2ブログのサイドバーへ設置

事前に「新規ブログを追加」及び「コードの確認方法」を参考にあらかじめFC2ブログで作成したブログをZenbackに追加して使用するコードを取得しておいて下さい。

FC2ブログにログインしてブログの管理画面を表示して下さい。

p9-1

「テンプレート[PC]」をクリックして下さい。

p9-2

テンプレートの管理画面が表示されます。

p9-3

ここからテンプレートを直接編集します。必要であれば現在使用されているテンプレートの複製を作成されておいて下さい。複製は現在使っているテンプレートに表示されている「複製」と書かれたリンクをクリックして頂くだけで作成できます。

p9-4

では下の方へスクロールして頂いてテンプレートのHTML編集画面を表示して下さい。

p9-5

まずは個別の記事を表示した時にフッターの部分にZenbackが表示されるようにしてみます。使用されているテンプレートによっても異なるとは思いますが「Pagetop」に関する記述があるところを探してみて下さい。

p9-6

※ クリックして頂くと画像が拡大表示されます。

ここの直前にZenbackのコードを追加します。ただそのまま追加すると個別の記事を表示した時だけではなくメインページで記事毎にZenbackが表示されてしまいます。個別の記事を表示した時だけにZenbackを表示されるようにするには、Zenbackのコードの前後に次のコードを追加して下さい。

<!--permanent_area-->
Zenbackのコード
<!--/permanent_area-->

p9-6

※ クリックして頂くと画像が拡大表示されます。

記述が終わりましたらHTML編集エリアのすぐ下にある「更新」ボタンをクリックして下さい。

p9-8

これでコードの設定は完了です。

ではブログを見てみます。記事の一覧が表示されるメインページでは何も表示されませんが、個々の記事を開いた時はフッター部分にZenbackが表示されています。

p9-9

p9-10

次にサイドバーにZenbackを設置する場合です。記事下に設置する場合と同じ手順で進めていき、テンプレートのコードを追加する場所として「plugin_second-」に関する記述があるところを探して下さい。

p9-6

※ クリックして頂くと画像が拡大表示されます。

この下の部分に記事下に貼り付けたのと同じコードを貼り付けて下さい。

p9-6

※ クリックして頂くと画像が拡大表示されます。

記述が終わりましたらHTML編集エリアのすぐ下にある「更新」ボタンをクリックして下さい。

p9-13

これでコードの設定は完了です。

ではブログを見てみます。個々の記事を開いた時にサイドバーにZenbackが表示されます。

p9-14

FC2ブログにZenbackを導入する方法について解説しました。サイドバーの方は他のウィジェットとの位置の調整が難しいかもしれません。縦に長くなってしまいますし記事下に表示されることをお勧めします。

( Written by Tatsuo Ikura+ )