新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

アメブロ(アメーバブログ)にzenbackを導入する方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

zenbackに関してはソースを取得するまでは記事にさせていただきました。
が、そのソースをどこにどうやって貼るかまでは解説していません。
ライブドアブログであれば「ブログ設定」→「デザイン」→「デザインカスタマイズ」でCSSだけではなくHTMLの構造までカスタマイズできるので触れなかったのです。

ところが、アメブロに導入する際はちょっとした工夫が必要。
アメブロではHTMLの構造がカスタマイズできないようなのです。

そこで、フリースペース(フリープラグイン)にソースを挿入ということになるのですが、フリースペース(フリープラグイン)に書いた項目はサイドバーに表示されてしまうといった問題があります。
それを記事下に移動させるためにちょっとしたスクリプトを用意します。

■ Ameba (アメーバ)|ブログを中心とした動画・モバイル機能も充実の登録無料サイト
■ zenbackであなたのブログに全てのフィードバックを。

スポンサーリンク
 

以下の記事を御覧ください。
□ アメブロにzenbackを設置する方法|ブログを書く人のアイデアノート
こちらに書かれているJavascriptを使うとあら不思議、zenbackが記事下に移動します。

ちなみに、アメブロのいうフリースペースにはJavascriptが使えません。
代わりにJavascriptの使えるフリースペースとしてフリープラグインが用意されているのでこちらを使用します。

  1. マイページからブログの「デザインの変更」をクリック。
    アメブロにzenback01
  2. 「サイドバーの設定」をクリック。
    アメブロにzenback02
  3. 「フリープラグイン」の「編集」をクリック。
    アメブロにzenback03
  4. ここにzenbackで作ったソース+上記サイトに書かれているソースを流し込み「保存」をクリック。
    アメブロにzenback04

以上。

流しこむソースだけ書きだしてみました。

<!– X:S ZenBackWidget –>zenbackで作られたソース<!– X:E ZenBackWidget –>
<script>
$(function() {
$(“#zenback_loady”).insertBefore(“#advertising2”);
});
</script>

こいつをどかっとコピペしてあげればOKです。

 - プログラミング, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Facebook(フェイスブック)でやると嫌われてしまうかもしれない行動

1年以上前の記事です。内容が古い可能性があります。あっという間にmixiを追い抜 …

no image
アナログテレビでデジタル放送を見る方法

1年以上前の記事です。内容が古い可能性があります。っていうか、何もしなくても見れ …

GREE(グリー)を退会する方法【スマートフォン編】#1

1年以上前の記事です。内容が古い可能性があります。#1 | #2 | #3 せっ …

「Xperia AX」に機種変したのでモバイルSuicaで定期券を買ってみた(Suica購入編)

1年以上前の記事です。内容が古い可能性があります。モバイルSuica入会編の続き …

no image
「続きを読む」の使い方

1年以上前の記事です。内容が古い可能性があります。今まで殆どつかってなかった機能 …

ブラックフライデーとサイバーマンデー(とブラックマンデー)

1年以上前の記事です。内容が古い可能性があります。この季節、アメリカ合衆国では物 …

スマホサイト(スマートフォンサイト)のソース(HTML)を見る方法

1年以上前の記事です。内容が古い可能性があります。最近ではPCサイト並に重要視さ …

WordPress3.4にアップデートしたらカスタムフィールドで入力した項目が表示されなくなった

1年以上前の記事です。内容が古い可能性があります。つい先日、WordPress( …

no image
「プログラムの追加と削除」に残ってしまったアプリを消す方法

1年以上前の記事です。内容が古い可能性があります。「コントロールパネル」にある「 …

Flicksquareの設定を復活させる方法(foursquare→Flickr連携)

1年以上前の記事です。内容が古い可能性があります。Flicksquareの設定が …

血液型オヤジ