アクセスランキング

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

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”の部分)は好みに合わせて書き換えてください。パーツに対して縦幅が足りない時はスクロールバーが表示されるので、あまりパーツにスペースを割きたくないときは小さめの数字を指定しておけば大丈夫です。
 

This entry was posted on 水曜日, 5月 4th, 2011 at 22:07 and is filed under 更新. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
9 Responses to “アメブロのトップページにブログパーツを設置する”

あのもっと早い話このサイトの「AKBアンテナ」ってやつみたいにしたいです
http://akb48matome.com/

リンク先サイトを見させてもらいました。将来的にブログパーツで表示させる
ブログが増えた場合にそのリンク先のサイトさんのように
タブ別で表示させる方法をとるかもしれませんが、現在のところ
チームごとにタブで分けて表示させるというような事は考えていないです。
もうしわけないです。

このサイトを参考にアメブロトップページにはらさせてもらった者です。

タグを貼ったのですが、文字化けしてしまったのですがどのようにしたら改善ができるのでしょうか・・

宜しくお願いします。

>MJさん
ごめんなさい。こちらの設定ミスでFirefox以外のブラウザだとかなりの確率で
文字化けしてたみたいです。修正後、ie,Chrome,Firefoxの3ブラウザで
MJさんのブログを確認してみましたが、現在は正常に表示されているはずです。

やってみてできたのですが
メッセージボードの変更ができなくなってしまいました
メッセージボードのとこがすごくながいプログラムになってます
文字数オーバーしたのかもです
メッセージボードの公開か保存ボタンが表示されず変更できないんです

>enraiさん
似たような事例がないか検索してみたのですが無いようですね。
試しに、公開ボタンが表示されないという状況を再現しようと思ってメッセージボードに
上限である半角20000文字超えのテキストを貼ってもみたのですが、
警告が出て更新できませんでした。

もし、可能ならメッセージボード編集画面のスクリーンショットをアップして
もらえませんか?アメブロ自体のエラーっぽいので公式サポートに
問い合わせた方が早いかも知れませんが、なにか分かるかもしれません。

やはりアメーバのほうのバグなのでしょうか?
ほかにもいろいろバグありすぎて
わからなくなってます。
こちらのを使った次の日からだったもので
アメーバ運営はきいても返事しないものですから
こちらにたよってみましたが
やはりアメーバのバグなんだとおもいます

このスクリプトはブログが表示される時にだけデータを置き換えているので、
保存されたメッセージボードの内容自体を壊すという事は考えにくいのですが。
でも設置の翌日におかしくなったということは、もしかしたら何かしらの
関係はあるのかもしれませんね。
enraiさんのブログのソースを見たところメッセージボード内に1箇所、
タグが閉じられたてない箇所があったので、試しにテスト用ブログで
スクリプトをわざと半端にコピペしてみたり、タグを閉じずに保存してみたり
したのですが、結局再現できずじまいでした。

もし、メッセージボード内の保存データが壊れているなら、
アメブロ運営が対応してくれない事には厳しいかもです。
お力になれず申し訳ないです。

ちたなみに当サイトの「AKB48とは」のページ下部に、管理人だけに
メッセージを送れるメールフォームがあるのですが、
もし可能でしたらメッセージボード編集画面のhtmlソースをそこから
投稿していただけませんか?直接的な修繕はできないかもしれませんが、
おかしくなっている箇所の特定ぐらいならできるかもしれません。

理解力乏しいでしょうか?

貼ったらブランクの表示スペースは表示されていますが
何も写っていません
原因は何が考えられるでしょうか?

Leave a Reply

post date*

※日本語を一切含まないコメントはキャンセルされます。