BlogPeopleの表示について

このQ&Aのポイント
  • Seesaaブログで表示されるBlogPeopleが長くなってしまった場合、スクロールバーをつける方法を検索しましたが、うまくいきませんでした。
  • スタイルシートに.blogpeople-main { overflow: auto; height: 400px; } を追加しても、表示が変わらなかったため、改めて解決方法を教えていただきたいです。
  • 400pxを200pxに変更しても問題が解決せず、BlogPeopleの表示が変わらない状況です。どなたか助けてください。
回答を見る
  • ベストアンサー

BlogPeopleの表示について

Seesaaブログを使っています。 BlogPeople をサイドバーに表示すると非常に長くなってしまったので、スクロールバーをつける方法をネットで検索して調べました。 すると、以下を一行をCSSに加えるだけという事でした。 .blogpeople-main { overflow: auto; height: 400px; } そこで早速やってみた所、上手くいきませんでした。 デザイン→スタイルシート→(スタイルシート名をクリック)→スタイルシートの最後に .blogpeople-main { overflow: auto; height: 400px; } を追加して「スタイルシートを変更する」をクリック→再構築 この手順でサイトを確認した所、変更前と同じでした。 その後 .blogpeople-main { overflow: auto; height: 400px; } の400pxを200pxにしてみましたが、やはり変更前と変わらず。 どなたか解決方法を教えて下さい。

質問者が選んだベストアンサー

  • ベストアンサー
noname#14286
noname#14286
回答No.1

cssというのは臨機応援に対応していかないとダメなんです。 .blogpeople-main { overflow: auto; height: 400px; } こうかいてあったからといって、そのまま書いても 自分のブログの中(html)にblogpeople-mainっという文字がなければ 意味がありません。 ブログピープルを表示してある div classとかの名前はなんですか? blogpeople-mainにあわせるか 今ある名前に cssの方を変更するかしないと、効きません。

twopence
質問者

お礼

早速のご回答、ありがとうございました。 >こうかいてあったからといって、そのまま書いても 自分のブログの中(html)にblogpeople-mainっという文字がなければ 意味がありません。 そうなんですね。 てっきり、そのまま書けばいいものかと…。 >ブログピープルを表示してある div classとかの名前はなんですか? 大変申し訳ありません、これがよく分かりませんでした。 もう少し詳しく教えて頂けると幸いです。

