ウルトコ、ついに正式リリース!!!

またまたこちらではご無沙汰になってしまいました…
すんです!

最近はfacebookやウルトコのブログにて色々とお知らせをしてまいりましたが、
ついに、ウルトコが正式リリース!いたしました!!!


(ウルトコさん)

ウルトコは、CS-Cartベースのネットショップ構築サービスになります。
ショップと専用サーバー(SSL付き)を一緒に提供いたしますので、

サーバーのこと全然わかんないよ!!!
という方にも安心してご利用いただけるサービスです。

さらに、自由度のがあまり高くない、壁紙程度しかデザインの変更が行えないASPサービスと比べると
ウルトコのショップデザインは、ウルトコのデザインチームが制作いたしますので、
思い描いたとおりのショップをつくることが可能です。

さらにさらに!!
ウルトコには最近話題の越境ECをサポートする様々な機能が備わっています。
デフォルトで多言語対応!
日本語、英語、中国語を含む全18言語に対応(一部言語は部分翻訳)しています。

そして、標準で3通貨に対応(日本円、USドル、ユーロ)に対応しており新しい通貨を追加することも可能です!

その他にも、ご紹介したい機能がたくさんあるのですが…

詳細に関しましてはぜひ!ウルトコのサイトをご覧ください。

・料金プラン
・ウルトコ標準機能

あ、最後にもうひとつ!!!
ウルトコには、ウルトコサポーターズという制度があります。

もっと高機能なネットショップをお客様に提供したい!ASPサービスしか提案したことがない・・・
そんなウェブ制作会社・広告会社・デザイン会社の皆様へ!
ウルトコを使って、EC制作をしてみませんか?

という制度です。

ウルトコサポーターズには
紹介サポーターと、デザインサポーターの2種類があります。

こちらも興味のある方は!ぜひウルトコサイトのサポーターズページをご覧ください!

「CS-Cart」公式スタートアップガイド!!!

ご無沙汰しております…すんです。

facebookでは週に2回はかならず登場している私ですが、
ブログには久々の登場となってしまいました…

さて、そんな数ヶ月ぶりの私の記事、

タイトル通り、
「CS-Cart」公式スタートアップガイドについてのお話です。

CJNzN0rUMAAfKFC

実は、このCS-Cart公式スタートアップガイドに、私の名前が…(ちゃっかり)

img

恐縮です…

そんなCS-Cart公式スタートアップガイドが、

なんと…!

Amazonで購入出来るように!なりました!!!
http://www.amazon.co.jp/exec/obidos/ASIN/4802090196/

現在予約受付中ですよみなさん!

CS-Cartを使ってネットショップを構築・運用する方法を、
画像や注釈をちりばめて、とってもわかりやすく解説してある公式ガイドブックです。

CS-Cartでショップ作り始めたけど設定箇所が多くてむずかしいよ〜
というそこのあなたも!

これからCS-Cart使ってみようかな〜
というあなたにも!!おすすめです!!!

ショップの支払方法、配送方法の設定はどうやってすればいいのー?

ユーザーグループってなにー?

注文ステータスっていろいろあるけど、
ひとつひとつどういう意味があるのー?

などなど、

疑問に思うような部分をピンポイントで解説してあるので、
皆様のお役に立てるような一冊になっていると思います。

あんどぷらすLINEスタンプ!ついに販売開始!!

どうも!すんです。

facebookやtwitterなどでも大々的に発表しましたが、
なんと。あんどぷらすのLINEスタンプが。ついに!!!承認!されました!!!

linestamp_bunner_01

↑Stampersページへ

個人的にお気に入りなのは「そんなことよりサッカーしようぜ」スタンプと、
「へっ」って顔してるやつ(多分見ればわかります)です。

至る所で使いまくっています今。

ショップオーナー・EC担当・WEB業界人のそこのあなた!
そしてそして、「あー、サッカーしたいなー」って、一日3回は思うそこのあなたも!
文字なしのスタンプが多いので使う場面をアレンジできますよー!
沢山の方に使って頂けたら嬉しいです。

あんどぷらすLINEスタンプ!宜しくお願いします!!
>>LINE STOREヘ

CSS3 Flexboxについて2 対応ブラウザ編【めもめも】

※随時更新中

すんです。
前回紹介した「Flexbox」。

記事:CSS3 Flexboxについて【めもめも】

早速今作っているサイトに使ってみました!…が。

Safariでレイアウトが崩れる。

調べてみた所、

display: flex;

に対応していないブラウザ、バージョンがまだまだあるそうで。

現状は下記のような感じで対応してあります。

display: -webkit-flex;

といった形で。

場合によっては

display: -webkit-box;

という形になるみたい。

この「-webkit-flex」と「-webkit-box」、じゃあどっち書いとけば良いのよ!
っていう話なんですが、

Safariの場合ですと
ver6までは「-webkit-box」で。
ver6.1以降は「-webkit-flex」での対応が必要なようです。

現状、最新のバージョンは7.0.6?かな?(あやふや)

ただ古いバージョンのブラウザですと
「display: -webkit-box;」で設定したとしても、「flex-wrap」などなど、
使えなくなる機能、というか「display: box」に対応していないものが多くあるみたいで…

_| ̄|○

さらにさらに、
Safariに限らずその他のブラウザの旧バージョンでも、動かない場合があります。

「IE」「firefox」「Chrome」だと、最新バージョンでしたら

display: flex;

が問題なく動きますが、旧バージョンだと動かない場合が。

「-ms-」「-moz-」「-webkit-」といった感じで、
動かす為には各ブラウザ向けのベンダープレフィックスを付ける必要も出てきますし。

それでも動かないこともありますし。

…むむむ。

Safari以外のブラウザで、バージョンが最新でない場合でも、

display: flex;
display: -webkit-flex;

で対応が可能であれば、その他大体のFlexboxの機能、
「flex-wrap」「flex-flow」などを使用する事ができる。はず。

めもめも。

CSS3 Flexboxについて【めもめも】

どうも!すんです。

今回「時々WordPress」カテゴリでの更新となりましたが、WordPressとは全く関係ない(…とは言い切れませんがさすがに)
CSS3の「Flexbox」について!私のメモとして記していきたいと思います。

Flexboxについて

今回主にFlexboxで出来る事について、4つピックアップしてみました。

1.Flexboxを指定したコンテナ中のコンテンツの配置方向、順序を決めることができます

2.コンテンツの伸縮ができます

3.コンテンツの整列ができます(水平方向・垂直方向)

4.折り返し設定ができます

まず初めに

今回は例として、
【HTML】

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

【CSS】

#container {
     width:500px;
}

#container div:nth-of-type(1) {
     background: #eef;
     border: 1px dotted #333;
     height: 50px;
     text-align:center;
     line-height: 50px;
     padding: 5px;	 	
}

#container div:nth-of-type(2) {
     background: #CCC;
     border: 1px dotted #333;
     height: 50px;
     text-align:center;
     line-height: 50px;
     padding: 5px;	 
}

#container div:nth-of-type(3) {
     background: #999;
     border: 1px dotted #333;
     height: 50px;
     text-align:center;
     line-height: 50px;
     padding: 5px;	 
}

という形でFlexboxを試してみます。

Flexboxを使用する為に、まず初めにFlexboxコンテナを用意します。
コンテナにしたい要素に

display : flex;

または

display : inline-flex;

を追加します。

これでFlexboxコンテナの完成です。

コンテンツの配置方向、順序を決める(flex-direction)

■ 「flex-direction: row」の場合

下記のようにCSSを追加してみます。

#container {
     display: flex;
     flex-direction: row;
}

↓「row」は初期値です。コンテンツは左から右に表示されます。
row

■ 「flex-direction: row-reverse」の場合

#container {
     display: flex;
     flex-direction: row-reverse;
}

↓「row-reverse」の場合、コンテンツが右から左に表示されます。
row

■ 「flex-direction: column」の場合

#container {
     display: flex;
     flex-direction: column;
}

↓「column」の場合コンテンツは上から下に表示されます。
row

