質問させてもらいます。カレンダーをドロップダウン形式で表示させたくて

>>
<hatena name="calendar" template="dropdown">
<<
と表示すると崩れてしまうので
>>
<form action="/LikeLife/" method="get" class="hatena-calendar">
<select name="date" class="hatena-calendar">
<option value="" class="hatena-calendar">-</option>

<option value="/LikeLife/201201" class="hatena-calendar">2020-01</option>
<option value="/LikeLife/201112" class="hatena-calendar">2011-12</option>
<option value="/LikeLife/201110" class="hatena-calendar">2011-10</option>
<option value="http://d.hatena.ne.jp/LikeLife/archive/200905" class="hatena-calendar">2009-05</option>
</select><input type="submit" name=".submit" value="移動" class="hatena-calendar" onClick="location.href=this.form.date.value;">
</form>
</div>
</div>
<<
と表示させています。すると過去のエントリーが全部表示されて困っています。
また、
Entryに最新記事?を表示させたいのですが記述方法がいまいちよく分かりません。
教えていただけると助かります。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/01/21 17:30:10

回答0件)

回答はまだありません

  • id:rouge_2008
    どのように崩れるのでしょう?
    はてなダイアリーでは、javascriptを使用できません(※はてなモジュールと許可されたブログパーツのみ可)ので、CSSでデザインを調整するしかありません。
    「<hatena name="calendar" template="dropdown">」でサイドバーに表示(※「ページのフッタ」欄「<div class="sidebar">」以降に記述)した場合、モジュール共通のタイトル背景、ボックス背景等になりますが、ドロップダウンメニューだけ表示したい場合は、「スタイルシート」欄に以下を記述してみてください。

    .hatena-module-calendar .hatena-moduletitle {
    display:none;
    }
    .sidebar .hatena-module-calendar .hatena-modulebody {
    display:inline;
    background:transparent;
    /*外側余白が要らない場合はここを有効に margin:0; */
    /*内側余白が要らない場合はここを有効に padding:0; */
    }
    .hatena-module-calendar .hatena-modulebody form {
    display:block;
    }
  • id:LikeLife
    http://cdn-ak.f.st-hatena.com/images/fotolife/L/LikeLife/20120115/20120115034630.jpg?1326566886
    モジュールで試してみたのですがこんな感じになってしまいました。
  • id:rouge_2008
    今現在は違う状態のようですし、どのような状態にしたいのかが分からないと、希望の状態に表示するCSSを教える事はできません。
    デフォルトでは以下の画像のようになりますので、崩れるという事はないようです。

    http://f.hatena.ne.jp/rouge_2008/20120115220625

    現在のように3列の部分に表示している他のモジュールと同じように表示されればいいのでしたら、追加した上記コメントのCSSは削除してください。(質問文のコードにはモジュールタイトルが無かったので、モジュールのタイトルを表示したくないのかと思い、上記コメントのCSSを投稿しました。)
    ※モジュールのタイトルを任意の文字列にしたい場合は、「moduletitle="任意のタイトル"」を加えて、「<hatena name="calendar" moduletitle="log" template="dropdown">」のようにするといいです。(参考URLは見つかりませんでしたが、基本的にどのモジュールでも有効なようです。)
  • id:LikeLife
    ありがとうございます。追加の質問になってしまうのですが
    RSSTIMESの表示とカテゴリードロップボックスの位置、過去ログのドロップボックスの位置が気になるのですがどうやって直せばいいでしょうか?
  • id:rouge_2008
    「<div class="hatena-module hatena-module-calendar">」が2つあります。
    「<hatena name="calendar" moduletitle="log" template="dropdown">」の前の「<div class="hatena-module hatena-module-calendar">」を削除して、さらにRSSTIMESの直近にある「<br class="clear">」の前後どちらでもいいので、(※次の「<div class="bar">」より前に)閉じタグ「</div>」を追加してみてください。

    さらにモジュールの表示位置を変更したい場合は、用途に合わせてpaddingを調整してみてください。

    ・モジュール全体(※タイトル含む)の表示位置を変更する場合

    .sidebar .bar .hatena-module {
    padding:任意の値;
    }

    ・モジュール本体(※タイトル除く)の表示位置を変更する場合

    .sidebar .bar .hatena-modulebody {

    padding:任意の値;
    }

    ・特定のモジュールの表示位置を変更したい場合は、次のようにします。
    (※はてなモジュールはそれぞれ「hatena-module-モジュール名」というクラス名が割り当てられています。)

    .sidebar .bar .hatena-module-モジュール名 {
    padding:任意の値;
    }

    例えば、カレンダーモジュールのドロップダウンボックスの部分だけを変更する場合は次のようになります。
    (※他のモジュールに関しても同様に指定します。)

    .sidebar .bar .hatena-module-calendar .hatena-modulebody {
    padding:任意の値;
    }

    ※パディング等の値はpxまたはemで指定しますが、4つ指定した場合は「上 右 下 左」、3つ指定した場合は「上 左右 下」、2つ指定した場合は「上下 左右」、一つ指定した場合は「上下左右」を指定した事になります。
    http://www.kanzaki.com/docs/html/htminfo17-2.html#position

    http://coliss.com/articles/build-websites/operation/css/901.html

    ※RSSTIMESに関しては、hatena-modulebodyの中に納まっていませんでした。
    展開後のコードを直接記述したのでしょうか?
    タイトルを除くモジュール本体の位置を変更したい場合に困ると思いますし、「<img width="160" alt="R S S T I M E S" ~略~ width=150" height="37">」は「<div class="hatena-modulebody">~</div>」の間に記述してください。
  • id:LikeLife
    ありがとうございました。
    質問キャンセルになってしまいましたが、無事になおりました。
    何度も質問すみませんでした。

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

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

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

回答リクエストを送信したユーザーはいません