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

スクロールボタン

スクロールボタン コピペでできる

    WordPressでスクロールボタンを設置   php部分 <div class="scroll" href="#first- …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …