ライブドアブログでアダルトブログを作りました。左側のスペースに女優名の一覧を作ったのですが、長くなりすぎてしまいました。


そこでスクロールバーを利用しようと思います。

HTMLやCSS、あとライブドアブログでの記述の仕方について詳しい方教えてください。

ブログ左側にある、頭文字が『あ』の女優、頭文字が『い』の女優など、スクロールバーで15人分ぐらいがそのまま見えて、後はスクロールしてみるという形にしたいです。
http://jyosikousei.net/

いちよアダルトブログなので18歳未満の方は訪問しないでください。よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/04/18 10:50:44
  • 終了:2010/04/22 21:00:37

ベストアンサー

id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/04/18 13:29:32

ポイント65pt

出力された HTML では実際のテンプレートが分からないため、

細部が異なるかもしれませんが、以下で可能です。


■HTML の変更

<div class="plugin-memo sidewrapper">
<div class="sidetitlebody">
<div class="sidetitle">『あ』のAV女優</div>

    ↓

<div class="plugin-memo sidewrapper actress-name">
<div class="sidetitlebody">
<div class="sidetitle">『あ』のAV女優</div>

上記の場所に actress-name を追加する。

※『か』以降も、同様の場所に追加してください


■CSS の変更

.actress-name {
overflow: auto;
height: 45em;
}

スクロールバーを、見出しにぴったりつけたい場合は height の下の行に「margin-top: 0;」を追加してください。

高さの「45em」とは「45文字分」という意味です。

現在の表示では名前の下に空間があり、1人分の名前が「およそ3文字分の高さ」になっているため、

15人分なら、45em という指定になります。(10人分にしたければ 30em)

※○○px という指定方法もありますが、

 文字の大きさを変えている閲覧者にも対応できる ○○em での指定をおすすめします

id:rakusutasia

すごい丁寧な回答をありがとうございます。明日、上の方法でうまくいくか、挑戦したいと思います。

kaz様、貴重なお時間頂戴し、ありがとうございます!

2010/04/18 23:53:11

その他の回答(1件)

id:koriki-kozou No.1

koriki-kozou回答回数480ベストアンサー獲得回数792010/04/18 12:14:03

ポイント5pt

サイドバーにスクロールバーをつけるcssを考えてみた

div.plugin-memo sidewrapper { overflow: scroll; height: 20em; }

この一行で全てのサイドバーの高さが20文字分になる

20文字を超えた場合はスクロールバーがでる

id:rakusutasia

相互リンクなどスクロールバーをだしたくないものもあるので、ちょっと私としては使いづらいです。

せっかく考えていただいたのに、申し訳ありません。指定した部分だけ、スクロールバーがでる、そんなCSS、HTMLを希望しています。

2010/04/19 09:30:03
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/04/18 13:29:32ここでベストアンサー

ポイント65pt

出力された HTML では実際のテンプレートが分からないため、

細部が異なるかもしれませんが、以下で可能です。


■HTML の変更

<div class="plugin-memo sidewrapper">
<div class="sidetitlebody">
<div class="sidetitle">『あ』のAV女優</div>

    ↓

<div class="plugin-memo sidewrapper actress-name">
<div class="sidetitlebody">
<div class="sidetitle">『あ』のAV女優</div>

上記の場所に actress-name を追加する。

※『か』以降も、同様の場所に追加してください


■CSS の変更

.actress-name {
overflow: auto;
height: 45em;
}

スクロールバーを、見出しにぴったりつけたい場合は height の下の行に「margin-top: 0;」を追加してください。

高さの「45em」とは「45文字分」という意味です。

現在の表示では名前の下に空間があり、1人分の名前が「およそ3文字分の高さ」になっているため、

15人分なら、45em という指定になります。(10人分にしたければ 30em)

※○○px という指定方法もありますが、

 文字の大きさを変えている閲覧者にも対応できる ○○em での指定をおすすめします

id:rakusutasia

すごい丁寧な回答をありがとうございます。明日、上の方法でうまくいくか、挑戦したいと思います。

kaz様、貴重なお時間頂戴し、ありがとうございます!

2010/04/18 23:53:11
  • id:rakusutasia
    ライブドアブログには、デザインのカスタマイズがあり
    スタイルシート(CSS)
    トップページ
    個別記事ページ
    カテゴリアーカイブ
    月別アーカイブ
    を変更することができるようですが、
    <div class="plugin-memo sidewrapper">
    <div class="sidetitlebody">
    <div class="sidetitle">『あ』のAV女優</div>
    の場所がわかりませんでした。

    お手数ですが、上のHTMLを変更する場所をご存知の方、いましたら教えてください。
  • id:kaz
    回答番号2 の kaz です。
    すみません、その部分は直接編集できませんでした。
    ブログパーツの「フリーエリア」を利用して、
    作成されていると思いますので、以下のようになります。


    1:女優名のフリーエリア編集欄を変更
    全体を <div class="actress-name"> と </div> で囲む。

    例:
    <div class="actress-name">
    <P align="left">
    <A target="_self" href="○○">○○<BR></A><BR>
    <A target="_self" href="○○">○○<BR></A><BR>
    <A target="_self" href="○○">○○<BR></A><BR>
    </P>
    </div>


    2:CSS に以下を追加する
    .actress-name {
    overflow: auto;
    height: 45em;
    }

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません