香雪?GB日記 このページをアンテナに追加 RSSフィード

2004-05-17

ペルソナたち@鳥取わらべ

[] ヘッダでカレンダーを右に表示し左には文章を入れたい  ヘッダでカレンダーを右に表示し左には文章を入れたい - 香雪?GB日記 を含むブックマーク はてなブックマーク -  ヘッダでカレンダーを右に表示し左には文章を入れたい - 香雪?GB日記  ヘッダでカレンダーを右に表示し左には文章を入れたい - 香雪?GB日記 のブックマークコメント

おことわり

この香雪?GB日記は「はてなグループ」のグループ日記ではてなダイアリーではないんですが、HTML構造ははてなダイアリーと同じで、d:id:jinsilさんとテーマも同じhatenaを使っています。わたしのはてなダイアリーはテーマ不使用なものですから、スタイルシートをチェックするのにはこちらのほうが好都合なので、こちらに書かせていただきますね。

ヘッダでカレンダーを右に表示し左には文章を入れたい(テーマhatena)

さて、テーマhatena*1使用時に

ヘッダに今カレンダーを入れてみたのですが、今、カレンダーは左に表示されてますが、カレンダーを右に表示したいのです。それと、カレンダーが右に表示できたら、左には、文章を入れたいと思っていますが、そんなことは可能でしょうか??

香雪ジャーナル2004/5/16 コメント欄より

とのお尋ねですが、ヘッダ欄とスタイルシート欄に必要な指定をしてやれば可能です。

現在、この日記のヘッダ表示をお尋ねのような指定にしてみました。こんな感じでどうでしょうか。

  • ヘッダのカレンダーを入れる部分と文章の部分を構造的に分ける。
  • カレンダーを入れる部分を右寄せ。
  • 続く文章はその左側に流し込ませる。
  • 流し込みが溢れた分はカレンダーの下に回り込んでいく。
  • 日記タイトル(日付の帯のところ)のh2要素で右寄せ(左流し込み)をクリア。

あと、ちょっとレイアウトを整える意味で、ヘッダの幅が左右ウィンドウぎりぎりまで広がっちゃって日記枠よりも外側にはみでると何となく落ち着かない気がしましたので

  • 枠にあわせてヘッダに左右の余白をとる。

ようにしてみました。

※こういった表示をさせる指定方法は他にもいろいろあります。わたしがこれから書く指定方法は直感的なわかりやすさ・テーマに影響しないスタイルシートの指定・変更のしやすさ…などを優先して考えてみたものです。その分、やや冗長なところはあると思います。

今この日記はこういう指定をしています。

ヘッダの該当箇所、今現在この日記はヘッダ欄にこう書いています。

<div class="headercalendar">
<hatena name="calendar2photo">
</div>
<div class="headerinfo">
<p>上に新しい記述を書き足していきます。はてなグループベータテストの終了(2004年5月20日予定)をもってこの日記も終了します。</p>
<ul>
<li>箇条書きはリストを使う</li>
<li>箇条書きはリストを使う</li>
<li>箇条書きはリストを使う</li>
</ul>
<p>ヘッダを構造化してやり、ヘッダのカレンダーを入れる部分(div.headercalendar)をfloat: rightと指定して右寄せにしているので続く文章が左側に流し込まれます。floatは日記タイトル(日付の帯のところ)のh2要素でクリアさせます。上に新しい記述を書き足していきます。はてなグループベータテストの終了(2004年5月20日予定)をもってこの日記も終了します。上に新しい記述を書き足していきます。はてなグループベータテストの終了(2004年5月20日予定)をもってこの日記も終了します。</p>
<p>このように流し込みが溢れた時点で長い文章はカレンダーの下に回り込んでいくようにしてあります。</p>
<ol>
<li>olで数字付きリスト</li>
<li>olで数字付きリスト</li>
</ol>
</div>

5/18 上記は例示のために書いたヘッダです。既にご覧になってサイトに反映されたようなので元に戻しました。

この箇所に必要なスタイルシートの指定。

/* 一日のタイトル */
h2 {
	clear: both;
}

/* ヘッダの案内文(div.headerinfo)配置 */
div.headerinfo {
	margin-right: 5%;
	margin-left: 5%;
}

/* ヘッダのカレンダー(div.headercalendar)配置 */
div.headercalendar {
	float: right;
	width: 150px;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 0.5em;
}

これをテンプレートにするとこうなります。

ヘッダ欄

---d:id:jinsilさんは「<div class="headercalendar">」から「</div>」までをヘッダ欄にコピペしてください。---

<div class="headercalendar">
<hatena name="calendar2photo">
</div>
<div class="headerinfo">
<p>書きたい文章をどうぞ。</p>
<ul>
<li>箇条書きはリストを使ってください</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
<p>書きたい文章をどうぞ。</p>
</div>
スタイルシート欄

---d:id:jinsilさんは「h2 {」から「margin-bottom: 0.5em; }」までをスタイルシート欄にコピペしてください。---

/* 一日のタイトル */
h2 {
	clear: both; /* フロートの流し込みを解除 */
}

/* ヘッダの案内文(div.headerinfo)配置 */
div.headerinfo {
	margin-right: 5%; /* 右余白。数値はお好みで調整してください */
	margin-left: 5%; /* 左余白。数値はお好みで調整してください */
}

/* ヘッダのカレンダー(div.headercalendar)配置 */
div.headercalendar {
	float: right; /* フロートで右寄せ */
	width: 150px; /* 横幅の指定 */
	margin-right: 5%; /* 右余白。数値はお好みで調整してください */
	margin-left: 5%; /* 左余白。数値はお好みで調整してください */
	margin-bottom: 0.5em; /* 下余白。数値はお好みで調整してください */
}

[] d:id:jinsilさんへ。別件ですが…  d:id:jinsilさんへ。別件ですが… - 香雪?GB日記 を含むブックマーク はてなブックマーク -  d:id:jinsilさんへ。別件ですが… - 香雪?GB日記  d:id:jinsilさんへ。別件ですが… - 香雪?GB日記 のブックマークコメント

ご存じだったらすみません。

はてなグループhttp://g.hatena.ne.jp/)は先月から始まったはてなの新しいサービス(現在ベータテスト中)なんですけど、koreaグループ(http://korea.g.hatena.ne.jp/)というグループが発足・活動されていて参加者も募集中とのことです。いちど覗かれてみてはいかがでしょうか(^^) 管理者はg:korea:id:yhleeさん(よんひゃんさん)です。

※よんひゃんさん突然ご紹介してしまいました。よろしくお願いします。

[] はてなグループ修正・仕様追加変更など  はてなグループ修正・仕様追加変更など - 香雪?GB日記 を含むブックマーク はてなブックマーク -  はてなグループ修正・仕様追加変更など - 香雪?GB日記  はてなグループ修正・仕様追加変更など - 香雪?GB日記 のブックマークコメント

脚注タグの不具合やプライベートグループのプライベートメッセージなどいろいろ修正・仕様追加変更。要望していた管理者の変更(はてなへメールして申請)へも対応下さっている。ありがとうございました。

yukattiyukatti2004/05/18 03:03既にご覧になってサイトに反映されたようなのでここのヘッダを元に戻します。問われてお答えした場合は、回答を試してみたかどうか(出来れば結果も)だけでも報告頂けると回答者としては助かりました。

トラックバック - http://beta.g.hatena.ne.jp/yukatti/20040517