No Codes / No Templates / The Idea is.

WordPress(ワードプレス) ドラッグ&ドロップ ホームページビルダー

スライド設定

「weluka スライドウィジェット」ではスライド画像の配置・表示設定を行うことができます。

「ドラッグウィジェットメニュー」の「画像アイコン」クリック ⇒ 「スライド」をドラッグ&ドロップで配置します。

配置された「スライドウィジェット」をクリックし表示される水色枠の「編集」をクリックすることで、「スライド設定画面」が表示されます。

一般設定

スライド画像のエフェクト等、基本的な設定を行います。スライド画像はWordPressメディアにアップロードされた画像が設定可能となります。

「Image Size」

スライド画像のサイズを選択します。

選択できるサイズは、Full Size(オリジナルサイズ)/Thumbnail Size(サムネイルサイズ)/Medium Size(WordPress 中サイズ)/Large Size(大サイズ)となります。各サイズはWordPressメディア設定のサイズに準じます。(アップロード画像のサイズにより選択できないサイズもあります。)

「スライド設定」

スライドエフェクトを選択します。

選択できるエフェクトは、fade(画像フェードインアウト)/slide horizontal(画像横スクロール)となります。

「スライドショー自動開始」
スライドを自動再生したい場合、チェックします。
「スライドショー繰り返し再生」
スライド再生を繰り返したい場合、チェックします。
「スライドショー切替時間 (msec)」

1枚のスライドを表示する時間をミリセカンド秒で設定します。

例)7秒表示にしたい場合、7000と入力します。

「Animation Speed (msec).」

スライドアニメーション(スライドが切り替わる際のエフェクト)時間をミリセカンド秒で設定します。

<例)フェードインアウトを1秒かけて切替えたい場合、1000と入力します。

「コントロールナビゲーション表示」
画像左右に切替用の矢印ナビゲーションを表示したい場合、チェックします。
「ページングナビゲーション表示」
スライド下に画像切替用のナビゲーションを表示したい場合、チェックします。
「コントロールナビゲーションカラー」
コントロールナビゲーションの矢印色を設定します。クリックすると「カラーピッカー」が表示されます。
「ページングナビゲーションカラー」
ページングナビゲーションのアイコン色を設定します。クリックすると「カラーピッカー」が表示されます。

スライド設定

スライド画像の追加・削除、説明ブロックの表示設定を行います。

「画像選択」ボタン
クリックすると「WordPress メディアアップロード・選択画面」が表示されます。スライド表示したい画像のアップロード・選択します。
「画像表示」エリア

追加された画像がサムネイル表示されます。クリックすると選択された画像の説明など編集が行えます。

サムネイル右上にある「×」をクリックすると画像の削除ができます。

サムネイルをドラッグ&ドロップでスライド画像の表示順を変更することができます。

スライド説明 設定項目

「スライドリンクURL」
スライド画像をクリックした際にリンクを設定したい場合、リンクURLを設定します。
「リンクを新しいウインドウまたは新しいタブで開きます」
リンクURLを設定した場合、リンク先URLを別タブで開く場合はチェックします。
「リンク選択」ボタン
クリックすると「WordPress公開ページ・投稿選択画面」が表示されます。リンク先に設定したいページ・投稿を選択します。
「スライド上に説明を表示する」
スライド上に説明を表示したい場合、チェックしてください。
「ヴィジュアルエディタ」
説明を入力します。
「説明表示位置」

説明の表示位置を選択します。

選択できる位置は画面向かって画像内、Top/Bottom/Left/Rightとなります。

「説明背景色」
説明(コンテンツラッパー)の背景色を設定します。クリックすると「カラーピッカー」が表示されます。何も設定しない場合、画像の上にそのまま説明が表示されます。
「説明テキスト色」
説明の文字色を設定します。クリックすると「カラーピッカー」が表示されます。
「説明コンテナー Padding (px)」

説明(コンテンツラッパー)のパディング(上下左右)を設定します。単位はピクセルとなります。

例)上下左右に30pxのパディングを設定したい場合、「Top」「Bottom」「Left」「Right」に30と入力します。

「テキストシャドウ」

説明テキストのシャドウパターンを選択します。

選択できるパターンは、Basic(標準的なシャドウ)/Hard(強めのシャドウ)/Vintage(ヴィンテージ風シャドウ)となります。

「シャドウカラー」
説明テキストのシャドウ色を設定します。クリックすると「カラーピッカー」が表示されます。
「登録」ボタン
クリックすると編集内容を登録します。

高度な設定

スライドコンテンツラッパー(スライドコンテンツの外側)の余白、枠線(ボーダー)、css class名等の設定を行います。

「背景色」

スライドコンテンツラッパーの背景色を設定します。クリックすると「カラーピッカー」が表示されます。

スライド画像が透過画像の場合に背景色を設定したい際に使用します。

「テキスト色」

スライド説明のテキスト色を設定します。クリックすると「カラーピッカー」が表示されます。

説明のテキスト色を一括で設定したい際に使用します。

「表示形式」
スライドの表示形式を選択します。角丸(スライド外枠が角丸)/四角(スライド外枠が四角)から選択してください。
「Border Size(px)」

スライドコンテンツラッパーに枠線を表示したい場合、枠線サイズを設定します。単位はピクセルとなります。

例)2pxの枠線を設定したい場合、2と入力します。

「Border Style」

スライドコンテンツラッパーに枠線を表示したい場合、枠線スタイル(css)を選択します。

例)実線を設定したい場合、solidを選択します。

「枠線色」
スライドコンテンツラッパーに枠線を表示したい場合、枠線色を設定します。クリックすると「カラーピッカー」が表示されます。
「Margin(px)」

スライドコンテンツラッパーのマージン(上下左右)を設定します。単位はピクセルとなります。

例)TOP(上)に30pxのマージンを設定したい場合、「Top」に30と入力します。

「Padding(px)」

スライドコンテンツラッパーのパディング(上下左右)を設定します。単位はピクセルとなります。

例)TOP(上)に30pxのパディングを設定したい場合、「Top」に30と入力します。

「Css Selectors Class」

スライドコンテンツラッパーのcss class名を設定します。

Custom Cssに設定することで表示のカスタマイズが行えます。Custom Cssについては「welukaテーマ設定」を参照ください。

例)mainslideというclass名を指定したい場合、mainslideと入力します。複数のclassを設定する場合は半角スペースで区切ってください。

Custom Css 設定例

.mainslide img { min-width: 320px; }

設定画面終了

「保存」ボタン
画面を閉じる。設定内容をビルダー上に反映します。
「閉じる」ボタン
画面を閉じる。設定内容をビルダー上に反映しません。