まとめ:エディタコミュのブログパーツについて

エディタコミュのブログパーツについてのまとめです。

『エディタコミュのブログパーツは便利だけど、デザインがちっと私のブログに合わないなあ』と思っておられる方への簡単なTipsです。
具体的にはこのブログ右下方のエディタコミュブログパーツのようなシンプルな表示にします。

そんな需要ないかと思ったけれど、たまに関心を示される方もおられるので、手順をまとめておきます。

まあ、失敗してもコードをもとに戻せば済む話ではありますが、一応自己責任でお願いしますね

(1)エディタコミュニティのブログパーツのコード全体を<div>でくるむ

まずエディタコミュニティで取得したコードの先頭に次のコードを追加します。

<div id="edita_community_parts">

次にエディタコミュニティで取得したコードの最後に次のコードを追加します。

</div>
<a href="javascript:document.getElementById('edita_community_parts').innerHTML.match(/editablogparts_(\d+)_wrapper/);alert(RegExp.$1);">TEST</a>

(2)テスト

まだ完成じゃないですよ。
ここでブログをリロードしてみますと、ブログパーツの下に TEST と表示されているはずです。
このTESTをクリックして、表示された日付をメモして下さい。
私のところでは 20070718 です。殆どの方がそうなのではないかと思います。

(3)テストコードの削除

(1)のところで最後部に追加したコードのうち、次の部分だけを削除します。

<a href="javascript:document.getElementById('edita_community_parts').innerHTML.match(/editablogparts_(\d+)_wrapper/);alert(RegExp.$1);">TEST</a>

(4)CSSコードの追加

この段階でエディタコミュニティのコードは次のようになっているはずです。

<div id="edita_community_parts">
(エディタコミュニティのコード)
</div>

この後に、次のコードを追加します。
その際、赤で示した部分を(2)のテストで取得した日付に置き換えて下さい。

<style type="text/css">
#edita_community_parts{
height:260px;
overflow:hidden;
}
#editablogparts_20070718_wrapper{
visibility:hidden;
}
#editablogparts_20070718_head{
display:none;
}
#editablogparts_20070718_body{
margin:0;
padding:0;
}
#editablogparts_20070718_table{
margin:0;
background-color:transparent;
}
</style>

これで基本的に終了です。
もし背景色を変えたいときは、上のコードの一番最後のほうにある transparent の部分を適当なカラーコードに変更して下さい。例えば transparent を #FFFFFF に置き換えると、背景色が白になるわけです。