■ 「flex-direction: column-reverse」の場合

display: flex;
flex-direction: column;

↓「column-reverse」の場合、「column」とは逆にコンテンツは下から上に表示されます。
row

コンテンツの伸縮ができる(flex-grow)

■ 「flex-grow」の使い方

下記のようにCSSを追加してみます。

#container div:nth-of-type(1) {
     flex-grow: 1;	 	
}

#container div:nth-of-type(2) {
     flex-grow: 2; 
}

#container div:nth-of-type(3) {
     flex-grow: 1;	 
}

row
1番目と3番目のdivに「flex-grow: 1」、2番目のdivにのみ「flex-grow: 2」と設定した場合、2つめのdivは他の2倍の大きさになります。
マイナス(負)の数字は使用できません。

コンテンツの整列ができる(justify-contentとalign-items)

整列の設定をする前に、
コンテナ内のコンテンツの幅と高さを決めておきます。

【CSS】

#container div:nth-of-type(1) {
     width: 100px;
     height: 30px;
}

#container div:nth-of-type(2) {
     width: 100px;
     height: 50px; 
}

#container div:nth-of-type(3) {
     width: 100px; 
     height: 40px;
}

各コンテンツの幅を100pxとしました。

■ 「justify-content」の使い方【水平方向の整列】

「justify-content: center」の場合

#container {
      justify-content: center;
}

wrap
↑このように水平方向に中央揃えになります。

「justify-content: space-between」の場合

#container {
      justify-content: space-between;
}

wrap
↑このように均等にコンテンツ間隔がひらきます。

「justify-content: space-around」の場合

#container {
      justify-content: space-around;
}

wrap
↑「space-between」と同様、このように均等にコンテンツ間隔がひらきますが、
左右の端のコンテンツにも、各コンテンツ間隔の半分の間隔がつきます。

「justify-content: flex-start」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは左揃え。
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは上揃えになります。

「justify-content: flex-end」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは右揃え。
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは下揃えになります。

■ 「align-items」の使い方【垂直方向の整列】

「align-items: center」の場合

#container {
      align-items: center;
}

wrap
↑このように垂直方向に中央揃えになります。
応用して、「justify-content: center」も一緒に適用すると
wrap
↑コンテンツを縦横中央揃えにできます。

「align-items: baseline」の場合

#container {
      align-items: baseline;
}

コンテンツ内のベースラインを揃えます。
※ベースラインとは、文字を下揃えで配置するために使う仮想の基準線のことです。

「align-items: flex-start」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは上揃えに、
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは左揃えになります。

「align-items: flex-end」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは下揃えに、
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは右揃えになります。

折り返しの設定(flex-wrap)

折り返しの設定をする前に、
コンテナ内のコンテンツの幅を決めておきます。

【CSS】

#container div:nth-of-type(1) {
     width:200px;
}

#container div:nth-of-type(2) {
     width:200px; 
}

#container div:nth-of-type(3) {
     width:200px; 
}

各コンテンツの幅を200pxとしました。

■ 「flex-wrap」の使い方「flex-wrap: wrap」の場合

下記のようにCSSを追加してみます。

#container {
      flex-wrap: wrap;
}

コンテナの幅が500pxなのに対し、各コンテンツの幅が200pxになっているので
本来であればコンテンツがはみ出してしまいますが、
wrap

↑親要素であるコンテナの長さを子要素が超えてしまった場合、このように折り返してくれます。

■ 「flex-wrap」の使い方「flex-wrap: wrap-reverse」の場合

下記のようにCSSを追加してみます。

#container {
      flex-wrap: wrap-reverse;
}

wrap

↑「flex-wrap: wrap」の時と同様に、このように折り返してくれますが
「flex-wrap: wrap-reverse」の場合は折り返し地点が逆になります。

「flex-wrap」の初期値は「nowrap」です。

最後に

Flexbox、ここには書ききれませんでしたがまだまだ「便利だ…」「すごい!!!」といった部分が沢山あります。
それはまた次の機会に紹介していければ…と思っております。

個人的には、簡単に縦横中央揃えが出来る「justify-content: center」「align-items: center」の組み合わせに震えました。
ありがたやありがたや。

Flexboxの動きを確認しながら記事を書きましたが、
「ここ違うぞ!」「そんな動きしないよ〜」「誤字!誤字!」などなどありましたら是非つっこんでやってください。

レスポンシブサイトを作る際にも大活躍してくれるのではないかと、実際にFlexbox触ってみながら思いました。
…実は今、レスポンシブサイトを製作中なのです偶然にも。

Flexbox、使い方を覚える為にも早速積極的に取り入れていきたいと思います!!!

あんどぷらす公式Twitter!

こんにちは!!!
……久しぶりの登場になってしまいました、すんです!

この度!あんどぷらすのTwitterアカウントを作成しました!
https://twitter.com/_Andplus

ap

↑この子が目印。

ブログ更新したぞー!

とか、

facebook更新したぞー!!

とかとか、

お腹すいたぞー!!!

みたいなぼやきも!(?)

つぶやいていきたいと思います。

ぜひみなさん!フォローして下さいね!!@_Andplus

WordPressのショートコードを自作したい!【vol.2】【めもめも】

どうも!すんです。
前回投稿したWordPressのショートコードを自作したい!【vol.1】【めもめも】
の続きになります!

今回はvol.2ということで、前回もちょっと触れた「囲み型ショートコード」の自作方法について、めもしていきたいと思います。

前回のおさらい!囲み型ショートコードとは、

[ショートコード名]...囲まれてしまった。[/ショートコード名]

↑このような形のもの。です。

では!早速!!

囲み型ショートコードの自作方法について!

今回も、function.phpにソースを書き込んでいきます。

例として、囲んだ文字の大きさと、色を変えることができるショートコードを作ってみます。

