右に左に画像やロゴをスライドさせるとカッコイイ演出になりますね。しかし、一体どうしたらスライドさせられるのでしょう？実は覚えてしまえば簡単です。

以下のようなロゴスライダーなど、簡単に作れます。

本記事では、画像スライダー（slick）を実装する方法を解説します。ぐらんぐらんスライドさせちゃいましょう！

画像スライダーのサンプル

実際にスライダー（slick）を実装したサンプルです。イメージにマウスを重ねると、イメージがちょっと動く仕掛けを入れています。

画像スライダーの作り方（基本）

単純に画像を並べてスライドさせる作り方です。（マウスホバーで画像が変わる処理はありません）

Slick スライダーを初期化している間の「loading…」画像の表示は行います。

サンプル（基本）

■ ライブラリとCSSの読み込み

スライダーを使うための CSS とライブラリー（※）を読み込みます。

（※ “Slick” は、多機能でカスタマイズ可能な jQuery のスライダーです。ライブラリ＝jQuery を読み込みます）

<!-- スライダー用の CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- ライブラリを読み込む -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

「cdn.jsdelivr.net」から Slick スライダーを使うためのライブラリーを読み込みます。固定ページや投稿ページで使う場合、「カスタムHTML」ブロックを配置して、上記のコードを貼り付けてください。

■ 画像をメディアライブラリに設置

スライダーに表示するための画像（一覧に表示するための画像と、「loading…」画像（アニメーション gif で作成）は前もってメディアライブラリに読み込ませておきます。

メディアライブラリに登録したら、イメージファイルのURLを取得してきます。各イメージをクリックして詳細を表示します。

右下のファイルのURLから「イメージファイルの URL」を取得します。忘れずに「loading…」画像のURLも記録しておいてください。

■ HTML 部分

スライダーの HTML 部分です。「loadning…」画像と、スライダーで利用するイメージファイルを用意しています。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<!-- loading メッセージ -->
<div class="mySlickLoadingMessage"><img src="https://xxxx/xxxx_loading.gif"></div>

<div class="mySlick">
  <div class="mySlick_item"><img src="https://xxxx/xxx1.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx2.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx3.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx4.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx5.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx6.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx7.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx8.png" alt="" width="120" height="120""></div>
</div>

「loading…」イメージのURLと、slick スライダーで利用する各イメージのURLを並べています。クラス名は必要に応じて変えてください。

■ CSS 部分

スライダーの CSS 部分です。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<style>
/* ******************************* */
/* スライダー */
.mySlick {
  width : 100%;
  opacity: 0;
  height : 0px;
}

/* フェードインのアニメーション */
.mySlickFadein {
    animation: mySlickFadeInAnimation 3s ease forwards;
}

@keyframes mySlickFadeInAnimation {
  from {
    opacity: 0;
    height : 120px;
  }
  to {
    opacity: 1;
    height : 120px;
  }
}

/* イメージ */
.mySlick_item {
  margin-right: 5px;
  margin-left: 5px;
}

.mySlick_item img {
  width: 120px;
  height: auto;
}

/* loading メッセージ */
.mySlickLoadingMessage {
  display: block;
  text-align : center;
  height : 120px;
  font-size : 20px;
  padding-top : 12px;
  margin-bottom : 0px !important;
}
</style>

イメージやスライダーのサイズ（横・縦）を指定しています。スライダーの初期化終了後に「loading…」イメージは消えてスライダーをフェードインで表示させるため、そのアニメーションも定義しています。

■ JavaScript 部分

スライダーの JavaScript 部分です。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<script>
// スライダーの初期化
$(document).ready(function(){
  // スライダーの初期化
  $(".mySlick").slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    cssEase: 'linear',
    slidesToShow: 3,
    swipe: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    arrows: false,
    variableWidth: true
  }).on('afterChange', function(){
    // スライダーの初期化が完了したらフェードインさせる
    $('.mySlick').addClass('mySlickFadein');
    // loading メッセージを非表示にする
    $('.mySlickLoadingMessage').hide();
  });
});
</script>

