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

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

関連記事

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

ワードプレス

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

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …