CSS3 backgroundプロパティに複数の背景画像を指定する。

2011.04.08 Fri

下記のコードはこのブログで使っているCSSで、前回の新規ウインドウ target=”_blank” で開くリンクにアイコンを追加するのとリンクのマウスオーバー時に青い斜線を表示させるのを指定したものです。

a:hover.new_window {
  padding: 0 0 0 16px;
  background: url(img/new_window.png) no-repeat 2px center, url(img/a_hover.png) repeat;
}

このようにCSS3では、「,(コンマ)」で区切ることによってbackgroundプロパティに複数の背景画像を指定することができます。


新規ウインドウ target=”_blank” で開くリンクにアイコンを追加する。

2011.04.07 Thu

新規ウインドウ target=”_blank” で開くリンクにアイコンを追加する方法です。他にも方法があるみたいなので、僕がこのブログで使ってるものを紹介します。

1.jQueryのaddClassメソッドを使って、target=”_blank”のついているaタグに「new_window」というクラスを追加する。クラス名は任意です。

javascript

jQuery(function() {
  jQuery('a[target=_blank]').addClass('new_window');
});

これをcommon.jsという名前で作成する。ファイル名は任意です。

2.cssでa.new_windowにスタイルを追加する。今回はリンクの前にアイコンを追加するので、下記のようにしています。

css

a.new_window {
  padding: 0 0 0 16px;
  background: url(img/new_window.png) no-repeat left center;
}

※paddingの値は各自で調整してください。

3.<head>内に下記を追加する。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>

※jquery.jsというファイルはjQueryからダウンロードしたファイルのことです。

以上で新規ウインドウ target=”_blank” で開くリンクにアイコンが追加されます。


iGoogleの設定を別のGoogleアカウントに移行する。

2011.04.03 Sun

自分仕様にカスタマイズできるGoogleページである『iGoogle』

僕自身、いつも購読してるブログやホームページの更新状況をチェックするために利用しています。

このiGoogleに登録したコンテンツは、別のGoogleアカウントに移行することができます。

1.iGoogleを開く。

2.右上にある「設定」から「iGoogle設定」をクリックする。

3.開いたページの一番下にある「エクスポート/インポート」という項目にある「エクスポート」をクリックして、設定ファイルを保存する。

4.別のGoogleアカウントのiGoogleを開く。

5.右上にある「設定」から「iGoogle設定」をクリックする。

6.開いたページの一番下にある「エクスポート/インポート」という項目にある「フォーム」または「参照」をクリックして、先ほど保存した設定ファイルをアップロードする。

これで移行完了です。