2010年5月26日水曜日

リンクやボタンにカーソルを乗せた時に、押し易くする方法 - CSSカスタマイズ

CSSカスタマイズ
リンクやボタンは、カーソルを合わせた時に表示を変化させる事で、「押す事が出来ますよ。」と訪問者に伝える事が出来ます。

以下、リンクの場合についてメモします。


**** 手順
o リンク文字も含めて適用したい時
----------------
a:hover {
/* マウスを乗せた時に、したい事を書きます */
}
----------------

o リンク内の画像だけに適用したい時
----------------
a:hover img {
/* マウスを乗せた時に、したい事を書きます */
}
----------------

o ご参考。他の方の a:hover説明ページ(HTMLクイックリファレンス) ▽http://www.htmq.com/selector/hover.shtml
   + a:linkなどと併用する時の注意事項が載っています。


**** 応用例。zoomeマイページ
** 例1. リンク画像を動かして、凹んだように見せかける
o 実際にto_dkのzoomeマイページで使っている方法です。
   + リンクと特定のボタンに適用しています。
   + zoome上部のリンクには影響を与えない書き方です。
----------------
.contents a:hover, .footer a:hover, .comment_info_btn input:hover, .url_info_str_button input:hover {
color: #911B1B; /* これはリンクの色指定 */
position:relative;
top: 1px;
left: -1px;
}
----------------
o これは動かす例ですが、他にも、「background-colorを使って、背景色を変更する」などの工夫が出来ます。

** 例2. マウスを乗せた時に、CSSで画像の透明度を変化させる
o この例では75%を指定していますが、このページは背景が濃いですので 80% (0.80)を使っています。
--------
a:hover img {
-ms-filter: "alpha(opacity=75)";
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}
--------
o 複数行で指定する事には理由があります。詳しくは、「CSSで透明度を指定する方法。opacity」をご覧下さい。


**** メモ
o 私は試していませんが、工夫次第で、マウスを乗せた時に別の画像を表示させる事も出来そうです。
   + 興味のある方は、Web検索。検索キーワードは「img css ロールオーバー」辺りです。
o この方法は、上手く出来ない場合もあります。同じ場所にリンクを2枚重ねている場合です。
   + zommeマイページでは、「マイクリップ一覧」ページが該当します。
   + このページの場合、上のリンクが下にあるリンクを覆っていますので、下のリンクの a:hoverは反応しません。


==
関連ページ:
    ▼CSSカスタマイズ
    ▼ホームページを作る
    ▼制作メモ
    > zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
    多くのブラウザーで見栄えを合わせる
    zoome マイページ。プレビューでの失敗例と対策
    ▼CSSを調べる

zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする方法

CSSカスタマイズ
zoome
マイクリップ一覧の説明文に当たる要素は、Firebugですぐに見つける事は出来ません。
理由は、他の場所に書いている要素を、移動してきて表示しているからです。

全員で同じ調査をするのは、時間が勿体無いですので、私が調べた結果をメモします。
(もちろん、調査に興味がある方は、自分で調べてみて下さい。)

# この小技は、zoomeの仕様が変わり易そうな部分を使っています。
# この方法が使えなくなりましたら、他の方法を探して下さい。
#


**** 手順
div#review_object の中身に対して操作します。

** 説明文に当たる所: div#review_string
o colorや font-sizeなどの一部の指定は、後ろに「!important」を付けないと無効になります。
   + これらの値は、HTMLの中(<div id="review_string"から始まる所)で、直接指定していました。
   + ですから、CSSカスタマイズする時は、!important を付けて指定して、HTMLよりも優先順位を上げます。
o !importantの指定例(= 先頭のdivは、無くてもきっと動きます。)
--------
div#review_string {
color: #911B1B !important;
font-size: 14px !important;
}
--------

** タイトル全体 = div#review_object .myclipreview_head
o .myclipreview_headは、マイクリップ一覧のタイトル「マイクリップ一覧」部分でも使っていました。
o 区別してCSSカスタマイズしたい時は、このページにだけ登場する親要素を、名前の最初に指定します。
   + タイトル全体 = div#review_object .myclipreview_head
   + タイトルの文 = div#review_object .myclipreview_text
   + タイトルの最後 = div#review_object .myclipreview_rss
   + (= 先頭のdivは、無くてもきっと動きます。)


==
関連ページ:
    ▼CSSカスタマイズ
    ▼zoome
    ▼ホームページを作る
    ▼制作メモ
    > 多くのブラウザーで見栄えを合わせる
    zoome マイページ。プレビューでの失敗例と対策
    CSS。他の方の便利メモ

こっそりBlogger研究室

Blogger
このブログの改善アイデアを書いて、色々考える、メモ帳ページです。

o 更新は不定期です。気が向いた時に進めますから、次は1年後になるかもしれません。
o 完成しましたら、他のページに組み込む予定です。


**** 只今対応中のテーマ(2012年10月31日現在)
o 表示方法調整
 左上からの検索結果のみタイトル表示。それ以外ではページ表示
 原則として、1ページに表示する本文を3ページ以下に設定
o Windows 8 対応開始


**** 検討中のテーマ
o Music Maker 3対応と、Music Maker MX対応。
既存のメモに、最新バージョンの情報を追加します。

