No Codes / No Templates / The Idea is.

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

画像設定

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

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

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

一般設定

「画像元」

画像元を選択します。

選択できるソースは、WPメディアライブラリ(WordPressメディア)/外部サイトとなります。

ソース選択値により、WPメディアライブラリ用設定項目、外部サイト用設定項目が表示されます。

「media」ボタン
クリックすると「WordPress メディアアップロード・選択画面」が表示されます。表示したい画像のアップロード・選択します。「画像元」にWPメディアライブラリが選択されている場合に表示されます。
「Image Size」

表示したい画像サイズを選択します。「画像元」にWPメディアライブラリが選択されている場合かつ画像が選択された際に表示されます。

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

「URL」
外部サイトの画像URLを設定します。「画像元」に外部サイトが選択されている場合に表示されます。
「ブロック内でフル幅表示します」
画像を配置したカラムブロック内幅いっぱいに拡大表示したい場合、チェックします。
「表示位置」

画像のカラムブロック内での表示位置を選択します。

選択できる位置は、Left(左寄せ)/Center(中央寄せ)/Right(右寄せ)となります。

「表示形式」

画像の表示形式を選択します。

選択できる形式は、四角/角丸/円/サムネイル(枠線付き)となります。

「リンク」

画像クリック時の動作を設定します。

選択できる動作は、none(何もしない)/Url(指定URLへリンク)/Zoom(ライトボックス形式で画像を拡大表示)となります。

「リンクURL」
画像をクリックした際のリンクURLを設定します。「リンク」にUrlが選択されている場合に表示されます。
「リンクを新しいウインドウまたは新しいタブで開きます」
リンクURLを設定した場合、リンク先URLを別タブで開く場合はチェックします。「リンク」にUrlが選択されている場合に表示されます。
「リンク選択」ボタン
クリックすると「WordPress公開ページ・投稿選択画面」が表示されます。リンク先に設定したいページ・投稿を選択します。「リンク」にUrlが選択されている場合に表示されます。

高度な設定

画像コンテンツラッパー(画像コンテンツの外側)の余白、画像(imgタグ)の枠線(ボーダー)、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テーマ設定」を参照ください。

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

Custom Css 設定例

.imglink:hover, .imglink:focus { filter: alpha(opacity=50); opacity: .5; }

設定画面終了

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