Hatena::Groupugochara

Harimauの編集記録等

2011-10-29

グループ内のCSSとHTML編集に関するお願い

| 14:51

グループ内のCSSHTML編集をする際のお願いです。

うごキャラグループのルールに従う

必ず読んでください。

編集時には名前と編集日時、編集理由、内容を書く

編集をする際にはうごキャラグループのルールにあるように以下の3つを必ずコメントで記入してください。

  • 名前

誰が編集したのかわかるものにしてください。はてなIDを推奨します。私の場合はHarimauとしてます。

  • 編集日時 「2011/10/29」程度で結構です。
  • 編集理由・目的・内容

なぜこうしたのか、どのような編集をしたのか。特に他人の書いたものを書き換える場合は書くようにしてください。

「お知らせ表示」「リンク色修正」など一言でかまいません。

例:<!-- by Harimau 2011/10/29 トップデザイン修正 -->

できれば自分の日記に編集内容を書く

必須ではありません。

大きな編集の場合、自分の日記に編集内容を記入することをおすすめします。編集したソースを書いておくと親切です。

大きな変更は掲示板で確認後

何か編集を行う前、できればでいいのですが掲示板で確認を行ってください。

掲示板に報告

これも必須ではないのですが、気が向いたらどこどこを編集しました!と掲示板で報告してください。上に書いたことがよくわからなかったら掲示板に報告するだけでもOKです。


以上です。よりよくするためにぜひお気軽に編集に参加してください。

よくわからない方も、掲示板にて意見を募集しています。

ijhhhjjijhhhjj2011/10/31 03:31編集ガイドを作成しても宜しいですか?
キーワードで

harimau_tigrisharimau_tigris2011/10/31 19:34>id:ijhhhjjさん
作ったほうがよさそうですね。
掲示板の「うごキャラグループのルールなどへの意見」で話し合いをして内容を決定しましょう。

SukaiSukai2011/10/31 19:59harimau_tigrisさん昨日はありがとうございました!

掲示板にも書いたのですが、
トップページ以外で表示される
うごキャラグループ > 掲示板 > ←コレとか
タイトルや検索フォーム等は
メニューの下に表示させるなどの変更は技術的に可能でしょうか?

2011-10-19

トップページとヘッダーのデザインを修正

| 17:43

トップページ周りでカレンダーが追加されたりしていたのでそれに関するデザインの調整を行います。

また、前ページに追加されたメニューに関してもCSSによるレイアウトに切り替えます。意見がある場合は掲示板までお願いします。


カレンダーのデザインを修正

スタイルシート
.top-calendar-container
{
	background-image:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/blog-main.png);
	padding-bottom:10px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}
.top-calendar-container a
{
	color:#bc350b !important;
}

説明

カレンダーがトップページに追加されましたが、背景がむき出しになってしまうため背景画像を設定しました。おまけで角を丸くしてみました()

CSS3非対応ブラウザベンダーハックが必要なブラウザでは角丸の指定は無視されます。

上部の「新着キーワードの一覧」

スタイルシート
#hatena-group-top .recentitem_diary
{
	background-image:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/blog-main-top.png);
	padding-top:10px;
	border-top-right-radius: 5px;
}

説明

新着キーワードの一覧」が上に見切れる問題を修正。

おまけで上部を丸める画像を配置しました

ヘッダーに関する内容

HTML
<table class="header-menu" cellspacing="0" border="1">
 <tr>
  <th> メニュー </th>
  <td>
   <a href="/diarylist">日記一覧</a> |
   <a href="/calendar">カレンダー</a> |
   <a href="/keyword">キーワード一覧</a> |
   <a href="/bbs">掲示板</a> |
   <a href="/task/">あしか</a> |
   <a href="/topictree">トピックツリー</a>
  </td>
 </tr>
</table>

<table cellspacing="0" border="1" class="header-menu">
 <tr>
  <th> お知らせ </th>
  <td>
   はじめての方は<a href="http://ugochara.g.hatena.ne.jp/keyword/%E3%81%86%E3%81%94%E3%82%AD%E3%83%A3%E3%83%A9%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%A3%E3%81%A6%E4%BD%95%3F">始めてガイド</a>をお読みください。
   <br>
   <a href="http://q.hatena.ne.jp/1318650948">アンケートにご協力ください!</a>
   </td>
 </tr>
</table>
スタイルシート
table.header-menu
{
 width:100%;
 margin-bottom:10px;
}
table.header-menu th
{
 width:100px;
 background-color:#d9712b;
 text-align:center;
 padding:10px;
}
table.header-menu td
{
 background-color:f0c882;
 text-align:center;
 padding:10px;
}

説明

タグのbgcolor属性やwidth属性、centerタグなどはできれば利用しないほうがいいと考えたため、CSSによるレイアウトにしました。

HTMLがすっきりするとともに調整もCSSでできるため、たぶん便利です。

若干上下のパディングなども変更になっています。

HTMLの編集前も保持しているので差し戻すことも可能です。意見があれば掲示板までお願いします。

ijhhhjjijhhhjj2011/10/20 04:18カレンダーが見やすくなりました!!有り難う御座います!!

SukaiSukai2011/10/30 23:39いつもデザインの調整ありがとうございます!
harimau_tigrisさんがいればとても安心です。