jQuery:画像の拡大(ズーム)表示ができるプラグイン「elevatezoom.js」

画像をマウスオーバーした時に、画像の一部をズームして拡大表示することができる
jQueryプラグインelevatezoom.js」をご紹介します。

elevatezoom.js

jquery_elevatezoom

マウスオーバーした時に画像を拡大させて見せることができるので、
ショップなどの商品画像を見せる際などに利用できると思います。

下記にjQueryプラグインelevatezoom.js」を使用して、画像の一部をズームさせて拡大表示したときの方法をメモします。


「elevatezoom.js」の設置方法

下記URLより、ダウンロードします。

http://www.elevateweb.co.uk/image-zoom

ダウンロードした「jquery.elevatezoom.js」を読み込みます。

共通で読み込むファイル

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

JS

<script type="text/javascript">
$(function() {
    $("#zoom").elevateZoom();
});
</script>

HTML

<img id="zoom" src="small_image.jpg" data-zoom-image="large_image.jpg" />

ページに表示する画像と拡大した時の画像の二つを用意するか、
ページに表示する画像のサイズを小さくして表示させます。

「src=””」に表示される画像を設置し、「data-zoom-image=””」に
拡大した時の画像を設置します。

 

サンプルページ:【jQuery】画像のズーム機能「elevatezoom.js」

 


また、オプションで表示の仕方などを変更することが可能です。

・画像の中でズームさせる場合

$("#zoom").elevateZoom({
	zoomType : "inner",
	cursor: "crosshair"
});

・虫眼鏡のレンズのように表示させる場合

$("#zoom").elevateZoom({
	zoomType : "lens",
	lensShape : "round",
	lensSize : 200
});

・フェードイン、フェードアウトさせる場合

$("#zoom").elevateZoom({
	zoomWindowFadeIn: 800,
	zoomWindowFadeOut: 800,
	lensFadeIn: 800,
	lensFadeOut: 800
});

・マウスホイールでズームの大きさを変更する場合

$("#zoom").elevateZoom({
	scrollZoom : true
});

・ズーム表示のサイズを変更する場合

$("#zoom").elevateZoom({
	zoomWindowWidth: 500,
	zoomWindowHeight: 200
});

他にも色々なオプションがありますので、ぜひチェックしてみてください。

 

CSS:CSS3の「transform:scale()」でhoverした時に画像を拡大する

CSS3の「transform:scale()」を使用すると要素や画像拡大・縮小して表示することができます。

画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトに動きを出すことができるのでいいと思います。

下記にCSS3の「transform:scale()」を使用して画像マウスオーバーした時に
拡大させて表示した時の方法をメモします。


「transform:scale()」の使用方法

ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。

【CSS】

.scale {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
.scale img {
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
}
.scale img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

※「transition: all 0.5s linear;」で指定してもOKです。
allの場合は全てのプロパティに適用されます。

HTML

<div class="scale">
    <img src="./css_scale.jpg">
</div>

表示例

サンプルページ:【CSS】画像の拡大・縮小表示

「scale()」は下記のようにX方向とY方向で指定することもできます。

transform: scale(1.2,1.2);

また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。


サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。

 

CSS:CSS3で画像や要素を角丸にして表示する「border-radius」

CSS3の「border-radiusプロパティを使用すると画像や要素角丸にして表示することができます。

今までは要素などを角丸にしたい場合、角丸の画像を作成して表示するなどしていました。
「border-radius」プロパティを使用すればCSSの記述だけでOKです。

また、指定した箇所のみに角丸を適用することも可能です。

下記にCSS3の「border-radius」プロパティを使用した時の方法をメモします。


「border-radius」の使用方法

CSS

.border_radius {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

HTML

要素に角丸を指定する場合

<div class="border_radius">
表示する内容
</div>

画像に角丸を指定する場合

<img src="./test.jpg" class="border_radius">

 

サンプルページ:【CSS】画像や要素を角丸

 


指定した箇所のみに角丸を適用

下記のように細かく指定することも可能です。

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

※「/」を使用しない場合は水平方向と垂直方向が同じ値になります。

border-radius: 10px 10px 10px 10px;

また、それぞれの角ごとに指定することも可能です。

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

角丸を使用したデザインは色々な箇所で使用する時が多いと思うので、
border-radiusを使用するとコーディングが楽になるかもしれないです。

CSS:CSSで要素を回転させる方法「transform:rotate()」

CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素
回転させて表示することができます。

transform: rotate(10deg);

rotate()には回転する角度を指定します。

下記のように「-」マイナスで指定することも可能です。
その場合は逆方向に回転して表示されます。

transform: rotate(-10deg);

要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。

下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。


「transform:rotate()」の使用方法

CSS

<style type="text/css">
div#rotate {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
</style>

HTML

<div id="rotate">
test
</div>

表示例

css_transform_rotate_1


「transition」プロパティを使用すれば、hoverした時にアニメーションで回転させることも可能です。

hover時にアニメーションで回転させる場合

CSS

<style type="text/css">
div#rotate {
    color:#FFF;
    background-color:#09F;
    width: 200px;
    padding:20px;
    -moz-transition: -moz-transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    -ms-transition: -ms-transform 1s linear; 
    transition: transform 1s linear; 
}
div#rotate:hover {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

HTML

<div id="rotate">
test
</div>

表示例

サンプルページ


他にも「rotateX()」「rotateY()」「rotateZ()」「rotate3d()」で
指定することもできます。

要素を傾けて表示させたり、hoverした時に要素を回転させたりなど、
サイトに動きが出せて面白いかもしれないです。

WordPress:ログイン画面のWordPressロゴマークを変更する

WordPressをインストールして、ログイン画面を表示するとWordPressのロゴマークが表示されます。

wordpress_admin_logo_1

このWordPressロゴオリジナルの画像に変更する時の方法をメモします。

また、ロゴに設定されているリンク先title属性を変更する方法も記載します。

お客様に管理画面の情報を渡す場合など、WordPressのロゴではなく独自のロゴを設定したい時に活用できます。


WordPressログイン画面のロゴを変更

ロゴに使用する画像を用意し、テーマディレクトリ内に設置します。

使用しているテーマの「functions.php」に下記のコードを記述します。

function login_logo_image() {
    echo '<style type="text/css">
            #login h1 a {
                background: url(' . get_bloginfo('template_directory') . '/login_logo.png) no-repeat !important;
            }
    </style>';
}
add_action('login_head', 'login_logo_image');

ロゴのサイズによってうまく表示されない場合は、
widthやheightなどを追加してスタイルを調整します。

また、CSSファイルを読み込んでスタイルを指定することも可能です。
CSSファイルを使用しているテーマディレクトリ内に設置します。

function admin_login_css() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo("template_directory") . '/admin_login.css">';
}
add_action('login_head', 'admin_login_css');

ロゴのリンク先を変更する場合

デフォルトではWordPressへのリンクが設定されています。

下記はブログのTOPページのURLを設定する時の方法です。

※functions.phpに追加

function login_logo_url() {
	return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_url');

「get_bloginfo(‘url’)」でブログのURLを設定しています。


ロゴのtitle属性を変更する場合

ロゴのtitle属性をブログの名前に変更する時の方法です。

※functions.phpに追加

function login_logo_title(){
	return get_bloginfo('name');
}
add_filter('login_headertitle','login_logo_title');

「get_bloginfo(‘name’)」でブログのサイト名を設定しています。


「wp-admin」ディレクトリ内のファイルを編集してもいいのですが、
WordPressをバージョンアップした時に編集した内容が上書きされてしまうので、
ロゴマークを変更したい場合は上記の方法で設定するといいと思います。