ネット・ライフ（yuuの徒然日記）

半年ほど前に「livedoor Blog」を作ってみたのだが、久々に「サイドバーに１つバナーでも付けるか・・」とプラグインを更新した所、突然レイアウトが崩れてしまった。

プラグインのそれまでにもあった「フリーエリア」にリンクを加えただけで、
レイアウトは何も触っていない。

それなのに３カラムが突然２カラムになってしまったのだ。

原因が分からずかなり苦労したが、どうやらライブドアのブログパーツ自体のソース変更があったのが原因だったようだ。

プラグインを変更した為に、新しいHTMLに対応されて崩れてしまったよう（T−T)

詳しく原因などを書いておこう。

■今までやっていた事

ライブドアのブログは２カラムが標準で、３カラムにするには独自のカスタマイズが必要らしい。
色々探して、私はフリーエリアを使って３カラムにしていた。

「プラグイン」の「フリーエリア」に
 </div></div><div id="links2"><div>
のタグを追加する

参考： BaySky eBLOG:３カラム化(Non-Java)
3カラム化-ライブドアブログ

■今回やった事

サイドバーにリンクを加える為にプラグイン のフリーエリアにリンクを追加した。

■起きたトラブル

今まで３カラムにきちんとなっていたのに、サイドバーが１列になって２カラムになってしまった。

その後、プラグインを元のまま（リンク追加する前の状態）に戻してみたが、２カラムのままで戻らない。

■原因

散々触ったり調べた結果、ライブドアのブログパーツ自体のソースが変更されているのが原因とようやく分かった。

変更後には

<div class="plugin-[PluginName] sidewrapper">
<div class="sidetitlebody"><div class="sidetitle">[PluginTitle]</div></div>
<div class="sidetop"></div>
<div class="side">[PluginBody]</div>
<div class="sidebottom"></div>
</div> 

 上記の『<div class="plugin-[PluginName] sidewrapper"></div> 』 部分が追加されていた為に、サイドバー１プラグインと２のプラグインの間に変な<DIV>タグが入ってしまい、レイアウトが崩れていた。

2008年の12月に変更されたようだが、ほぼ放置で今までテンプレートやプラグインの部分は触っていなかったので気づかなかった(^^A)
今回、プラグインを触ったのでテンプレートが再構築されて、新しいレイアウトが反映されてしまったので、崩れたようだ。

　参考：livedoor Blog 開発日誌 : ブログパーツのHTMLソースを変更いたしました

■対処法

プラグインでの３カラム対応は無理なようなので、仕方なくHTMLに直接書き込む事で対応

デザインのカスタマイズの「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の４つのHTMLテンプレに、以下の赤文字部分を追加。

修正前

<div id="links">
<!-- プラグインA -->
<$PluginList_A$>
<!-- プラグインB -->
<$PluginList_B$>

修正後

<div id="links">
<!-- プラグインA -->
<$PluginList_A$>
</div>
<div id="links2">
<!-- プラグインB -->
<$PluginList_B$>

HTMLを直接修正だと、トップや記事など４つも修正するのが面倒だったからプラグインで対応してたのに、まさかブログ自体のタグ変更があっていたなんて思いもしなかったので、トラブルの原因が分からずに１時間くらいは探し続けてしまった。

こんな事なら初めから普通に加えた方が時間が無駄にならなかったと少し後悔・・(；´Д｀)ノ

ま、テンプレやデザインの修正って、トラブルが付きもので
そうやって覚えていくようなもんだから仕方ないか・・(~O~;)

▼ライブドアブログ　関連本