WordPressのスライドショープラグイン「Content Slide」


WordPressのスライドショープラグイン「Content Slide」

最近、色々なサイトやブログでスライドショーを実装している方が増えてきましたね。という事で今回はWordPressのプラグイン「Content Slide」の設定方法を記事にしました。僕もやってみましが超簡単に出来ますよ^^

 

 

こんにちは、ARMSです^^

本日も当ブログへのご訪問頂き本当に有難う御座います。

ARMS実績&プロフィールはこちらから

 

最近、いろんな方のブログを見るとバナーを、

スライドさせている方が多くなってきましたね。

 

僕も以前から実装しようしようとずっと思ってましたが、

なかなか時間がなくて後回しになっていました。

(でも、やってみてビックリ!超簡単です^^)

 

既にご覧頂いていると思いますが、

このブログのトップページで複数の画像を自動でスライドしています。

設定に要する時間はたったの5分!?

いや~、プラグインて改めて便利だなと感じました。

 

という事で僕は「Content Slide」とプラグインで表示させています。

画像を全自動でスライドさせるという事のメリットは、

単純に画像やブログなどを綺麗に見せる事が出来るという事も勿論ですが、

それよりもあなたが見せたいバナーに目を引かせる事が出来る…、

それによってクリック率が上がる…、これが最大のメリットです。

 

WordPressのスライドショープラグイン「Content Slide」

Content Slide デモ

 

「Content Slide」は画像とテキストを使ったコンテンツを効率良く、

しかも目を魅くような効果で見せる事が出来るので非常にオススメですよ!

 

「Content Slide」の導入

このプラグインを設置するのは先程も言いましたが非常に簡単です。

まずはいつものようにワードプレス管理画面のプラグインの新規追加から、

「Content Slide」と入力して検索して下さい。

 

「Content Slide」の導入

 

「Content Slide」と入力して検索すると、

結果の最上部に「WordPress Content Slide」と表示されてます。

早速、このプラグインをインストールします。

 

インストールが完了するとワードプレス管理画面の左側のお問い合わせの下に、

「Content Slide」という項目が追加されているので確認して下さい。

 

「Content Slide」の導入

 

では、早速設定方法について解説していきます。

 

「Content Slide」基本的な設定

「Content Slide」基本的な設定

 

  • Image width/height: スライドの幅と高さ
  • Border width: スライドのボーダーの太さ
  • Border Color: スライドのボーダーカラー
  • Font family: コンテンツに挿入するテキストのフォントファミリー
  • Text font size: コンテンツに挿入するテキストのフォントサイズ
  • Text color: コンテンツに挿入するテキストのフォントカラー
  • Heading font size: コンテンツに挿入する見出しのフォントサイズ
  • Heading color: コンテンツに挿入する見出しのフォントカラー
  • Background color: コンテンツに挿入する見出し・テキストの背景色

 

「Content Slide」エフェクト&アニメーションの設定

「Content Slide」エフェクト&アニメーションの設定

 

  • Squares per width: スライドエフェクトに用いられるスクエアの横サイズ
  • Squares per height: スライドエフェクトに用いられるスクエアの縦サイズ
  • Delay between images in ms: コンテンツを切り替える早さの間隔
  • Delay beetwen squares in ms: スライドエフェクトの速度
  • Opacity of title and navigation: タイトルとスライド左右のナビゲーションの透過値
  • Speed of title appereance in ms: テキストのフェードイン効果の速度
  • Effect: エフェクトの種類
  • Mouse Over Pause: マウスオーバーでスライドを停止させるか否か
  • Navigation Previous/Next: 戻る・進むナビゲーション(スライド両端)の表示・非表示
  • Navigation Buttons: スライドナビゲーション(スライド直下)の表示/非表示
  • Navigation Buttons Color: スライドナビゲーションの色

 

「Content Slide」イメージソースの設定

「Content Slide」イメージソースの設定

 

  • Display Heading and Text?: スライドに見出しとテキストを表示/非表示
  • Open Images/Links In New Window?: 画像に指定したリンクを新しいウィンドウで開くか否か
  • Order Images Randomally?: コンテンツが表示される順番をランダムにするか否か
  • Use custom images?: スライドに使用するコンテンツ
  • Yes, Custom Images.(この設定画面で新たに設定する画像・文章を使う)
  • No, Useing Posts from a Category(投稿記事カテゴリーのコンテンツを使う)
  • Number of custom Images: スライドに使用するコンテンツの数
  • Image 1(2,3…) SRC: スライドショーにしたい画像のURL
  • Image 1(2,3…) Link: 画像に貼付けるリンク先のURL
  • Image 1(2,3…) Heading: コンテンツの見出し
  • Image 1(2,3…) Text: コンテンツの文章

 

「Content Slide」の設置しよう!

ここまでくればもう少しです。

この自動画像スライドを設置するには phpコードの追記が必要となります。

スライドを表示させたいテーマファイル(.php)の任意の場所に、

下記のphpコードをコピペしちゃって下さい。

<?php if (function_exists( 'wp_content_slider' )) { wp_content_slider(); } ?>

 

また、必要に応じてという事になりますが、

例えばトップページのみでスライドショーを表示させたい!

という場合には、header.phpのbodyタグ内、

もしくはindex.phpの任意の場所に下記のphpコードをコピペします。

 

<?php if (is_front_page()) {

if (function_exists('wp_content_slider')) { wp_content_slider(); }} ?>

 

という事で「Content Slide」の紹介と設定方法でした。

このプラグインはかなり簡単に実装出来ますので是非使ってみて下さいね^^

 

PS;

どんな事でも全然かまいません!

分からない事や悩んでる事があればいつでも僕まで気軽にメールを送って下さい。

勿論、遠慮なんか一切いりませんし、精一杯返答させて頂きます!

ARMSへのお問い合わせはこちらから

Leave a comment

Your email address will not be published.


*