2005年05月09日

片側にサイドバー二本

片側にサイドバー二本

だいぶ前にgooブログ(だったかな?)で見てから
ずっとやってみたかったんです。
配布CSSの見本HTMLを作ってるときに
「もしかしたら?」と思ってたことを試してみたらできました。
ただこのままだとちょっと不恰好かな?

この作業、新記事を投稿してからやってしまったため、
20:55から一時間ほど、
タイミングによっては表示が大変なことになっていたかもしれません。
そのタイミングで来てくださった方、ごめんなさい(>_<)


やり方は
1.デザイン→コンテンツ→左右のサイドバーにコンテンツを振り分ける。
2.デザイン→HTML→HTMLの追加
3.
<div id="container">
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script>
<div id="banner">
<% content_header %>
</div>

  の下にある
<% if:have_content_left -%>
<div id="links-left">
<% content_left %>
</div>
<% /if -%>
(はじめに表示された状態で枠内の一番下あたり)

を切り取る。
4.下の方にスクロールしていって
<% if:have_content_right -%>
<div id="links">
<% content_right %>
</div>
<% /if -%>
(スクロールバーを一番下までおろすと真ん中あたりにあります)

  の上か下に3.を貼り付け。
  (上に貼り付けると左から記事→左サイドバー→右サイドバー
   下に貼り付けると記事→右サイドバー→左サイドバーとなります)

逆に4.を3.の上か下に貼り付ける(3.はそのまま残しておきます)と
左にサイドバーが二本現れます。
が、肝心の記事が落ちてしまう確率が高いと思うのでお勧めしません。
右が無難だと思います。

ちなみに3.4.の記述は記事に表示できるように<>を大文字に変えてあるため
ここからコピー&ペーストしてもサイドバーは移動しませんのでご注意を。

--------
2005/07/23追記
小文字で表示されるようにしてみました。
ここからのコピペでも大丈夫……なはず。
でも編集画面のをコピペした方が確実だと思います。
--------
タグ:HTML
posted by 四葉屋 at 21:47| Comment(0) | TrackBack(0) | HTMLいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/3533083

この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。