2006年10月27日

裏まぬけ日記 コンテンツをスクロール

ひさびさに裏まぬけ日記。

そしてひさびさに一日に二記事目w



yuccoさんからお問い合わせいただいたのですが、サイドバーに設置しているコンテンツをスクロール表示させる方法をご紹介します。

まずは、まぬけ日記の左サイドバーにある、『BlogPeople』をご覧ください。

表示が長くなるため、一覧表示を一定の高さに固定して、スクロール表示されるようになっていますよね?(説明が下手でごめんなさい)

これの設定の仕方です。




まずは、【デザイン】−【コンテンツ】を選択してください。

自由形式を3つ作ります。

1.スクロール開始
新しいコンテンツを作成で、自由形式を作ります。
追加先は全ページでいいでしょう。
配置は左サイドバーに設置する場合は、左サイドバーを選択。
並び順は、今回作る自由形式3つが連番になるようにします。
ここでは連番の最初の数字にしてください。
タイトルをわかりやすく『スクロール開始』とつけます(わかりやすければなんでもOK)
自由入力欄に以下を書く。

<div id="scr">

scrの部分はわかりやすいなまえにしてください。

ここでは『スクロール』の『scr』にしています。

書きましたら保存を押してください。

2.スクロールさせたいコンテンツ
スクロールさせたいコンテンツを作成します。
自由形式にしてタグを貼ってください。
全ページ、左サイドバー、並び順は2番目にして保存。

3.スクロール終了
新しいコンテンツを作成で、自由形式を作り、全ページ、左サイドバーに設定。
並び順は、3番目にしてください。
タイトルをわかりやすく『スクロール終了』とつけます。
自由入力欄に以下を書く。

</div>

保存して終了。

ここまでで、3つのコンテンツが順番に作成されていますね。

並び順が間違えてないか確認してください。

次に、スタイルシートをいじります。

【デザイン】−【スタイルシート】で、現在のスタイルシートを選択します。

BODY{・・・・・
}


の下あたりに、

#scr .side {
OVERFLOW-X: hidden; OVERFLOW: scroll; HEIGHT: 200px
}


を追加してください。

scrは先ほど作ったスクロールを表した名前です。

HEIGHT: 200px

はコンテンツの高さを表しています。

この数字を大きくすればコンテンツの高さも高くなります。

記述したら保存してください。

ここまでやったら、ブログ全体を再構成してください。

これで指定したコンテンツがスクロールされるようになります。

わかりづらいですが・・・

yuccoさん、こんな感じでわかりますか〜?

ニックネーム なん at 23:36| Comment(7) | TrackBack(0) | まぬけ日記12 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
yuccoさん、わかりましたよね〜!
ちなみに私は説明よりパソ語が分かりません!なんさんの説明は順序よくやればできるのでしょうね。
あ〜もっとパソコン用語から勉強しなくちゃだわ(´ぅω・`)
Posted by エメラルド at 2006年10月28日 07:25
ああ、なるほどね〜と思いました。
3つに分けるとうまくいくんですね〜。
勉強になりました!
Posted by みかん at 2006年10月28日 08:49
なんさーん、おかげさまですぐにできました♪
人´∀`).☆.。.:*ありがとぉ
すっごくスッキリして、嬉しいです^^
3つに分けるという発想が、素人の私…
まったくありませんでした^^;

なんさんのご説明は、わかりやすくって本当に最高です!
なん師匠、またなにかわからないことがありましたら、
ご指導よろしくお願いしますね*(u-u)*
本当にありがとうございました゚+。тндйк чоц。+゚
Posted by yucco at 2006年10月28日 18:32
【返信】エメラルドさんへ

こんばんはー
おいら日本語が下手なので説明がややこしいんですよね^^;
パソ語は確かにややこしいかも。
ペログーではあまりこういったタグが使えないんですよね。
使うようになると慣れてくるんですけどね。
パソコンが家電になれないのは、パソ語がややこしいからなんですよね。
Posted by なん at 2006年10月29日 20:17
【返信】みかんさんへ

こんばんはー
そうなんです。
コンテンツを3つに分けることでうまくいくみたい。
以前アセラで他の方に教えていただいたんです。
これだとサイドバーがすっきりするんですよね。
Posted by なん at 2006年10月29日 20:21
【返信】yuccoさんへ

こんばんはー
ややこしい説明ですみませんでした。
説明下手なもんで^^;
とりあえずできたみたいで安心しました♪
おいらも以前他の方に教えていただいたんですよ。
おいらも素人なので、難しいことはわかりませんが、わかる範囲でなら裏まぬけ日記でお答えします!
Posted by なん at 2006年10月29日 20:23
はじめまして!
うわー!!
ずっとこれのやり方を求めていたんです・:*:・(*´∀`*)ウットリ・:*:・

お借りしました!
本当に感謝しています。

実は前からちょくちょく裏まぬけ日記さんの方は見ていたんですが、あちらに載っていなかったものですから、すごく探していたんです。
これからもコネタを楽しみにしています((o(´∀`)o))ワクワク
Posted by 美香りん at 2007年02月15日 15:53
この記事へのトラックバックURL
http://a-thera.com/tb/550682
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

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