Home > プラグイン Plugin > wp-lightbox2 プラグイン(2)

wp-lightbox2 プラグイン(2)

前回の続きで、「3-context.css」ファイルを編集します。

1.「style-bazooka」フォルダの「3-context.css」ファイルを開いて「img」で検索

2./* Link img */ に括られた
div.textBody a img と、
div.textBody a:hover img が
今回該当する箇所です。

3.
div.textBody a img {
border: 3px solid #ccc;
}
 ↓ ↓ ↓ (以下のように書き換えます)
div.textBody a img {
border: 3px solid #ccc;
float: left;
margin: 0px 5px 5px 0px;
}
これで、イメージファイルとテキストの間隔にも余裕ができ、テキスト文字はイメージファイルの右側に回り込みます。

4.マウスを置いた時に枠の色を変更させたい場合は、
div.textBody a:hover img {
border: 3px solid #00b8fd;
}
の「#00b8fd」をお好みの色に書き換えます

5.枠線の太さ、色の変更は、例えば
「border: 3px solid #ccc;」を
「border: 5px solid #999;」
とすれば、より太く、より濃いグレーになります

6.また、枠線が不用の場合は
「border: 3px solid #ccc;」を
「border: 0;」として、
div.textBody a:hover img {
border: 3px solid #00b8fd;
}
をコメントアウト(/*と*/で囲む)します
※削除してもいいですが、あとで復活したい場合は楽チンです

7.「3-context.css」ファイルをアップロード

8.「3-context.css」ファイル編集前に投稿したイメージファイルは「Lightbox」の機能がうまく動作しなくなっているかもしれません。その場合は記事を編集して保存し直すと戻ります。

Comments:0

Comment Form
Remember personal info

Trackback+Pingback:0

TrackBack URL for this entry
http://3six.jp/wp/wp-trackback.php?p=53
Listed below are links to weblogs that reference
wp-lightbox2 プラグイン(2) from WordPressでブログを作ろう

Home > プラグイン Plugin > wp-lightbox2 プラグイン(2)

Page Top