Livedoorブログのデザインは下の図（【通常】）のようにサイドバーは左にしかありません。 これを右にも表示させる方法をご紹介します。 色々な方法があるようですがだれでもできる一番簡単にできる方法をご紹介しますので 最後までお読みください。
では、まずこれからやる作業の流れをご紹介します。 大きな流れとしては以下の３つになります。 ①フリーエリアの追加 ②デザインの変更（CSSの修正） ③微調整 ④めんどくさがり屋の方へ（おまけ） それでは手順をご紹介します。
「Blogの設定/管理」画面の「プラグインの追加」－「上級者向けプラグイン」から「フリーエリア」を追加します。 「フリーエリアの設定」画面が表示されますので、以下の文字をコピーし貼り付けます。
以下のように貼り付けが終わったら「設定する」ボタンを押します。
１）「Blogの設定/管理」画面の「デザインの設定」で３カラム後のデザインの名前を控えておきます。 デザインの名前とはデザインの下に書かれた”simple02_1”等の名前のことです。 ２）控え終わったら「デザインの設定」から「スタンダード」－「CUSTOM」の絵をクリックします。 ３）以下のような画面が表示されます。テーマの読み込みから１）で控えた名前を選択し「読み込む」ボタンを押します。
４）ここからはちょっと難しくなります。 読み込まれた暗号のようなものを直接編集してもいいのですが、ちょっと分かりにくいのでメモ帳を起動しましょう。 メモ帳が起動したら上の図の暗号のようなものを全てメモ帳にコピーしましょう。 コピーする時は上の図のどこかで「CTRL+Ａ」（全てを選択）キーを押し、続けて「CTRL+C」（コピー）を押し、メモ帳を開いて「CTRL+V」（貼り付け）キーを押すと楽ですよ。 ５）メモ帳を最大化して見やすくしましょう。 見やすくしたら、「#content{」で始まる文字を探してください。 デザインにより#content{ と ｝の間に書かれている暗号文は異なりますが以下のような感じのものが見つかると思います。
６）#content{ ～ ｝ までの行を以下の内容に置き換えてください。（上書きコピー） このときスペースの位置がずれるなど見た目が違っていても問題ないです。
７）これで終わりだと楽なんですが、もうちょっとだけ作業は続きます。 実は６）で暗号文をコピーしたので.blog｛ ～ ｝の行と#links｛ ～ ｝が２個できているハズなんです。 デザインにより#content{ ～ ｝のすぐ下に両方ある場合もあれば、離れている場合もあります。 そのままだとマズイので、最初からあった.blog｛ ～ ｝の行と#links｛ ～ ｝の行を 探して削除してください。 デザインにより～の部分の行数が異なりますので、.blog｛ で始まって次の ｝までの行と、#links｛ で始まって次の ｝までの行を削除してください。 ８）終わったらメモ帳の内容を上の３）の画面にコピーします。（上書きコピー） ９）コピーが終わったら「保存する」ボタンを押してください。 １０）最後に「Blogの設定/管理」画面の「BLOGの再構築」を行ってください。間違いがないように「全ページ」を再構築した方が良いと思います。 ここまでお疲れ様でした。 再構築後にサイトを表示させても右フレームは出てこないと思います。 何故かって？ 恐らく「①フリーエリアの追加」で「</div></div><div id="links2"><div>」を入力したフリーページより下にフリーページが無いと思いますので・・・ 。その時はサイドバー右が出ないんです。 その時は「Blogの設定/管理」画面の「プラグインの追加」－「上級者向けプラグイン」から「フリーエリア」を追加してください。 その後、「BLOGの再構築」（全ページ）をすれば表示されているはずです。 サイドバー右が表示されましたか？ 最後にちょっとだけ微調整ポイントをご紹介します。
「②デザインの変更」の６）で修正した内容について簡単な微調整方法をご紹介します。
変更が終わったら「②デザインの変更」の８）以降を実行してください。
Livedoorブログのdefaultを３カラム化したサンプル作りましたのでをこちらからダウンロードしてコピーしてください。
ここまで読んでくださって本当に有り難うございました。
|