function 関数名( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('ショートコード名', '関数名');

↑上記の形で、自分でショートコード名と関数名を決め作成すると、
囲んだ文字が青色でフォントサイズが24pxになります。

今回は、spanタグを使用しましたが、もちろんその他のタグを使用してショートコードを作る事もできますよ!

実際に関数名とショートコード名を入れてみると…

function sun( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('test2', 'sun');

↑こんなかんじ!

前回の記事同様、
関数名を「sun」に。ショートコード名は「test2」にしてみました。

実際に作ったショートコードを使う時は、

[test2]文字色とサイズを変えたい文字はここに入れてね[/test2]

↑こんなかんじ!

その他にも、

特定のクラス属性を持ったタグで囲みたい!

function content1( $atts, $content = null ) {
    $val =<<<EOS
       <div class="content1">{$content}</div>
EOS;
    return $val;
}
add_shortcode('content1', 'sun');

↑こんなかんじで作ると、

[content1]content1のクラスを持ったdivに囲まれてしまった。[/content1]

content1のクラスを持ったdivタグで囲うことができます。

自己完結型ショートコードに続き囲み型ショートコードの自作方法も紹介してみましたが、
…ショートコードって、便利。ですね。

囲み型ショートコードも応用していけば色々な場面で活躍してくれそうです。

WordPressのショートコードを自作したい!【vol.1】【めもめも】

どうも。すんです。

今回は、WordPressのショートコードの自作方法について!

まず、WordPressで使うショートコードとは。

投稿記事内や特定のテンプレートファイルにて、
テキストやhtml、自作のプログラムなどを挿入することができるものです。

上手く使うと、とっても便利なものです。
作業効率も、ぐーーーーんとアップする!かもしれません。

ではさっそく、ショートコードの自作方法!について

「function.php」に書き込む!

簡単に書くと、こういった感じで記述していきます。

function 関数名() {
    $str =<<<EOS
        表示したい文字列や画像、htmlタグなどなど。をここに記述します
EOS;
    return $str;
}
add_shortcode('ショートコード名', '関数名');

例えば、

function sun() {
    $str =<<<EOS
        酒は飲んでも飲まれるな。
EOS;
    return $str;
}
add_shortcode('test', 'sun');

といった形でfunction.phpに記述した場合、
[test]というショートコードを記事内に書けば

酒は飲んでも飲まれるな。

と、ショートコードを書いた場所に表示されます。

テンプレートファイルに記述する場合は

<?php
echo do_shortcode('[test]');
 ?>

↑こんな感じです。

今回は簡単な文字列が呼び出せるショートコードを例としてあげましたが

たとえば特定の記事を呼び出したりだとか、ブログのタイトルを呼び出したりだとか。
もっと実用的なショートコードをつくることももちろん!可能です。

これはまた次の機会に。

今回めもしたのは、
「自己完結型ショートコード」の自作方法について。

自己完結型ショートコードとは、

[ショートコード名]

↑のようにショートコードひとつ記述するだけで終わり!
っていうもののことをいうみたいです。

その他に、
「囲み型ショートコード」というものもあり、

[ショートコード名]囲まれてしまった。[/ショートコード名]

↑のようなものです。

囲み型ショートコードの自作方法についても、またの機会に
めもしたいと思います。

WordPressでjQueryが動かない場合【めもめも】

どうも。すんです。
今回はWordPressを使う方なら誰でも一度はぶつかるであろう壁、
…というのは少し盛りましたぶつからない方もいらっしゃいますよねもちろん。(弱気)

え、うそ、jQuery動かないんだけど…

という大大大問題の解決方法について、
メモ程度に記しておきたいと思います。

WordPressにjQueryを埋め込む際、
まあ、普通にjsをリンクさせて、コードを埋め込みますよね?

jsファイルをリンクさせる場合は、header.phpに

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>

こんな感じでリンクさせて、

で、↓のようなコードを埋め込みたいとします。

<script type="text/javascript">
			$(document).ready(function() {
				$('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
</script>

こんなんちょろいちょろい

と、毎回埋め込んで動作を確認するんですが、
7割がた上手く動いてくれません。(私調べ)

普通に動いてくれる場合もたまーーーーーーにあるかもしれませんが、
動かない場合は、こう記述してみてください。

	<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
	</script>

「$」を「jQuery」に変えるだけで、あら不思議。

これで大抵動作するようになります。

なぜ「$」だと動いてくれないかというと、
既存のjQueryファイルには、他のjsライブラリファイルとのコンフリクトを回避する設定
「noConflict:function(X)」が記述されています。
この設定が邪魔をして、「$」では動作しないようになっているようです。

「$」を「jQuery」にしても動かない場合は、
WordPress本体がすでにjQueryを読み込んでくれているのに、
自分で本体を追加で読み込ませてしまっていて動かない〜〜ということもあるので、
確認してみましょう。

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.X.2'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.X.1/jquery.min.js"></script>

新しい本体の後に、古いバージョンのやつ読み込んじゃってるよー、
なんてことも時々あります。

それでも動かないんだけど!!!!という場合は、
……ググりましょう。

こうやってちゃんと書いておけば、
もう同じ失敗は繰り返さないよね!……きっと!!

(私もそろそろ学習します)

超高性能スライダープラグイン【Slider Revolution】

どうも!すんです。

さて、今回はプラグインの紹介です。
超高性能で優秀なスライダープラグイン
【Slider Revolution】について!です。

価格は「$18」。日本円でだいたい2,100円ちょっと。(2014年11月20日現在)
販売元は「codecanyon」です。

購入について。↓
image1
http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380?ref=wdlny

まずは上記URLにアクセス!販売元のページに飛びます。
そして「Purchase(購入)」をクリック!

…そうなんです。もうすでにお気づきだとは思いますが販売元のサイト。全部英語で書かれています。

ということで購入に関しては…
「Google翻訳」に助けてもらってください。(他人任せ)

私は!このプラグインの凄さと使い方について!だけ!ここに記していきたいと思います。

では、機能面の特徴についてまずはざっくりと。

1.レスポンシブ対応のスライダーです!
2.アニメーションの種類がたくさん!
3.直感的な操作で制作可能!スライダーの制作が超簡単!
4.CSSで、スライダーごとに文字や画像の装飾が可能!

めちゃくちゃざっくり、ピックアップして書き出してみましたがどうでしょう。
とりあえず、超簡単に超高性能なスライダーがつくれる超すごいプラグイン!!!
だということはお分かりいただけたかと思います。

確実に価格以上の仕事をしてくれるプラグインだと、実際に使ってみて私は思いました。

Slider Revolutionの設定画面はこちら!↓
image2

主に使うのはこれ!
「Create New Slider」…新しいスライダーを作成します。何個でも作れますよ!
「Setting」…スライダー全体の設定を行います。
「Edit Slides」…スライダーの中の1枚1枚の画像の追加や編集を行います。

もちろんここも英語。です。

ですがみなさん安心してください!このスライダー、だいたい初期設定のままで
全然問題なく、高機能なスライダーが制作できます。

…私にも作れたので、大丈夫ですよ皆さん。

【1.レスポンシブ対応のスライダーです!】

ここからは機能面の特徴について詳しく!使い方含め紹介していきます。

レスポンシブ対応のスライダー。これはかなり嬉しい機能ですね。
最近はサイトを作る上でもうレスポンシブは必須!!そんな時代です。

では、スライダーを作成してみましょう。
「Create New Slider」をクリック!

image4

まず、スライダーの名前をつけます。
今回は「slider2」とつけて作成してみましょう。

「Slider Title」に「slider2」と入力。その下の
「Slider Alias」にも同じように「slider2」と入力します。

そしてそして「Slider Layout」部分。
はじめから「Auto Responsive」にチェックが入っていますね!!!
オートレスポンシブ。初期設定のまま、いじらずにレスポンシブ対応のスライダーになっちゃうんです。

なので、スライダーの名前をつけるだけ。

名前を付けたら、画面下部の「Create Slider」をクリック!
これでレスポンシブ対応のスライダーの土台が完成しました。

【2.アニメーションの種類がたくさん!】

次は、スライダーの編集をしていきましょう。
スライドさせる画像の設定、アニメーションの設定、文字の装飾を行います。

image5

↑作ったスライダー「slider2」の「Edit Slides」をクリックします。

image6

↑すると、このような画面が。
まだスライダーの中身のスライドが一つもない状態なので、
「New Slide」 をクリックし、新しいスライドを作っていきます。

「New Slide」をクリックするとファイルのアップロード画面に飛ぶので、
スライドさせたい画像を選択し、アップロードしてください。

image7

↑アップロードが完了すると、このようにスライドが生成されます。
複数スライドを作りたい方は、同じ要領でスライドを追加してください。

では、スライドの編集にうつります。「Edit Slide」をクリックします。

image8

な、な、長い…
英語だらけの、というか英語しかない恐ろしいページが現れましたね…

ですが、ここもほとんど初期設定のままで大丈夫!!!いじるところは少しだけです。

アニメーションの設定。やっちゃいましょう!!!

image9

なんと53種類のアニメーションが…!!(数えました)(間違ってたらごめんなさい)
3Dのアニメーションもあるので、皆さん色々試してみてはいかがでしょうか。

ちなみに私のおすすめは、「Random Flat and Premium」です。
色々なアニメーションがランダムで表示されるので、面白いですよー!!!

ちなみにそんなアニメーションがいっぱいのSlider Revolutionのスライダーのデモは、
こちらで見る事が出来ます!(http://themepunch.com/revolution/)

【3.直感的な操作で制作可能!スライダーの制作が超簡単!】

これだけでも、もう十分高性能で超すごいスライダーができてしまうんですが、
スライドに文字とか、載せたいですよね?
さらにはその文字もアニメーションで動かしちゃったりしたいですよね?

ということで次は、
スライドに文字や画像、載せてみましょう。動かしてみましょう。

先ほどのながーーーーい英語だらけの画面の、だいたい中央部分。

image10

このあたりをいじっていきます。

まずは、「Background Position」部分。
この設定は、先ほど設定したスライドの画像の、どの部分を基準にするかという設定です。

「center center」に設定しておくと、画像の中央部分が基準になるので
基本的には「center center」にしておけば間違いないと思います。

そしてそして、

「Add Layer」…スライドにレイヤーを追加します。(文字をのせたい場合はこれ!)
「Add Layer:Image」…画像をのせたい場合はこれ!
「Add Layer:Video」…動画を載せたい場合はこれ!

いやー、動画もスライドに組み込めちゃうんですね…すごい。

今回は、文字について詳しく説明していきます。

「Add Layer」をクリックしてみましょう。

image11

「Caption Text1」という文字が現れました!

この出てきた文字を、のせたい文字に変更してみましょう。
「Slider Revolution」に変更してみます。

そして、「style」部分。ここでは文字のスタイルを変更できます。
このスタイルも種類が豊富!!!ドロップシャドウがついているものや、背景がついているものなど。
もちろん、この「style」の中で自分で色やサイズ、フォントの種類を変えることもできますよー!

今回は、私の独断と偏見で「large_bg_black」を選んでみます!

image12

↑こんな感じになります!

「Align,Position&Styling」部分で、レイヤーの位置を調節することができます。
Offset Xを0に、Offset Yを0にすると、画面中央に配置する事が出来ます。

しかも!!!
このスライダー、配置した文字をドラック&ドロップで、好きな位置に動かす事も
できちゃうんです!!!

直感的な操作で、自由に配置できてしまいます。
なんなんだこのスライダー…凄すぎる…

次は文字のアニメーション!!
これ、初期画面では設定場所が隠れちゃってるんです。

「Layer Animation」、探してクリックしてみてください。
クリックすると、設定場所が表示されます。

image13
↑こんなかんじ!
出てきた時のアニメーションの設定項目で、ここ設定すれば大丈夫!!という項目
「Start Animation」…アニメーションを選んでください。(いっぱいあります)
「Start Easing」…イージングも選べちゃいます。(見本がでてきますよ)
「Start Duration」…アニメーションに使う時間を設定できます。

消える時のアニメーションの設定項目で、ここ設定すれば大丈夫!!という項目
「End Animation」…アニメーションを選んでください。(いっぱいあります)
「End Easing」…イージングも選べちゃいます。(見本がでてきますよ)
「End Duration」…アニメーションに使う時間を設定できます。

アニメーションもイージングも、色々種類があるので
色々試してみると面白いですよー!!

ここまで設定が終わったら、皆さん!忘れずに画面下部の
「Update Slide」押してくださいね!!保存です保存!!

image14

保存しないまま別の画面に移動してしまわないように!!
(私は2、3回やりました)

【4.CSSで、スライダーごとに文字や画像の装飾が可能!】

さて、最後の項目です。
これは少し上級者向け、かもしれません。

レイヤーを追加して文字をスライドにのせ、
スタイルも画面上で変更する事ができましたが、

「スタイルの中に自分好みのやつ、ないんだけど」
「もっと自分が好きなようにしたい!!!」

という方は、この方法をお試しください!!

image15

まず、「Setting」をクリック。

image16

ページのいっちばん下!
「CSS / JavaScript」をクリックすると…

image17

このように、CSSとJavaScriptの追加が可能になります!

スライダーに追加したレイヤー(文字や画像)のclassをうまく利用して、
CSSでカスタマイズしてみてください!

実際にスライダーをWordPressサイトに貼りたいときは、
ショートコードをページに貼るだけ!!!

例えば、今回はスライダーの名前を「slider2」にしましたね。
その場合はショートコードは[slider2]になります。

いかかでしたか?
誤字脱字等、ありましたらぜひ見逃してくださいm(_ _)m

今回紹介したSlider Revolution。
まだまだすばらしい機能が沢山あります。

xmlでインポート / エクスポートできたり、

プラグインのフォルダの「documentation」フォルダの中に
HTML 形式のマニュアル(全て英語)が入っていたり、

先ほどもちょこっとだけ紹介しましたが、スライドに動画を埋め込めたりなどなど。

使いながら「これはやばい…!!!」
っていう機能を見つけたら、また記事にしたいと思います。