関連するQ&A

  • SeesaaブログにBlogPeople (スクロールバー表示方法)

    Weblogのカテゴリで質問をしたものの、問題が解決しなかったので、一度締切り、再度こちらで質問させて頂きます。 ▼前回の質問 質問:BlogPeopleの表示について http://oshiete1.goo.ne.jp/kotaeru.php3?q=1720270 Seesaaブログを使っています。 今、BlogPeopleをサイドバーに設置していますが、新着記事10件・全てが表示されると縦長になってしまいます。 そこでスクロールバーをつける方法をネットで検索した所、 .blogpeople-main { overflow: auto; height: 400px; } をCSSに一行加えるだけでOKとのこと。 早速やってみましたが、上手くいかず、教えて!gooで質問しました。 回答は1件ありましたが、私の知識不足で、どうもよく分かりませんでした。 回答には『自分のブログの中(html)にblogpeople-mainっという文字がなければ意味がありません。』 とありましたが、スタイルシートの中には、この文字列はありませんでした。 初心者にも分かるよう、教えて頂けると嬉しいです。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 疑似フレームがIEだと成り立たない

    疑似フレームがIEだと成り立たない 以下のようなCSSですが、FIREFOXやクローム等では反応するのですが、 IEだと処理されません。 どうすればいいのでしょうか? 教えてください。お願いします。 ちなみにCSSというものは初心者です。申し訳ありません。 <STYLE> <!-- BODY .menu1 { width : 12%; height : 100%; left : 0px; top : 100px; position : fixed; overflow: auto; } .menu2 { width : 12%; height : 100%; right : 0px; top : 100px; position : fixed; overflow: auto; } .main { position : absolute; z-index : 1; } --> </STYLE>

  • フロートしたボックスのスクロールバー

    メインのフロートボックスに垂直スクロールバーをつけたいのですが、 上手くいきません。 スタイルシートに (メインのボックス↓) .l_main { margin: 0px; padding: 0px; width: 600px; height: 550px; float: right; overflow:auto;(←スクロールバーの要素を記述) } こう記述しているのですが、ページ内容によってものすごく縦長になったり、いらぬ余白が出来たり。 独学の上、CSSの参考サイトからコピペなどして適当にやっているので分かりません。よい方法を教えてください。

  • <div style="overflow">でこんなことは出来ませんか?

    <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssで擬似フレームについて

    はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか? HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> (width="800" height="180" のflashファイルを入れています) </div> <div id="main">  ( width="700"のコンテンツを作りスクロールさせていま)  </div> <div id="footer">テキストを一行入れています</div> </body> ___________________ css html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; }   #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; }  #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; }  このような感じなのですがなにかいい方法があればご教授お願いいたします。

    • ベストアンサー
    • HTML
  • fire foxでリスト番号が表示されてしまう

    プルダウンメニューを使っていてリストマークを表示しない設定にしていますが、firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。原因が分かる方いらっしゃいましたら解決方法を教えてください。(下記は5つメニューがある中の3つ分のHTMLとCSSです。) <==HTML==> <div id="menu"> <ul class="main"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">トップ</a> </li> </ul> <ul class="main2"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">メニューのご紹介</a> <ol class="sub"> <li><a href="#">トップ</a></li> </ol> <ol class="sub2"> <li><a href="#">メニューのご紹介</a></li> </ol> </li> </ul> <ul class="main3"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">店舗のご案内</a> <ol class="sub3"> <li><a href="#">店舗のご案内</a></li> </ol> <ol class="sub4"> <li><a href="#">当店の歴史</a></li> </ol> <ol class="sub5"> <li><a href="#">ご予約</a></li> </ol> </li> </ul> </div> <==CSS==> /****全体位置の決定****/ #menu{ width:630px; height: 89px; float: left; z-index: 1000; margin-top: 20px; margin-left: 0px; padding-left: 0px; list-style-type: none; left: 4px; top: -12px; font-size: 0.8em; position:relative; } /****メインメニュー用スタイル****/ ul.main{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main2{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main3{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } /*通常時*/ .main li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main2 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main3 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } /*展開時*/ .main li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main>li.on{ overflow:visible;/*×*/ } .main2 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main2>li.on{ overflow:visible;/*×*/ list-style-type:none; } .main3 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main3>li.on{ overflow:visible;/*×*/ } /*リンクスタイル*/ .main a{ display:block; text-decoration:none; background-image: url(images/m_top.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main a:hover{ background-image: url(images/m_top-on.jpg); } .main2 a{ display:block; text-decoration:none; background-image: url(images/m_menu_list.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main2 a:hover{ background-image: url(images/m_menu_list-on.jpg); } .main3 a{ display:block; text-decoration:none; background-image: url(images/m_store.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main3 a:hover{ background-image: url(images/m_store-on.jpg); } /****サブメニュー用スタイル****/ ol.sub{ text-align:left; margin: 0px; padding: 0px; height: 40px; width: 126px; }

  • BlogPeopleで作ったリンクリストを自分のブログに表示する方法

    ブログ初心者です。Gooブログです。 BlogPeopleに登録して、リンクリストというものを作ってみました。 リンクしたサイトが更新したらどんなマークでお知らせするか、までのステップはクリアできたのですが、最後の最後にきてつまづいています。 「コードを作成」をクリックして、Javaなんとかのコードができた(よう)ですが、それをどうすればよいのでしょうか? BlogPeopleの説明では「コードをコピーして、あなたのブログの中のリンクリストを置きたいところ(サイドバーなど)に貼り付けます」とあります。 自分のブログのページを表示させて、右クリックで「貼り付け」が出てくるかと思ったのですが、出てこないんですよね。 きっと、トンチンカンなことをしているのだと思います。 方法をお教えください。宜しくお願いします。

  • FC2 basic_White 記事本文全文表示

    FC2のブログを始めたばかりです。 basic_Whiteで、通常の記事の本文を表示させる設定をしています。 http://fc2blogtemplate.com/blog-entry-19.html を見ながら、HTMLの方は、変更する場所が記されていたので、変更できたのですが、スタイルシートについては、追加するコードをどこに追加するのか分かりません。 お分かりになる方、教えて頂けませんか? スタイルシートのコードは、 --- /* タイトル全文表示・スイッチ非表示 */ #main #main_contents h2.entry_header a, #main #main_contents h2.sub_header a{ height: auto; width: auto; white-space: normal; padding: 0 11px 0 0; } .switch {display: none;} /* END */ --- です。 よろしくお願い致します。

  • seesaaでテンプレートを変更したい

    seesaaでブログを楽しんでいます。 現在「アイボリー(左サイドバー)」というテーマタイトルのスタイルシートを使っています。 この左サイドバーというのを両サイドバーというのに変えたいと思っています。 ところが用意されている両サイドバースタイルのもののなかからアイボリーが見つかりません。 サイドバーを増やすこと以外は変更したくないのですがどのようにすればよいのでしょうか? スタイルシートをいじったことがないので途方にくれています。

  • スムーズにスクロールできるスプリクトが作動しません

    初めて質問させていただきます。 ページ内にスタイルシートを使ってスクロールしても動かない案内板のようなボックスを作り、その中でページの上部に戻る際、スルスルとスクロールするjavascriptを入れたいのですが、うまく作動しません。 <script type="text/javascript" src="○○.js" charset="utf-8"></script> <STYLE type="text/css"> <!-- html{ height:100%; overflow:hidden; } body{ height:100%; margin:0px auto; } #sub{ width:100px; position:absolute; bottom: 0px;   right: 0px; z-index:100; } div#main{ width:100%; height:100%; overflow:auto; } --> </STYLE> </HEAD> <BODY> <DIV id="sub"><A href="○○">あいうえお</A><BR><A href="○○">かきくけこ</A><BR><a href="#top">上へ</A></DIV> <DIV id="main"> <A name="top"></A><BR> ・・・略 </div> </body> 普通のbody内でリンクを指定すると、問題なくスプリクトが作動します。 なぜ、div内では作動しないのでしょうか? いろいろ調べてみましたが、どうしても分からず、こうして質問させていただきました。 原因がわかる方がいらっしゃいましたら、どうか教えてくださいますようお願いいたします。