画像スライダーの作り方（応用）

画像を並べてスライドさせ、かつマウスオーバーで画像を切り替えます。メインの画像が上側にあり、マウスホバーした対象の画像にメインの画像も切り替わります。

• マウスホバー時の動くアニメーションは「アニメーション gif」を用意しています

サンプル（応用）

■ ライブラリとCSSの読み込み

スライダーを使うための CSS とライブラリー（※）を読み込みます。（ここは基本編と一緒です）

<!-- スライダー用の CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- ライブラリを読み込む -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

「cdn.jsdelivr.net」から Slick スライダーを使うためのライブラリーを読み込みます。固定ページや投稿ページで使う場合、「カスタムHTML」ブロックを配置して、上記のコードを貼り付けてください。

■ 画像をメディアライブラリに設置

スライダーに表示するための画像（一覧に表示するための画像と、マウスホバー時のアニメーション gif 画像、「loading…」画像（アニメーション gif で作成）は前もってメディアライブラリに読み込ませておきます。

メディアライブラリに登録したら、イメージファイルのURLを取得してきます。各イメージをクリックして詳細を表示します。

今回のサンプルでは、画像のファイル名（URLのファイル名部分）を、通常時は「.png」、マウスホバー時は「_hover.gif」と切り替わるように（JavaScriptで）作っています。同じ（ような）ファイル名にしてください。

■ サンプルコード

スライダーの サンプルコードです。HTML、CSS、JavaScript を全て一緒に記載します。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<!-- Main -->
<div style="text-align:center">
  <div class="mySlickNeoMainImage"><img src="https://xxxx/mySlick_image1_hover.gif"></div>
</div>

<br>

<!-- loading メッセージ -->
<div class="mySlickNeoLoadingMessage"><img src="https://xxxx/loading.gif"></div>

<div class="mySlickNeo">
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image1.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image2.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image3.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image4.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image5.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image6.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image7.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image8.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
</div>

<style>
/* ******************************* */
/* スライダー */
.mySlickNeo {
  width : 100%;
  opacity: 0;
  height : 0px;
}

/* フェードインのアニメーション */
.mySlickNeoFadein {
    animation: mySlickNeofadeInAnimation 3s ease forwards;
}

@keyframes mySlickNeofadeInAnimation {
  from {
    opacity: 0;
    height : 120px;
  }
  to {
    opacity: 1;
    height : 120px;
  }
}

/* イメージ */
.mySlickNeo_item {
  margin-right: 5px;
  margin-left: 5px;
}

.mySlickNeo_item img {
  width: 120px;
  height: auto;
}

/* loading メッセージ */
.mySlickNeoLoadingMessage {
  display: block;
  text-align : center;
  height : 120px;
  font-size : 20px;
  padding-top : 12px;
  margin-bottom : 0px !important;
}

</style>

<!-- SLICK の実装 -->
<script>
// イメージ切り替え
function mySlickNeo_changeImage(img) {
  img.src = img.src.replace(".png", "_hover.gif");

  var divElement = document.querySelector('.mySlickNeoMainImage img');
  divElement.src = img.src;
}

function mySlickNeo_resetImage(img) {
  img.src = img.src.replace("_hover.gif", ".png");
}

// スライダーの初期化
$(document).ready(function(){
  // スライダーの初期化
  $(".mySlickNeo").slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    cssEase: 'linear',
    slidesToShow: 3,
    swipe: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    arrows: false,
    variableWidth: true
  }).on('afterChange', function(){
    // スライダーの初期化が完了したらフェードインさせる
    $('.mySlickNeo').addClass('mySlickNeoFadein');
    // loading メッセージを非表示にする
    $('.mySlickNeoLoadingMessage').hide();
  });
});
</script>

イメージのURLやクラス名は必要に応じて変えてください。

Slick のコアオプションとイベント

JavaScript 部分で利用できる、Slick の設定（コアオプション）とイベントを記載しておきます。

Slick で利用できる設定（コアオプション）です。

Slick で利用できる設定（コアオプション）です。

いろいろ工夫して、おしゃれでかっこいい Slick スライダーを作ってみてください。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：画像スライダー（slick）を実装する方法

Slick スライダーを効果的に使えるとサイトが一段とクールになりますよね。しかし、一見難しそうに見えます。実際には、Slick スライダーは jQuery が用意されていますので、CSS と JavaScript を定型的に記載することで利用することが可能です。

たのしいサイト、魅力的なサイトをどんどん作ってくださいね。

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

画像を好きな形で切り抜きたい場合がありますよね。そういう形の画像を用意しても良いのですが、CSSで任意に切る撮ることができたら便利です。

記事では、画像を丸や三角や台形、任意の形でくり抜く方法を解説します。切っちゃいましょう！バシバシと。

画像を切り抜く方法

画像を切り抜く場合は、CSS の「clip-path」を使います。具体的に切り抜くパターンごとに見ていきましょう。

■ 丸く切り抜く

正円で切り抜いています。

clip-path: circle(180px at 200px 200px);

「clip-path」で circle を指定します。上記の例は半径 180px、中心位置 200px、200px で正円で切り抜いています。

■ 楕円に切り抜く

楕円で切り抜いています。

clip-path: ellipse(300px 180px at 300px 200px);

「clip-path」で ellipse を指定します。２つの半径（長径と短径）と位置を指定して楕円を定義します。

■ 三角形に切り抜く

三角形（山形）で切り抜いています。

clip-path: polygon(0% 100%, 50% 0%, 100% 100%);

「clip-path」で polygon を指定します。三角形や多角形を指定する場合は各矩形の頂点を順番に指定します。

（横＝ｘ、縦＝ｙ）で指定します。画像の左上が（ 0% 0% ）、画像の右上が（ 100% 0% ）、画像の右下が（ 100% 100% ）です。画像のど真ん中は（ 50% 50% ）ですね。

■ 台形（左側をカット）に切り抜く

台形（左側を斜めにカット）で切り抜いています。

clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 100% 100%);

「clip-path」で polygon を指定します。台形は頂点が４点ありますので、各頂点を指定しています。

■ 台形（下側を斜めにカット）に切り抜く

台形（下を斜めにカット）で切り抜いています。

clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);

「clip-path」で polygon を指定します。台形は頂点が４点ありますので、各頂点を指定しています。

■ ぐにょぐにょ（好きな形に）に切り抜く

ぐにょぐにょに切り抜いています。

具体的には、svg ファイル（画像をベクトルで指定したもの）を利用して、切り抜く矩形を指定します。

方法は以下の通りです。

STEP

svg ファイルを用意する

svg ファイル（画像）を用意します。

STEP

svg ファイルを html で表記する

svg ファイルは内部がテキストになっていますので、メモ帳などで開けます。開いてそのまま html で表記します。

<svg version="1.1" height="0" width="0">

<clipPath id="my-svg-1">

<path fill="#000000" d="M 134.175781 （途中省略...） 170.714844 "/>

</clipPath>

</svg>

そのまま書くと画面に svg ファイルを表示してしまうので、height=”0″ width=”0″ を指定して大きさのない画像にします。

path タグの前後を、clipPath で囲みます。この時に、任意の名前（ id ）をつけます。

STEP

CSS で 矩形を指定する

html で書いた svg ファイルの矩形を CSS で結び付けます。

 clip-path: url(#my-svg-1);

url を指定して、svg を記述した際につけた任意の名前に先頭に # をつけて指定します。

STEP

完成です

完成です。

WordPress で使う場合

WordPress で記事に貼った画像に使う場合はちょっとコツがあります。順に説明します。

STEP

画像にクラスをつける

• 画像に「追加 CSS クラス」で任意のクラス名（例：my-sample-cut）を指定する

STEP

CSS を指定する際に img をつける

WordPress の画像は、div タグで自動で囲まれ、その div タグのほうに、任意で付けたクラス名が付与されます。そのままクラス名を指定して切り抜くと、img ではなく div タグのほうを切り抜いてしまうため、明示的に img のほうに CSS を適用します。

<style>
.my-sample-cut img {
  clip-path: circle(180px at 200px 200px);
}
</style>

STEP

完成です

完成です。切り抜けました。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：画像を丸や三角や台形、任意の形でくり抜く方法

画像を任意の形で切り抜くには、CSS の clip-path を利用します。

ぐでんぐでんに切り抜いて、かっこいいホームページを演出してくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

画像をスライドショー形式で設置したいとき、ありますね。自分で作ろうとしたら大変です。

スライドショーはプラグインで簡単に設置でき、動きもあるので訪問した読者にも印象付けしやすいお得な機能です。「Meta Slider プラグイン」を使うことで簡単に実装することができます。

本記事では、画像のスライドショーの作り方を解説します。Meta Slider プラグインを使います。

Meta Slider プラグイン

Meta Slider プラグインは無料で使える画像スライダーが実装できるプラグインです。トップページ、固定ページ、投稿記事などに設置することができ、使い勝手も良いですね。

動画です。再生いただくと雰囲気をご確認いただけます。

実際のデモをご覧になりたい方は、こちら のページをご覧ください。

Meta Slider プラグインの使い方

■ プラグインのインストール

「Meta Slider」 プラグインは WordPress のプラグインの新規追加で検索すると出てきます（少し名前が違っているので注意してください、アイコンを見て判断しましょう）。

確認して有効化します。

■ スライドショーの作り方

STEP

スライドショーの新規作成

WordPress の管理画面から、「MetaSlider」→「Home」を選択します。

• 「Add New」をクリックする

STEP

スライド画像の追加

• 「スライドを追加」をクリックする

STEP

画像の追加

• 「メディアライブラリー」または「ファイルをアップロード」で画像を追加する

STEP

画像の設定

• 必要に応じて、画像のキャプションやリンク先を設定する

STEP

スライダーの種類を選ぶ

• スライダーの種類を選ぶ

種類	概要
Flex Slider	通常のスライダーです。
R. Slides
Nivo Slider
Coin Slider

STEP

スライダーの設定

• スライダーに対して細かい設定を行う（変える必要なければ、そのままでもOK！）

幅や高さ、切り替え形式（フェード、またはスライド）などが指定できます。

STEP

プレビューで確認

• 「Preview」ボタンをクリックする

実際の動きを確認できます。

STEP

名前を入れる

• 作成したスライドショーに名前を付ける

STEP

保存する

• 「保存」ボタンをクリックする

STEP

ショートコードを取得する

• 一覧画面からショートコードを取得する

ショートコードを、投稿記事や固定ページなどに貼ることで、作成したスライドショーを利用することができます。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：Meta Slider プラグインの使い方

画像スライドショーを簡単に設置したい場合、Meta Slider プラグインが便利です。無料で使うことができ、簡単に画像スライダーが実装できるプラグインです。

画像スライダーを使って素敵なサイトを作ってくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

ブログ記事やリンク画像などで、マウスオーバーで画像がちょっと拡大する演出ってかっこいいですよね。マウスオーバーでの画像拡大表示は CSS で簡単に実装できます。

本記事では、マウスオーバーで画像をちょっと拡大表示する方法を解説します。細かい演出が読者に心地よさを提供しますね。

40代、50代からでもできるおすすめ副業はこちら

あわせて読みたい

【簡単・初心者】たった6ステップで解説「ブログ・アフィリエイトの始め方」 副業に迷っているならアフィリエイト、誰でも始めることができリスクが少ないおすすめ副業です。ブログが自動で収益を出してくれる未来を想像しましょう。本業の他に収入がある毎日を想像しましょう。初心者でもわかりやすくブログ・アフィリエイトの始め方と作り方を解説しています。あなたも自分の人生に潤いを与えるチャンスを掴んでみませんか？

マウスオーバーで拡大するサンプル

もともとの画像よりも大きくする見せ方、もともとの画像のサイズ内で大きくする見せ方の両方を使い分けるのが素敵です。

２通りの拡大表示サンプルです。

拡大表示サンプル

画像の上にマウスをオーバーすると、画像がちょっと大きくなります。

拡大表示サンプル

画像の上にマウスをオーバーすると、画像がちょっと大きくなります。

画像のもともとのサイズよりは大きくなりません。

拡大表示方法①：マウスオーバーで画像をちょっと大きくする方法

簡単な CSS を使って実現できます。

STEP

画像ブロックに クラス を指定する

WordPress で画像を張り付けたら、任意のクラス名を指定します。

• 画像を配置する
• 「追加 CSS クラス」に任意の クラス名 を設定する

STEP

CSS を設定する

ポイント

サイト全体で利用する場合は、WordPress の設定画面から「外観」→「カスタマイズ」→「追加CSS」に記載します。

該当の記事内のみで利用する場合は、「カスタム HTMLブロック」に記載します。

• 「カスタム HTML」 ブロックを配置する
• CSS を記載する

以下の CSS を記載します。

<style>
.myImage01 img {
    transition: transform .6s ease;
}

.myImage01:hover img {
    transform: scale(1.1);
}
</style>

ポイントです。

• サイト全体の「追加CSS」の方に記載する場合は、<style>タグの記載は不要
• 「transition」で動きに コンマ6秒を指定する
• 「transform: scale(1.1)」でマウスオーバー時に画像を 1.1 倍に拡大する

拡大表示方法②：マウスオーバーで元画像のサイズ内で画像をちょっと大きくする方法

簡単な CSS を使って実現できます。

STEP

画像ブロックに クラス を指定する

WordPress で画像を張り付けたら、任意のクラス名を指定します。

• 画像を配置する
• 「追加 CSS クラス」に任意の クラス名 を設定する

STEP

CSS を設定する

ポイント

サイト全体で利用する場合は、WordPress の設定画面から「外観」→「カスタマイズ」→「追加CSS」に記載します。

該当の記事内のみで利用する場合は、「カスタム HTMLブロック」に記載します。

• 「カスタム HTML」 ブロックを配置する
• CSS を記載する

以下の CSS を記載します。

<style>
.myImage02 {
    overflow: hidden;
}

.myImage02 img {
    transition: transform .6s ease;
}

.myImage02:hover img {
    transform: scale(1.1);
}
</style>

ポイントです。

• サイト全体の「追加CSS」の方に記載する場合は、<style>タグの記載は不要
• 画像ブロックのクラス（ myImage02 ）自体に、「overflow: hidden;」を指定し、枠外は非表示にする

WordPress のお役立ちテクニックはこちら

旅行好きなあなたに送る特別な体験を！

夢の海外旅行へ！タイ・バンコクで魅惑的な体験をしてみませんか？

どんどん！バンコクの情報を紹介しています。ぜひご覧ください。

いつ行くの？今でしょ！

まとめ：画像をマウスオーバーで（ちょっと）拡大表示する方法

マウスオーバーで画像をちょっと拡大表示する演出は、簡単な CSS で実現可能です。

素敵な演出で、素敵なサイトを作ってくださいね。

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

オシャレなサイトに必須！CSSだけで定期的に画像をフェードインしながら切り替える方法をご紹介します。読者からの好感度もアップするこの方法は、JavaScriptを使わなくても実現可能。

ページのワンアクセント表現でも最適で、複数の画像を一定間隔で切り替えながら、スタイリッシュに表示することができます。これからサイトを作る方やデザインにこだわりたい方必見の記事です。

本記事では、CSSだけで実現する画像を一定間隔で切り替える方法を解説します。表現力豊かなデザインの素敵なブログを作れますね。

画像を一定時間でボワっと切り替えるサンプル

５枚の画像を一定時間（２秒ごと）に切り替えています。切り替わるタイミングで、画像がフェードインします。

WordPress で一定間隔での画像切り替える仕組み（CSSだけで実現）

CSS だけで実現する場合は、animation （アニメーション）を使います。画像を数秒おきに切り替える場合、以下のように各々表示～非表示を繰り返すように作成します。

WordPress で一定間隔での画像切り替える方法（CSSだけで実現）

Step.1 画像をメディアライブラリにアップする

WordPress の管理画面から「メディア」→「ライブラリ」を選択して、表示する画像をメディアライブラリにアップします。

Step.2 画像の URL を取得する

メディアライブラリの画像の詳細から URL を取得します。表示する全画像の URL を取得しておいてください。

Step.3 画像の配置と切り替えコードを書く

記事作成画面で「カスタムHTML」ブロックを利用します。

次のコードを記入します。

<div class="myChangeImage">
    <img src="https://xxxxxx.com/iamge/image1.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image2.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image3.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image4.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image5.jpg" width="400px" height="225px">
</div>

<style>
.myChangeImage{
    position: relative;
    width : 400px;
    height : 225px;
    border : 1px solid;
}

.myChangeImage img{
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImage 10s infinite;
    opacity: 0;
}

@keyframes ChangeImage{
    0%{ opacity: 0;}
    10%{ opacity: 1;}
    20%{ opacity: 1;}
    30%{ opacity: 0;}
    100%{ opacity: 0;}
}

.myChangeImage img:nth-of-type(1) {
     animation-delay: 0s;
}
.myChangeImage img:nth-of-type(2) {
    animation-delay: 2s;
}
.myChangeImage img:nth-of-type(3) {
    animation-delay: 4s;
}
.myChangeImage img:nth-of-type(4) {
    animation-delay: 6s;
}
.myChangeImage img:nth-of-type(5) {
    animation-delay: 8s;
}
</style>

• 「”https://xxxxxx.com/iamge/image1.jpg”」は、Step.2 で取得した画像の URL に差し替える
• サイズ（例：400px、225px）は任意の値に修正する
• 「animation: ChangeImage 10s infinite;」の「10s」は、「切り替え間隔（例：２秒）× 画像の枚数（例：５枚）」の値（例：10s）に書き換える
• 「0%」～「100％」の％指定は、画像の枚数によって変える（枚数ごとの数値は後述参照）
• 「animation-delay: 2s;」は、切り替え間隔の掛け数を指定する（２秒おきなら、2s、4s、6s、……）

■ 画像枚数別おすすめパーセンテージ

Step.4 完成

完成です。プレビューして動作を確認してください。

画像２枚のパターン

画像３枚のパターン

画像４枚のパターン

画像５枚のパターン

↑クリックで１枚目から動かし直します。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：一定間隔で画像を切り替える方法

CSS だけを利用して、複数の画像を一定間隔でフェードインしながら表示を切り替える方法です。

ページのポイントで使うとオシャレなサイト（記事）になり、読者からの好感度向上が期待できます。

いままで、「どうやって作っているんだろう？」と不思議だった世の中のオシャレなページの作り方の一端が見えてきた気がしますね。

■ JavaScript を利用して実現する方法はこちら

あわせて読みたい

画像を一定間隔で切り替える方法（CSS＋JavaScript） CSS と JavaScript を利用して、複数の画像を一定間隔でフェードインしながら表示を切り替える方法です。ページのポイントで使うとオシャレなサイト（記事）になり、読者からの好感度向上が期待できます。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

WordPress の情報、テクニック一覧はこちらをクリック！

アフィリエイトスクールのすすめ

アフィリエイト初心者や経験者にとって、正しいスキルを学ぶことは成功につながる重要な要素です。間違った手順でブログ運営をしていたらいつまでたっても成功しません。正しい知識はスクールで身に着けるのが一番です。

＼説明会参加無料／

おすすめスクールはこちらから

おすすめアフィリエイトスクールはこちら

１日早く始めれば、１日早く収益化できる。

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR