はてなダイアリーの記事に、はまぞう利用で書籍のリンクを

ISBN:XXXXXXXXXX:detailやISBN:XXXXXXXXXX:imageで表示すると縦並びになってしまいます。
(実際にはXXXXXXXXXXに数字が入ります)

横に並べていく方法を教えて下さい。

宜しくお願い致します。

回答の条件
  • 1人5回まで
  • 登録:2006/07/25 11:00:48
  • 終了:2006/07/26 05:34:57

回答(2件)

id:sdkfz No.1

すだこふつ回答回数992ベストアンサー獲得回数482006/07/25 11:17:17

ポイント100pt
「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

  • 作者: 鈴木 芳樹 はてな
  • 出版社/メーカー: ディーアート
  • メディア: 単行本
「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

  • 作者: 鈴木 芳樹 はてな
  • 出版社/メーカー: ディーアート
  • メディア: 単行本

http://hatenadiary.g.hatena.ne.jp/keyword/%e8%a1%a8%e7%b5%84%e3%...

表を組んで見ました。

id:SumireS

表の内側にある書籍情報を読みやすく表示するには、横幅を広げたいと思いますが、

どのようにすれば良いでしょうか?

回答ありがとうございました。

2006/07/25 11:25:54
id:quintia No.2

quintia回答回数562ベストアンサー獲得回数712006/07/25 19:57:31

ポイント100pt

あまり簡単じゃありませんけど。


設定-デザイン(詳細デザイン)-スタイルシート で、

div.my-asin-detail div.hatena-asin-detail,
div.my-asin-detail-small div.hatena-asin-detail {
float:left;
margin :5px;
}

div.my-asin-detail {
height:180px;
}

div.my-asin-detail-small {
height:100px;
}

を追加。180px や 100px はただの経験則です。


ダイアリーの方には、

><div class="my-asin-detail"><
asin:475751719X:detail asin:475751719X:detail
></div><


><div class="my-asin-detail-small"><
asin:475751719X:detail:small asin:475751719X:detail:small
></div><

のように、divエレメント(class指定付)で、横に置きたい複数の asin:~:detail 記法を括って書きます。


面倒の様に思うでしょうが、商品名が長すぎたりすると妙なレイアウトになってしまうので、明に「横に置くんだ!」と指定してやる方法の方がいいのでは、という気がします。「今まで書いてきたダイアリー全部見直さなきゃいけないの?」という問題もありますし。

商品名が長すぎる例。↓

><div class="my-asin-detail"><
asin:B000GJ5FF0:detail asin:B000GJ5FF0:detail
></div><

:image 記法の方は私のところでは(プライベートモードです)、何もしなくても横に並んでくれるんですよね。テーマの差かもしれません。

id:SumireS

大変ご丁寧なご指導ありがとうございました。

『何もしなくても横に並んでくれる』のは、

表示モードの差ではなく、テーマの差なのですね?

私はQuery000というテーマを選択しているのですが、quintiaさんのテーマは何をお使いでいらっしゃいますか?

回答ありがとうございました。

2006/07/26 01:59:23
  • id:quintia
    もしかして……。
    :image 記法は div エレメントが発生しないので、
    asin:475751719X:image asin:475751719X:image
    と横に並べて書けばいいだけなんですが、それに気がついてなかったですか?
  • id:SumireS
    横に
    ISBN:XXXXXXXXXX:detail ISBN:XXXXXXXXXX:detail ISBN:XXXXXXXXXX:detail
    と記入していくと、ページ表示には一つずつ縦に並んでしまうのです。(T_T)

  • id:quintia
    :detail 表記は
    <div class="hatena-asin-detail">
    :
    :
    </div>
    という html を吐き出します。div はブロックレベルエレメントなので縦に並びます。


    :image 表記は
    <a href="~"><img src="~"></a>
    という html なので横に複数書けば横に並びます。


    div.hatena-asin-detail {
    float:left;
    }
    とcss指定すると、<div class="hatena-asin-detail">~</div>は左詰めで並んでいきますが、その後ろに続く本文も右側に出てきてしまうので、
    div.my-asin-detail {
    height:180px;
    }
    と高さを指定したブロックを作って、その中に並ばせたわけです。
  • id:SumireS
    なるほど・・・・
    こちらのご説明を拝見して、だいぶわかってきました!!

    CSS系統まったく不如意なのですが、
    quintia様の今回のご指導で私の頭脳がたいぶ進歩できました。
    ありがとうございました。

    はてなダイアリーが自分好み仕様になるまでの間、またお世話になるかもしれませんが、
    何卒宜しくお願い申し上げます。<(_ _)>

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

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

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

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