Hatena::Groupugochara

Harimauの編集記録等

2011-12-10

【重要】デザインの最適化を行います。

| 16:34

管理人各位

これは管理人のみに関係することです。ほかの方は気をつける必要はありません。

予告どうり現在HTMLCSSの総最適化を行っています。最適化には数日かかるかもしれません

その間管理ページの「ページのヘッダ」「トップページのHTML」「ページのフッタ」「スタイルシート」の書き換えを原則として行わないでください。

掲示板やキーワードなどはいじりませんので書き換えていただいてかまいません。というか、ぜひ編集を行ってください。

また、調整中は各所のデザインが一時的に崩れる場合があります。だからといって他の人が書き換えてしまいますといろいろと問題がでる場合がありますので、修正終了の報告をするまでお待ちいただければと思います。

修正すべきところなどは掲示板で言っていただければ直しておきます。



また、編集前の状態でバックアップをとってあるので、必要なようなら差し戻しすることができます。

SukaiSukai2011/12/10 17:23了解です!
いつもWEBデザインの活動をしてくださってありがとうございます。
デザインの最適化頑張ってください!
画像に関して要望があれば遠慮なく何でも言ってくださいね。

takuyarei0takuyarei02011/12/11 11:37差し替えたいお知らせもあったのですが、デザイン最適化終了までできない...。

harimau_tigrisharimau_tigris2011/12/11 14:32>Sukaiさん
がんばります!画像はいつもお世話になっています。

>takuyarei0さん
HTMLのほうの編集はとりあえずできているので変えてもらってもOKですよ。

2011-11-01

いくつか変更履歴

| 18:07

いくつか変更したので。

面倒なのでコードは省略!!

主にヘッダ部の調整を行いました。

タイトルとパンクズリストの非表示。

左右のカエルや「<」にマウスを乗せると出現。

CSS3ってたのしいな♪

takuyarei0takuyarei02011/11/01 20:03DSiブラウザの2画面モードやiPhoneのブラウザだとパンクズリストを出すのが大変になるかも...。
日記に書いておくか...。

SukaiSukai2011/11/01 20:36期待を超える出来で驚きましたよ!
ありがとうございました!

掲示板にも書きましたが質問させてください。
各メニューページをキーワードで作成し
各コンテンツをモジュールを使って表示しているのですが、
自動的に表示内容が更新されないようです。
何かいい方法はないでしょうか?

SukaiSukai2011/11/09 08:12id:harimau_tigrisさんを今お気に入りに設定させていただきました!色々お世話になってます!

SukaiSukai2011/11/20 14:30以下は掲示板にも書いた内容です。

id:harimau_tigrisさん編集ありがとうございます!
そして申し訳ございません。
ちょうど同じ時間にデザインの調整をしていたみたいですね。
最新の日記が増えて長すぎてサイトのバランスが悪いため、
id:fukuhiro0628さんのアイディア通り、
左のメインコンテンツの部分に最新10件のみで表示するようにしたらいいのではないかと私もHTMLや画像を作ってました。
せっかく調整してくださったのに申し訳ございません。
また少しCSSの調整をお願いしてもよろしいでしょうか?

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さんがいればとても安心です。

2011-09-19

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

| 19:01


カレンダーの空項目が消える問題

スタイルシート
/* (4) */
table.group-calendar tbody tr td {
  background:url('http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_boxbody.png') repeat-y;
 _background:url('http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_boxbody.gif') repeat-y;
}

/* (5) */
table.group-calendar tbody tr td div.day , table.group-calendar tbody tr.pager td {
  background-image:none;
}
説明
カレンダーで項目がないところで背景がむき出しになる問題を解決します。 tdに背景を設定して、すべてのセルに背景が表示されるようにしています。 項目があるセルで背景がだぶって透過具合が変わってしまうため、td div.dayの背景を消去しています。 また、(4)でページャー部分には背景が不要なため、消去しています。

リンクが読みにくい問題

スタイルシート
/* (6) */
table.group-calendar tbody tr.pager td a , #breadcrumbs a , .bbsmode a , div.bbspager a , #footer a
{
  color:#FCA;
}

説明

複数個所で背景とリンクの色が被ってよみにくい問題を仮修正。色は決定があるまでとりあえず#FCAにしてある。

  • 上部のパンくずリスト
  • 掲示板の「リスト表示 | ツリー表示」
  • カレンダーの「<<前の月 | 今月 | 次の月>>」
  • 掲示板の「<前の1件 次の1件>」(過去の編集は上書き)
  • 下の「このグループについて」のリンク色(過去の編集は上書き)

カレンダーの日ページのページャー

スタイルシート
/* (6) */
#paget-top , #hatena-group-keyword div.hatena-body div.calendar{
 background:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_box_header.png);
 _background:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_box_header.png);
}

説明
takuyarei0さんのアドバイスをうけまして、カレンダーの日付のページの「<前の日 | 今日 | 次の日>」の部分が読みにくい問題を解決。 うまく適用できてなかったので修正。XSS対策か、直下セレクタがエスケープされちゃうよー(--;

掲示板等のデザインを修正しました。

| 14:49


掲示板の「前の1件」「次の1件」などと表示される部分の背景色を設定

スタイルシート
div.bbspager
{
 background-color:#FF9;
 height:1em;
}

説明

掲示板の「前の1件」「次の1件」などと表示される、ページャーの部分に背景色が設定されていないため、リンクの文字が読みにくい問題を修正しました。

ただし、「前の1件」などがない状態だ白いところがポツーンとある状態になってしまうので、リンク色を直すように変更するなどのデザインの調整が求められます。


掲示板の「ツリー|全部|最新の50件」となっている部分に背景設定

スタイルシート
#paget-top
{
 background:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_box_header.png);
 _background:url(http://ugochara.g.hatena.ne.jp/theme/ugomemo-green/bg_box_header.png);
}

説明

掲示板の上部にある「ツリー|全部|最新の50件」というところが背景が設定されていないため読みにくい問題を修正。

上の向きの画像を背景に設定している。

takuyarei0takuyarei02011/09/19 15:13...となると、カレンダーの前の日 /次の日にも同じ修正をするとカレンダーも見やすくなるのかな?

SukaiSukai2011/09/20 23:55カレンダーなど、見づらくて気になっていたんです。
さすがですね!スゴイです!

harimau_tigrisharimau_tigris2011/09/21 16:29他にも気になった点があればグループの掲示板までお願いしますね!!