アクセスランキング

Topics > 更新

アメブロトップ用ブログパーツの文字化けを修正

5月 15th, 2011 >> 更新

アメブロトップ用のブログパーツがFirefox以外で閲覧すると高確率で文字化けする問題を修正しました。
ご指摘ありがとうございました。

アメブロのトップページにブログパーツを設置する

アメブロのトップページにブログパーツを設置する

5月 4th, 2011 >> 更新

ブログパーツ「AKB48メンバーブログチェッカー」を公開してから約1ヶ月。おかげさまで同ブログパーツは現在100を超えるブログ、サイト様でご利用いただいています。10人ぐらいでも使ってくれる人がいたら御の字と思っていただけに嬉しい限りです。ありがとうございます。今後ともご愛顧のほどよろしくお願いいたします。そんな中、とあるアメーバブログ利用者の方から「サイドバーではなくトップにブログパーツを貼りたい」というご要望をいただきました。
 
アカウントを取るだけ取って忘れていたアメブロで確認したところ、アメブロではJavaScriptを貼れる場所がサイドバーの一区画に限定されていて、原則、メインカラム(ブログの中央部)にはブログパーツの類を貼る事はできないとのこと。これは積みか?と諦めかけていたところ、うえはすさんというサイトのアメブロのメッセージボードにメール登録フォーム等を設置するという記事にたどり着きました。上記の記事を参考にどうにかアメブロトップ用のコードを作成。動作の関係でCSS、表示件数、リンクを新しいウインドウで開く設定が固定ですが、アメブロユーザーでサイドバーにパーツ設置スペースが無いという方はぜひ一度試してみてください。
 
 
1.フリープラグインに下記をコピー

<!-- アメブロでiframe(インラインフレーム)を使う方法 -->
<script type="text/javascript"><!--
$(function(){
$("div.iframeCreate").each(function(i, O){
var tag = 'iframe';
var attrs = new Array("src", "width", "height", "frameborder", "scrolling", "marginwidth", "marginheight");
for(var i in attrs){
if ($(O).attr(attrs[i])) {
tag += ' ' + attrs[i] + '="' + $(O).attr(attrs[i]) + '"';
$(O).removeAttr(attrs[i]);
}
}
tag = "<" + tag + "></iframe>";
$(O).empty();
$(O).append(tag);
});
});
//--></script>

 
 
2.メッセージボードに下記のどちらかをコピー

<!-- 全ブログ表示用 -->
<div class="iframeCreate" src="http://allakb48.info/memberblog_amebaheadall.html" frameborder="0" height="500px" width="100%"><br />
</div>
 
 
<!-- 新着10ブログ表示用 -->
<div class="iframeCreate" src="http://allakb48.info/memberblog_amebahead10.html" frameborder="0" height="500px" width="100%"><br />
</div>

アメブロのテンプレートを特別にカスタマイズしていない限りは、ブログのトップページだけに表示されるはずです。パーツの縦幅(height=”500px”の部分)は好みに合わせて書き換えてください。パーツに対して縦幅が足りない時はスクロールバーが表示されるので、あまりパーツにスペースを割きたくないときは小さめの数字を指定しておけば大丈夫です。