悩む人記事一覧リストのレイアウトを変更したけど方法が分からないので教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- リストのレイアウト設定
- 投稿情報の表示設定
- カテゴリーの表示設定
- サムネイル画像の比率設定
- マウスホバー時の設定
例えば、以下のように記事一覧リストをレイアウトできるようになります。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
SWELLの記事一覧リストをカスタマイズする方法
記事一覧リストのカスタマイズ画面へ移動
管理バーから、「カスタマイズ」を選択します。
サイドバーから、「記事一覧リスト」を選択します。
サイドバーに記事一覧リストのカスタマイズ画面が表示されました。
リストのレイアウト設定
リストレイアウト
以下は、PC/Tabの例ですが、SPの設定を行うこともできます。※ デフォルトはカード型
以下からレイアウトを確認できます。
※ デフォルト
最大カラム数
以下は、PC/Tabの例ですが、SPの設定を行うこともできます。※ デフォルトは3カラム
カード型・サムネイル型でのみ有効です。
「READ MORE」のテキスト
以下は、テキストを「READ MORE」から「続きを読む」へと変更しています。
ブログ型・リスト型（左右交互）で表示される「READ MORE」の表示を変更できます。
投稿情報の表示設定
タイトルを隠す
「タイトルを隠す」にチェックを入れるとタイトルが非表示になります。
「サムネイル型」のリストにのみ有効です。
公開日・更新日・著者
表示・非表示を選択できます。
抜粋文の文字数
以下は、PC/Tabの例ですが、SPの設定を行うこともできます。
- 非表示 ※ SPのデフォルト
- 40字
- 80字
- 120字 ※ PC/Tabのデフォルト
- 160字
- 240字
- 320字
カテゴリーの表示設定
以下の設定が行えます。
カテゴリー表示位置
- 表示しない
- サムネイル画像の上に表示 ※ デフォルト
- 投稿日時の横に表示
サムネイル画像上に表示される時の追加設定
- カテゴリーの文字色
- カテゴリーの背景色
- カテゴリーの背景効果（なし/ストライプ/グラデーション）※ デフォルトはストライプ
親カテゴリーの表示優先度
- 指定しない
- 親カテゴリーを優先的に表示
- 子カテゴリーを優先的に表示 ※ デフォルト
カテゴリーアーカイブでの表示設定
- 指定しない
- 該当カテゴリーを含んでいれば優先的に表示 ※ デフォルト
- 該当カテゴリーを強制的に表示
サムネイル画像の比率設定
以下の画像比率を設定できます。
- カード型リストでの画像比率 ※ デフォルト：ワイド（16:9）
- リスト型リストでの画像比率 ※ デフォルト：黄金比率（1.618:1）
- サムネイル型リストでの画像比率 ※ デフォルト：黄金比率（1.618:1）
- ブログ型での画像比率 ※ デフォルト：ワイド（16:9）
- ブログカードでの画像比率 ※ デフォルト：ワイド（16:9）
画像比率は以下から選択できます。
- 正方形（1:1）
- 黄金比率（1.618:1）
- 白銀比率（1.414:1）
- 一眼（3:2）
- ワイド（16:9）
- OGP（1.91:1）
- 横長（2:1）
- 超横長（5:2）
例：カード型リスト
ワイド（16:9）
正方形（1:1）
例：ブログカード
ワイド（16:9）
正方形（1:1）
こちらの記事でブログカードの設置方法を解説しています。
マウスホバー時の設定
以下のようにグラデーション色を変更することができます。
デフォルト
オリジナル
今回は以上です。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。