Web備忘録

a:hover でのナビゲーションの画像表示の変更方法

一枚のナビゲーション画像を、通常時とロールオーバー時で表示を切り替える方法として、サンプル用画像として、この画像を使用。

今回は上半分を通常時、下半分をロールオーバー時用として作成。（画像ロード時の切り替え時のタイムロスを少なくするため）

サンプル html(body内)

<ul>
<li class="testClassName1"><a href="#">ナビメニュー１</a></li>
</ul>

サンプル css

<style type="text/css">
<!--
.testClassName a {
display: block; /* a をブロック化し、 */
width: 100px; /* 幅の設定と */
height: 50px; /* 高さの設定 */
background: url(naviImg.gif) no-repeat center top; /* 通常時の背景画像（上半分）の設定 */
text-indent: -1000em; /* テキストをマイナスインデントで飛ばす */
}
.testClassName a:hover {
background: url(naviImg.gif) no-repeat center bottom; /* ロールオーバー時の背景画像（下半分）の設定 */}
-->
</style>

.htaccess ファイルは、サーバの挙動を決定する設定ファイルのひとつです。通常、サーバの設定は httpd.conf ファイル ( /usr/local/apache/conf/httpd.conf を探してください ) に記述しますが、このファイルはサーバ管理者しか編集できません。一方、.htaccess ファイルは各ユーザが、各ディレクトリ単位で設定できます。

以下、とあるサイトからの引用

Redirect permanent /test/ http://www.shtml.jp/htaccess/

とすれば、http://www.shtml.jp/test/以下にあるファイルへのアクセスがあった場合には、リダイレクトされます。例えば、 http://www.shtml.jp/test/basic.htmlへのアクセスは、http: //www.shtml.jp/htaccess/basic.htmlへリダイレクトされます。

また、画像などにも使用可能

RedirectMatch (.*)\.gif$ http://www.anotherserver.jp$1.jpg

などとします。
ここで、正規表現を簡単に説明しますと、「括弧（）」で囲まれた部分に入るものが$1に置き換えられます。
例えば、「http: //www.example.com/test/abc.gif」へのアクセスは「http://www.anotherserver.jp」と「$1 = /test/abc」と「.jpg」を合体させた「http://www.anotherserver.jp/test/abc.jpg」に転送されるという意味になります。

MT 4.2 になってから、デフォルトで設定されているタグクラウドのリンクが javascript になっているので、通常のリンクに修正する方法

<mt:If tag="Tags">
<div class="widget-tag-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <ul>
    <mt:Tags top="20">
            <li class="rank-<$mt:TagRank max="10"$>"><a href="<$mt:TagSearchLink encode_js="1"$>" rel="tag"><$mt:TagName$></a></li>
    </mt:Tags>
        </ul>
    </div>
</div>
</mt:If>

...と、javascript の記述を外すだけでOK