WordPressのバナー&画像スライド『Content Slide』 - ソーシャルメディア集客術SEO/SMO情報

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加

WordPressのバナー&画像スライド『Content Slide』

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



WordPressスライドショープラグイン『Content Slide』


最近、いろんな方のブログやサイトを見ると
画像バナーをスライドさせている方が多くなってきましたね。


私も以前から実装しようしようとずっと思ってましたが、
難しいのかと思い後回しになっていました。


でも画像をスライドさせたいと思う気持ちが強く
いざインストールして設定してみると超簡単でした!!


設定に要する時間はたったの5分~10分!?
いや~、プラグインは改めて便利だなと感じました^^


複数の画像を全自動でスライドさせるという事のメリットは、
単純に画像やブログなどを綺麗に見せる事が出来るという事も勿論ですが、


それよりもあなたが見せたいバナーに目を引かせる事が出来る。
それによってクリック率が上がる、滞在時間がふえる、これが最大のメリットです^^


Content Slideは画像とテキストを使ったコンテンツを効率良く、
しかも目を魅くような効果で見せる事が出来るので非常にオススメですよ!!


『Content Slide』の導入方法


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


まずはいつものようにワードプレス管理画面のプラグインの新規追加から、
『Content Slide』と入力して検索して下さい。



Content Slideと入力して検索すると、
結果の最上部に『WordPress Content Slide』と表示されてます。


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


インストールが完了するとワードプレス管理画面の左側のお問い合わせの下に、
『Content Slide』という項目が追加されているので確認して下さい。


続いて各設定方法について解説していきます。


『WordPress Content Slide』基本的な設定方法


『WordPress Content Slide』基本的な設定方法

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


『WordPress Content Slide』エフェクト&アニメーションの設定方法


『WordPress 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:スライドナビゲーションの色


『WordPress Content Slide』イメージソースの設定方法


『WordPress 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:コンテンツの文章


『WordPress Content Slide』で画像をスライドさせるphpコード


この自動画像スライドを設置するには 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(); }} ?>




以上で、『WordPress Content Slide』の紹介と設定方法でした。
このプラグインはかなり簡単に実装できますので是非使ってみて下さいね^^
関連記事
このエントリーをはてなブックマークに追加
サイト作成ツールSIRIUS『シリウス』

この記事はあなたのお役に立てましたか?

もし誰かの役に立ちそうだと思っていただけたなら、下のボタンから共有をお願いします

あなたの応援のおかげで明日も頑張って記事が書けます

にほんブログ村 小遣いブログ ネットビジネスへ
コメント
非公開コメント

 

トラックバック

http://socialmagazine.blog.fc2.com/tb.php/80-0c5e14f3

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。