livedoor Blogで3カラム化してたのに2カラムにレイアウトが崩れた :ネット・ライフ(yuuの徒然日記)

HP運営やPC・MT・WPなどのトラブル奮闘・備忘録等・yuuの日常徒然ぼやき日記

ホーム > HP製作・ブログ関連 > livedoor Blogで3カラム化してたのに2カラムにレイアウトが崩れた

livedoor Blogで3カラム化してたのに2カラムにレイアウトが崩れた

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

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

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

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

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

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

■今までやっていた事

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

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

■今回やった事

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

■起きたトラブル

今まで3カラムにきちんとなっていたのに、サイドバーが1列になって2カラムになってしまった

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

■原因

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

変更後には

<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> 』 部分が追加されていた為に、サイドバー1プラグインと2のプラグインの間に変な<DIV>タグが入ってしまい、レイアウトが崩れていた。

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

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

■対処法

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

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

修正前

修正後

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

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

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



ライブドアブログ 関連本


Powered by fun9.net

関連記事
カテゴリー: HP製作・ブログ関連  | キーワードタグ: ブログカスタマイズトラブルメモ
[ 2009/07/02 20:42 ]    コメント(0)TB(0)  | Edit| ▲Top
コメントの投稿




    


管理者にだけ表示を許可する
コメントの表示
スポンサード リンク
人気記事ランキング