wordpress

Smart Sliderのプラグインで画像に網掛け

投稿日:

スマートスライダー

 

スライダー画像に網掛けをする

 

簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思います。

プラグインのインストール方法は今回省略します。

 

網掛けしたい画像を選択

 

画像選択

1.WordPress管理メニューから「Smart Slider」をクリック

2.Smart Sliderの画面(Dashboard)から作成したスライダーをクリック

3.上図のように登録した画像が表示されます。

4.各画像の上にマウスを持っていくと、「EDIT」が表示されるのでクリック

 

選択された画像が表示されます

 

選択画像

 

この状態で、左のメニュー(赤枠の部分)をクリック

 

レイヤー画像を選択

 

画像レイヤー

 

1.レイヤー画像を選択できるように別枠のメニューが表示されます。

2.Imageのところで、画像を選択するか、アップロードします。

今回は、黒っぽい透過された画像にしてみました。

わかりやすく、写真画像と同じサイズの透過された画像(gif形式かpng形式)を用意するといいですね。

 

レイヤー画像の調整

 

レイヤー画像調整

 

あとは、レイヤー画像の位置等を細かく調整することも可能です。

 

上図のように、画像にマウスを持っていくと、左上に「LAYER」が表示され、さらに「LAYER」にマウスを持っていくと、矢印などが表示されます。

その矢印をクリックすることでレイヤー画像の調整も可能です。

 

最初はレイヤー画像の周りに隙間ができていて、少し悩みましたが、上図のPaddingのところを調整することで直りました。

 

 



-wordpress
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた①

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …