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

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

関連記事

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

ワードプレス

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

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …