No Codes / No Templates / The Idea is.

WordPress(ワードプレス) ドラッグ&ドロップ Webサイトビルダー

最新投稿設定

「weluka 最新記事ウィジェット」では「WordPress 最新投稿」の埋め込み、デザイン等に関する設定を行うことができます。

※「weluka 最新記事ウィジェット」は「投稿ページ」内では埋め込むことはできません。

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

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

一般設定

WordPress 最新投稿一覧表示内容に関する設定を行います。

「タイトル」
最新投稿一覧のタイトルを入力してください。空白の場合は表示されません。
「含めたいカテゴリー」
登録されている投稿カテゴリーから選択できます。表示したい「投稿カテゴリー」を選択してください。何も選択なしの場合、すべての投稿が対象となります。
「表示項目」

一覧の投稿ブロックに表示する項目を選択します。

選択できる項目は、タイトル(投稿タイトル)/日時(投稿日時)/投稿者(投稿ユーザー名)/カテゴリー(設定カテゴリー名)/コメント数/サムネイル(投稿のアイキャッチ画像)/抜粋(投稿抜粋)/タグクラウド(設定タグクラウド)となります。

「記事関連タグ表示位置」

投稿に設定されているタグクラウドの一覧投稿ブロック内での表示位置を選択します。本項目は「表示項目」で「タグクラウド」がチェックされている場合に反映されます。

選択できる表示位置は、メタ下部(日時、カテゴリー名などの下)/コンテンツ下部(抜粋の下)/両方となります。

「抜粋文字数」
抜粋に表示したい文字数を半角数字で設定します。
「MOREリンクテキスト」
「もっと見る」等のリンクボタンを表示したい場合、ボタンテキストを設定します。空白の場合は「MOREリンク」ボタンは表示されません。
「Allリンク URL」
一覧最下部に「全て見る」等のリンクボタンを表示したい場合、リンク先URLを設定します。空白の場合は「ALLリンク」ボタンは表示されません。
「Allリンク テキスト」
一覧最下部に「全て見る」等のリンクボタンを表示したい場合、ボタンテキストを設定します。空白の場合は「ALLリンク」ボタンは表示されません。
「投稿数」
表示したい投稿数を半角数字で設定します。
「Height (px)」
投稿一覧全体の高さを固定したい場合、半角数字で設定します。単位はピクセルとなります。高さを超えた場合はスクロールバーが表示されます。例)高さを500pxにしたい場合、500と入力します。

List Style 設定

一覧デザインに関する設定を行います。

「List Layout」

一覧レイアウトを選択します。

Media Left

medialeft(最新記事)

[Media Leftイメージ]
Media Right mediaright(最新記事)
[Media Rightイメージ]
Media Top mediatop(最新記事)
[Media Topイメージ]
Media Middle mediamiddle(最新記事)
[Media Middleイメージ]
Media Bottom mediabottom(最新記事)
[Media Bottomイメージ]
「Row Column」

「List Layout」でMedia Top/Media Middle/Media Bottomを選択した場合、1行内に表示する投稿数(カラム数)を選択します。

選択できるカラム数は、1 column(1カラム)/2 column(2カラム)/3 column(3カラム)/4 column(4カラム)/6 column(6カラム)となります。

例)1行内を投稿を3件表示したい場合、3 columnを選択します。

「Row spacing (px)」
一覧の行間スペースを設定します。単位はピクセルとなります。例)行間を30pxにしたい場合、30と入力します。行間をなしにする場合は0と入力します。
「奇数行背景色」
一覧の奇数行の背景色を設定します。クリックすると「カラーピッカー」が表示されます。
「偶数行背景色」
一覧の偶数行の背景色を設定します。クリックすると「カラーピッカー」が表示されます。

Custom Design(カスタムデザイン)機能

設定した「List Style」を後で利用できるようにテンプレート登録する機能です。

「Custom Designs」
登録されたテンプレート名より選択できます。選択すると登録テンプレート設定値が「List Style」設定項目に設定されます。
「Custom Design Name」
登録するテンプレート名を入力します。
「登録」ボタン
入力されたテンプレート名でテンプレート登録します。
「削除」ボタン
「Custom Designs」で選択されているテンプレートを削除します。

画像設定項目

「Colum Width」

「List Layput」でMedia Left/Media Rightを選択した場合、画像の表示幅(カラム数)を選択します。

選択できるカラム数は、1 ~ 8 columnとなります。画像とテキスト合わせて最大12カラムを基準に設定してください。

「表示位置」

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

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

「表示形式」
画像の表示形式を選択します。選択できる形式は、四角/角丸/円/サムネイル(枠線付き)となります。
「Border Size(px)」

画像に枠線を表示したい場合、枠線サイズを設定します。単位はピクセルとなります。

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

「Border Style」

画像に枠線を表示したい場合、枠線スタイル(css)を選択します。

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

「枠線色」
画像に枠線を表示したい場合、枠線色を設定します。クリックすると「カラーピッカー」が表示されます。

タイトル設定項目

「Title html tag」

投稿タイトルのHTMLタグを選択します。

選択できるHTMLタグは、H1 ~ H6タグ/Pタグ/DIVタグとなります。

「Style」
投稿タイトルのスタイルを設定します。太字(Bold)/下線(Underline)/イタリック体(Italic)
「表示位置」
投稿タイトルの表示位置を選択します。Left(左寄せ)/Center(中央寄せ)/Right(右寄せ)から選択してください。
「Font」
投稿タイトルのフォントを選択します。
「Font Size(px)」
投稿タイトルのフォントサイズを入力します。単位はピクセルとなります。例)18pxにしたい場合、18と入力します。
「タイトル色」
投稿タイトルの文字色を設定します。クリックすると「カラーピッカー」が表示されます。

投稿メタ情報(日時、カテゴリー名、投稿者名)の共通設定項目

「表示位置」
投稿メタ情報の表示位置を選択します。Left(左寄せ)/Center(中央寄せ)/Right(右寄せ)から選択してください。

投稿日時設定項目

「Style」
投稿日時のスタイルを設定します。太字(Bold)/下線(Underline)/イタリック体(Italic)
「date format (Ex Y-m-d h:i)」

投稿日時の表示形式を設定します。例)2016/01/20 10:00 のように表示したい場合、Y/m/d h:iと入力してください。

date formatについてはPHP date関数を参照してください。

「Font」
投稿日時のフォントを選択します。
「Font Size(px)」
投稿日時のフォントサイズを入力します。単位はピクセルとなります。例)18pxにしたい場合、18と入力します。
「色」
投稿日時の文字色を設定します。クリックすると「カラーピッカー」が表示されます。

カテゴリー名設定項目

「Style」
カテゴリー名のスタイルを設定します。太字(Bold)/下線(Underline)/イタリック体(Italic)
「Font」
カテゴリー名のフォントを選択します。
「Font Size(px)」
カテゴリー名のフォントサイズを入力します。単位はピクセルとなります。例)18pxにしたい場合、18と入力します。
「色」
カテゴリー名の文字色を設定します。クリックすると「カラーピッカー」が表示されます。

投稿者名設定項目

「Style」
投稿者名のスタイルを設定します。太字(Bold)/下線(Underline)/イタリック体(Italic)
「Font」
投稿者名のフォントを選択します。
「Font Size(px)」
投稿者名のフォントサイズを入力します。単位はピクセルとなります。例)18pxにしたい場合、18と入力します。
「色」
投稿者名の文字色を設定します。クリックすると「カラーピッカー」が表示されます。

抜粋設定項目

「表示位置」
投稿抜粋の表示位置を選択します。Left(左寄せ)/Center(中央寄せ)/Right(右寄せ)から選択してください。
「Font」
投稿抜粋のフォントを選択します。
「Font Size(px)」
投稿抜粋のフォントサイズを入力します。単位はピクセルとなります。例)18pxにしたい場合、18と入力します。
「コンテンツ色」
投稿抜粋の文字色を設定します。クリックすると「カラーピッカー」が表示されます。

MOREリンクボタン設定項目

「表示位置」
MOREリンクボタンの表示位置を選択します。Left(左寄せ)/Center(中央寄せ)/Right(右寄せ)から選択してください。
「Font」
MOREリンクボタンテキストのフォントを選択します。
「Button Color」

ボタンカラーを選択します。

選択できるカラーは、白(White)/薄グレー(Grey)/濃グレー(Dark Grey)/黒(Black)/青(Primary)/緑(Success)/水色(Info)/橙(Warning)/赤(Danger)/リンクテキストのみ(none)となります。

青(Primary)/緑(Success)/水色(Info)/橙(Warning)/赤(Danger)は「welukaカラーテーマ設定」よりカラー変更が可能です。

「表示形式」
ボタンの表示形式を選択します。角丸/四角から選択してください。
「Button Size」

ボタンサイズを選択します。

選択できるサイズは、X Small/Small/Medium/Largeとなります。

「ブロックボタン」
ボタンをカラム幅いっぱい表示したい場合、チェックします。

ALLリンクボタン設定項目

「表示位置」
ALLリンクボタンの表示位置を選択します。Left(左寄せ)/Center(中央寄せ)/Right(右寄せ)から選択してください。
「Font」
ALLリンクボタンテキストのフォントを選択します。
「Button Color」

ボタンカラーを選択します。

選択できるカラーは、白(White)/薄グレー(Grey)/濃グレー(Dark Grey)/黒(Black)/青(Primary)/緑(Success)/水色(Info)/橙(Warning)/赤(Danger)/リンクテキストのみ(none)となります。

青(Primary)/緑(Success)/水色(Info)/橙(Warning)/赤(Danger)は「welukaカラーテーマ設定」よりカラー変更が可能です。

「表示形式」
ボタンの表示形式を選択します。角丸/四角から選択してください。
「Button Size」

ボタンサイズを選択します。

選択できるサイズは、X Small/Small/Medium/Largeとなります。

「ブロックボタン」
ボタンをカラム幅いっぱい表示したい場合、チェックします。

高度な設定

最新投稿コンテンツラッパー(一覧コンテンツの外側)の余白、css class名の設定を行います。

「Margin(px)」

最新投稿一覧コンテンツラッパーのマージン(上下左右)を設定します。単位はピクセルとなります。

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

「Padding(px)」

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

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

「Css Selectors Class」

最新投稿コンテンツラッパーのcss class名を設定します。

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

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

Custom Css 設定例

.newposts a { color: #000000 !important; }

設定画面終了

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