Hatena::ブログ(Diary)

130単位

2011-03-26

Redmine チケット一覧 ステータスで色分け表示

対応中や対応済のチケットを認識しやすくするため、色分け表示します。対象ステータスNoのclassを指定してスタイルを記述します。

こちらのテーマに合わせて編集したものですが、通常テーマでも使えます。優先度で赤と青が使われているので、それ以外で。

/* yellow style */ 
tr.odd.status-2 { background: #ffe; }
tr.even.status-2 { background: #fffff2; }
tr.odd.status-2 td, tr.even.status-2 td { border-color: #ffc; }
tr.status-2 td.status { color: #990; }
/* green style */
tr.odd.status-3 { background: #efe; }
tr.even.status-3 { background: #f2fff2; }
tr.odd.status-3 td, tr.even.status-3 td { border-color: #cfc; }
tr.status-3 td.status { color: #090; }
/* purple style */
tr.odd.status-4 { background: #fef; }
tr.even.status-4 { background: #fff2ff; }
tr.odd.status-4 td, tr.even.status-4 td { border-color: #fcf; }
tr.status-4 td.status { color: #909; }

対応済になって色が変わったりするのは、多少なりとも達成感アップにつながるんじゃないかと思います。

関連リンク

日本語環境で読みやすいRedmine用テーマ「farend basic」公開 | Redmine.JP Blog

2009-06-07

Google SEOスターターガイド 簡易まとめ

Webmaster Central 日本版 公式ブログ: Google 検索エンジン最適化スターターガイド
http://googlewebmastercentral-ja.blogspot.com/2009/06/google.html

Google 検索エンジン最適化スターター ガイド (PDF)

本家Googleによる資料ということで、あらためて学び直そうと思い読んでみました。

ボリュームはそれなりにありますが、画像付きでわかりやすく解説されています。非常に有用な資料と思いますので、一読されることをおすすめします。

以下、個人的なまとめです。

簡易まとめ

titleタグ
  • titleタグの内容が検索結果の一番上に表示される
  • 検索キーワードが一致すれば太字になる
  • ページ内容を適切に記述する
  • 簡素で説明的なタイトルを付ける
  • 各ページに固有のタイトルを付ける
descriptionメタタグ
  • 1文か2文、短い段落程度の文章にする
  • 検索結果のスニペットとして利用される
    • スニペット…検索結果におけるページタイトルとURLの間の文章
    • ページ内の文章が利用される場合もある
  • 検索キーワードが一致すれば太字になる
  • わかりやすく、かつユーザーの興味を引くような内容にする
  • 各ページに固有のdescriptionメタタグを付ける
URL構造の改善
  • わかりやすい単語を使用する
  • URLのみのリンクでもある程度機能的になるようにする
    • URLのみでリンクされる場合を考慮する
  • 検索キーワードが一致すれば太字になる
  • キーワードを過度に使用しない
  • 不要なパラメータを使用しない
  • ディレクトリ構造を簡潔にする
  • 1つのページにURLは1つにする
ナビゲーションを容易に
  • 自然な階層構造を作る
  • ナビゲーションはできるだけテキストにする
  • パンくずリストを使う
  • HTMLおよびXMLサイトマップを使う
  • URLの一部を取り除いてアクセスされた場合の挙動を考慮する
  • カスタマイズした404エラーページを用意する
質の高いコンテンツとサービスを提供
  • 読みやすい文章を書く
  • トピックを秩序立った構成にする
  • 関連性のある言葉を使う
  • 独自で斬新なコンテンツを作成する
  • コンテンツは検索エンジン向けではなくユーザー向けに作成する
適切なアンカーテキスト
  • 簡素で説明的なテキストにする
  • リンクだとわかるようなスタイルにする
見出しタグ
  • アウトラインを書くことを想像する
  • ページ全体を通して見出しタグは慎重に適用する
画像の利用の最適化
  • alt属性を利用する
  • 画像はひとつの専用ディレクトリにまとめて保管する
クロールの除外
  • robots.txtを活用する
  • ユーザーが挿入したリンクには自動でrel="nofollow"を付ける
正しい方法でサイトを宣伝

余談

URL に区切り記号を使用します。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア (_) ではなくハイフン (-) を使用することをお勧めします。

Google と相性の良い URL の作成 - ウェブマスター/サイト所有者 ヘルプ

とのことなのですが、はてなダイアリーの記事Permalinkにはハイフンは使えないみたいです。アイデアにも挙がっています。

はてなアイデア

今までの記事ではなんとなく区切ってこなかったのですが、この機会にやはり可読性があったほうがいいと思い直しまして。上記アイデアが実現されるまでは、とりあえずアンダースコアで区切ることにしようと思います。

2009-05-27

画像による検索フォームのCSS (※IE6対応)

SafariのGUIを適当に加工して作った検索バー。

f:id:deeeki:20090527203811j:image

こんな感じのものを、

  • 入力エリア(の背景)もボタンも画像
  • Webサイトのヘッダー上に配置

こんな仕様で実現するときのコード。

<div id="search_block">
  <form id="search_form" class="png_bg" method="post" action="search">
    <input id="search_text" type="text" name="search_text"/>
    <a id="search_button" class="png_bg" href="#">検索</a>
  </form>
</div>
div#search_block {
    position: absolute;                         /* 絶対配置 */
    top: 100px;
    left: 775px;
}
    div#search_block form#search_form {
        float: left;
        width: 240px;                           /* 検索フォーム画像幅 */
        height: 25px;                           /* 検索フォーム画像高さ */
        background: url(../images/search_form.png) no-repeat;
                                                /* 検索フォーム背景画像 */
    }
        div#search_block input#search_text {
            display: block;                     /* ブロック要素化 */
            float: left;                        /* 左寄せ */
            width: 150px;                       /* 入力欄の幅 */
            margin: 5px 5px 0 25px;             /* 入力欄の外側余白調整 */
            border-width: 0;                    /* 入力欄の枠線消去 */
            background: none;                   /* 入力欄の背景消去 */
        }

        div#search_block a#search_button {
            display: block;                     /* ブロック要素化 */
            float: left;                        /* 左寄せ */
            width: 55px;                        /* 検索ボタンの画像幅 */
            margin: 3px 0 0 0;                  /* 検索ボタンの外側余白調整 */
            background: url(../images/search_button.png) no-repeat;
                                                /* 検索ボタン通常画像 */
            text-indent: -9999px;               /* テキストを画面外に */
        }

        div#search_block a#search_button:hover {
            background: url(../images/search_button_hover.png) no-repeat;
                                                /* 検索ボタンマウスオーバー画像 */
        }

(※JavaScriptは省いてます)

  • ボタンにロールオーバー効果
    • input/button要素ではなく、a要素で
      • IE6で:hover擬似クラスはa要素にしか対応していないため
  • 入力欄テキストボックスの左右余白はmarginで指定する
    • 入力が幅を超えたときに背景画像と重なってしまうため
  • input要素の既存スタイルを無効にする
    • 「border-width: 0;」と「background: none;」を指定

セレクタの指定が中途半端だったり、JSでできることをCSSで書いてたりしてて微妙かもしれませんが…。何か間違い等あればご指摘ください。

2009-05-16

フォームでのEnterキー押下について調べてみた

前回こんなことを書きましたが、なんとなく引っかかりがあったので調べてみたら、いろいろ間違っていたことが判明。

フォームの仕様?として、input要素で「Enterキー」を押下すると、フォームのactionで指定した先へ post または get されてしまいます。

javascriptでフォームを送信する際に気をつけること - パンプキンスパイスラテ

自分でブクマしておいて忘れていました。恥ずかしい限り。ただ、ブクマしておいて良かったとも思います*1

これまでの認識

type="button"にしておけば、ボタンが押されてもSubmitしない
↓
テキストボックスでEnterキーを押したときもSubmitしない

この認識がそもそも間違っていました。

わかったこと

ブラウザについて
  • Safariのみで起こるわけではない
  • IEやFirefoxでも起こる
  • ただしSubmitの発動条件がブラウザで少し異なる(後述)
type="button"について
  • テキストボックスEnter押下でSubmitされるのに、type="button"のinput要素の存在は関係ない
  • テキストボックスしかないフォームでも、Enter押下でSubmitされる
  • 例:
他のinput要素
  • チェックボックス等でも、フォーカスが合っていればEnter押下でSubmitされる
テキストボックスが複数の場合
  • ブラウザにより挙動が異なる
  • IE/Firefox/Opera…Enter押下してもSubmitされない
  • Opera/Safari/Chrome…Enter押下するとSubmitされる
  • 例:
  • type="submit"なボタンが存在すると、どのブラウザでも反応する

【※追記】ブクマコメントで指摘があり、Operaで実際に試してみたらテキストボックス複数の場合はSubmitされませんでした。すみませんです。(Opera@USB Version 9.64 + WinXP)

参考リンク

Enterキーで送信されてしまうのを防ぐ - [ホームページ作成]All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20080902A/

*1:自分自身で間違いに気づけたので

2008-11-26

IE6でテキストが二重表示されるバグ

2カラムレイアウトのWebサイトを制作していて、おかしな現象に遭遇しました。IE6でのみ、ある部分のテキストが二重に表示されてしまうのです。

#container {
	width: 780px;
}
.leftarea {
	width: 200px;
	float: left;
}
.rightarea {
	width: 560px;
	float: left;
	margin: 0px 0px 0px 20px;
}

こんなcssで、rightarea内のテキストが leftareaの下あたりに重複して出現していました。

解決法1

IE6で、文字(画像)が複製されてズレる - Archiva
http://archiva.jp/web/html-css/Duplicate_Characters_Bug.html

調べていて見つけたこちらの記事に、画像付きの解説が載っていました。最後のfloat要素の右マージンに-3pxを指定すると良いらしいです。

.rightarea {
	width: 560px;
	float: left;
	margin: 0px -3px 0px 20px;
}

これで直りました。ちなみに「-2px」でもいけて、「-1px」ではダメでした。rightarea内の要素で左右ボーダーを1pxずつ取っているのですが、それと関連しているのかもしれません。

解決法2

.rightarea {
	width: 560px;
	float: right;
	margin: 0px 0px 0px auto;
}

これでもいけました。フロートの向きを逆(右)にして、左マージンにautoを指定しています。ただし2カラムのときしか使えなさそうな気がするので、あまりおすすめしません。

ほか参考リンク

以下によれば、htmlのコメントを消すことで解決する場合もあるみたいです。(自分の場合はもともとコメント自体ありませんでした)

はねつき » IE6で勝手にコンテンツ内容が複製されるバグ
http://hane.itigo.jp/archives/60