「WordPressサイト制作を簡単にする国産サイトビルダー weluka:ウェルカ」テクニカルブログ

リストウィジェット レスポンシブでのカラム設定

配置したリストウィジェット(新規投稿ウィジェット)を

PC・タブレット・スマートフォンで見る時に表示されるカラム数を、それぞれ指定したカラム数に設定できます。

今回は例として「PC表示・4カラム」「タブレット表示・2カラム」「スマートフォン表示・2カラム」に設定します。

①ウィジェットの中からリストを選択し、ドラック&ドロップで配置します。

編集の中の、一般設定にあるList Layoutを、今回は全てMedia Top「PC表示・4カラム」「タブレット表示・2カラム」「スマートフォン表示・2カラム」に設定します。

Row Column4columnResponsiveSmall View(768px - 991px)XSmall View(768px未満)2columnに設定します。

※レスポンシブのレイアウトとカラム数は必ず設定して下さい。この設定を忘れるとレスポンシブのカラム数が有効になりません。

List Itemの中から、今回は仮にリストを8つ作成します。

⑤最後に保存を押して設定画面を閉じます。

実際の見え方

PC時は4カラム表示される。

タブレット・スマートフォン時は2カラム表示される。

※最新記事ウィジェットも同じ方法で設定できます。