o Google +1 の導入
このブログの母体デザインを、Bloggerの最新版に変更しました。
でも、Google +ボタンの読み込み時間が5秒程度かかっていましたので、一旦非表示にしました。
現在の課題は2つ。
1つは、Google+ ボタンを高速表示する方法
もう一つは、to_dkとしてGoogle+ に参加するかどうか(検討中です)

o トップページ右上の居眠りミクさんの引っ越し先
Flashコンテンツを置いていたサーバーが2回目のダウン。
仕方がありませんので、一度、トップページから居眠りミクさん呼び出し部分を外しました。
とりあえず元に戻しましたが、良いサーバーがありましたらFlashコンテンツを移動する事を考えています。


**** ぼちぼちと検討予定のテーマ
o 制作メモのレイアウト見直し
携帯電話からのアクセスが殆どありませんので、デスクトップからの見易さを重視しようかと思います。

o コメント掲示板のようなものの導入
このブログの各記事は、快適表示を維持する目的で、コメントを禁止しています。
一方、ブログに足りない部分を指摘したくなった時に、気軽に伝える手段がありません。
ですから、各ブログのテーマについて、自由に投稿出来るバグ管理システムが欲しいなあと思いました。
問題は、Googleのサービスで、それっぽい物が見つからない事。
でも、この機能の為に創作時間を大幅に削る訳にはいきませんから、一旦保留にします。

o 書籍など、商品画像の貼り付け
制作メモの場合、製品(= 商品)画像や参考書の紹介はあった方が便利です。
また、紹介する参考書をアフィリエイトして、制作費不足を補う事も検討中。
ただ、ミクさん背景のまま他の商品を薦めるのは気が引けます。実際に貼り付ける時には、専用のデザインを仕立てて、違和感を無くす予定です。

o 広告の追加
将来は、一部のページに大家さん(Google)の広告を入れる事を考えています。
理由は、制作機材の購入費用の捻出と、大家さん支援の為です。
メモを読み進めて物足りないと思った頃に、ふと目に止まるのが理想です。
広告を入れるページでは、背景をミクさん以外に差し替える予定です。
といっても、しばらく先の話になりそうです。まだ、メモ間のリンクを見直している段階です。

o 直帰率、離脱率共に100%近くのメモについて、メモの内容簡潔化
関連メモの見直しが終わってから考える事にしました。

o お役立ち度 = アクセスカウントを、テキストの形で右下に表示
目的:メモの有用度を表示します。メモの書き方を改善したくなった時に、参考になります。
方法:出来る事なら、CGIのカウントではなく、Google Analyticsのデータを流用します。その方が、後でお役立ち度の計算方法を見直したくなった時の手間が少ないです。

o ラベル毎の人気メモ一覧
目的:有意義と思われるメモを、そのラベルの紹介ページで紹介します。
方法:昨日、最近n日間、累計、のうち、どれか1つを採用します。
なるべく、メモが追加された時も、基本的にメンテナンス不要になるようにします。

o サイト全体の人気メモTOP 10, 50
目的:有意義と思われるメモを、辿り易くします。
方法:最近n日間、月間、累計

o これらを、1日1回の自動化 + パスワードを公開場所に置かないような方法。

# 一度に全部考えるのは大変です。他の事の合間に少しずつ検討します。
#


**** 終了したテーマ(そのうち消えます。)
o C++ラベル検索不能対応
大文字の++に変更しました。

o 検索結果大量表示の最適化
表示高速化の為、次の2点を対策しました。
パソコンからの次の2つの検索結果について、本文表示を止め、タイトルだけにしました。
ブログアーカイブの年別表示、月別表示
画面左上からの検索結果
また、ラベルの新着記事表示を1ページ5件までにしました。
これらの操作では、大量の記事が一度に表示され、表示に5秒以上かかる場合がありました。

o 「Blogger」関連記事の、新デザイン対応
操作手順が変わっていましたので対応しました。

o Bloggerのドメイン変更対応
Bloggerの仕様変更で、参照者の国ドメインにリダイレクトされるようになりました。
問題は、ブラウザー側でセキュリティー強化のアドイン(例えば RequestPolicy )を使っている場合。
この時、ページを遷移する度に、リダイレクトの途中で画面が止まります。
根本的な対策として、全てのページにある「自サイトへの .comリンク」を相対アドレスに置き換えました。

o 作品紹介や雑談を別サイトに移動する案は、一旦凍結しました。
制作メモに比べると量が1割未満です。今の段階で移動するメリットが少ないと判断しました。
将来、制作メモ全体に広告を導入するような事になりましたら、改めて移動を考えます。

o コメント機能については OFFを継続中。
理由は、(今のレイアウトで一番遅くなる)年末に、快適表示を維持したいからです。
コメント専用ページを作る、という方法もありますが、便利かどうかは疑問です。
それなら匿名掲示板を開設した方が、便利なような気もします。

o ブログの表示速度低下の主原因判明
Bloggerのブログアーカイブガジェットの論理が改善されていましたので、様子見中です。
投稿タイトルの初期読み込みが、過去1ヶ月から2週間程度に改善していました。
今の所、1日当たり3件程度の投稿では、問題ありません。
o なお、トップページ右上のミクさん(500KB)は、相変わらず居眠り中です。

その他の改善点は、「このブログの主な改善点


==
関連ページ:
   ▼Blogger
   ▼制作メモ
   ▼目次