ナマケモノSWELLでお知らせページみたいなのが作りたい！
どうも、ダルメです。
SWELLは簡単にサイトをカスタマイズできます。記事をノーコードで書くことができ、トップページをサイト型にするのも簡単です。
ダルメ投稿リストとかも簡単に編集できます。
今回は、SWELLでトップページにお知らせ記事リストを作成、設置する方法を解説します！
お知らせページがあれば、サイトに何度も訪れるユーザーに変更点などをわかりやすく伝えることができます。
ダルメSWELLではお知らせページの設置も簡単にでき、助かっています。
完成イメージ
ダルメ公式サイトとかによくありそうなやつを目指します！
- お知らせ記事リストは「投稿リスト」で作成できる
- キャプションブロックの中に入れるとオシャレ
- テキスト型にするとサイトっぽくなる
お知らせページはSWELLを使い初めの初心者でも簡単にできます。参考に是非この記事を読んでみてください！
ダルメでは解説していきます。
SWELLでお知らせページを作成する方法
ナマケモノメディアの公式サイトみたいなお知らせページが作りたい！！
ダルメ「SWELL」なら3分もかからずにお知らせページができちゃうのです！
SWELLは「投稿リストブロック」という機能があり、指定の条件の記事を指定した数だけ表示が可能です。
ダルメお知らせリストはこの機能を利用します。
- お知らせ用カテゴリを作る
- トップページに投稿リストをいれる
- お知らせページをカスタマイズする
ダルメ順に解説します。
お知らせ用カテゴリをつくる
ナマケモノお知らせページにカテゴリが必要なの？
ダルメお知らせ記事をまとめるため、カテゴリで統一します。
お知らせページを作成するため、まずは「お知らせ」というカテゴリを作成しましょう。
お知らせカテゴリの作成方法
ダルメ既にわかる人は次に行きましょう。
【投稿】⇒【カテゴリ】でクリック
ワードプレスのダッシュボードから【投稿】⇒【カテゴリ】の順でクリックします。
【名前】「お知らせ」と入力⇒【追加】
カテゴリーにアクセスできたら、【名前】に「お知らせ」と入力します。
各項目、自分がわかるように入力したら【新規カテゴリーを追加】をクリックで完了です。
ダルメこれで準備が整いました。
トップページにお知らせリストを作成する
SWELLのトップページで設置したい位置にお知らせ記事リストを設置します。
ダルメSWELLの「投稿リスト」を使って作成します。
お知らせ記事リストの作成方法
【ブロック】⇒【投稿リスト】をクリック
【SWELLブロック】にある【投稿リスト】を選びます。
【ブロック】⇒【Setting】を選択します。
右側ブロック設定にある【Setting】を選択します。
【表示設定】⇒【テキスト型】へ
【表示設定】⇒【レイアウトを選択】⇒【テキスト型】を選択します。
画像を参考に選択
- 投稿の表示順序⇒新着順
- 最大カラム（PC、SP共）⇒1列
- 抜粋文の文字数（PC,SP共）⇒1列
【ブロック】⇒【Pickup】を選択
【ブロック設定】から【Pickup】を選択します。
【カテゴリー】⇒お知らせを選びます。
【カテゴリー】にあるお知らせを選択します。
画像を見ながら選択します。
- 公開日を表示⇒ON
- 更新日を表示⇒ON
こうしておくとユーザーに最終更新日が伝わりやすくなります。
ダルメ投稿リストはこれでOKです。
上記の手順でよく見る形のお知らせリストが出来上がると思います。
完成イメージ
こちらにタイトルやキャプションで「お知らせ」といれます。
ダルメこれだけで「お知らせ記事リスト」は完成です
お知らせ記事リストの例
SWELLでのお知らせ記事リストの作成例とキャプションブロックを解説します。
ダルメイメージが浮かばなければ以下を真似しましょう。
キャプション付きブロックの例
ナマケモノキャプション付きブロックは以下3つが見やすくてオススメ！
- 浮き出し
- 内テキスト
- 枠上２
ダルメ下記でイメージを確認できます。
キャプション付きブロック（浮き出し）
キャプション付きブロック（内テキスト）
キャプション付きブロック（枠上２）
ダルメ投稿リストとグループ化だけで済むので簡単にできます。
キャプション付きブロックを使うと手軽にきれいな装飾ができます。
ショートコードを利用する例
SWELLで搭載されているショートコードを使用した例を解説します。
メガフォンアイコン
[icon class="icon-megaphone"] お知らせ上記のショートコードを入れるとメガフォンが表示されます。
ナマケモノ周りと被らなさそうでいいね！
SWELLアイコン
[icon class="icon-swell"] お知らせインフォメーションアイコン
[icon class="icon-info"] お知らせ画像の下にあるコードをコピペでそのまま利用できます！
まとめ：お知らせ記事リストを作ってみよう！
今回はSWELLでのお知らせ記事リストの作り方について解説しました。
お知らせがあるとブログの進捗や変更点をユーザーに伝えることができます。
ナマケモノ自分のブログを興味ある人が読んでくれるしね！
ダルメ見た目も、よりサイト感がでていい感じになります(笑)
自分の更新時のメモ代わりにも利用できそうです。
せっかくSWELLでブログをしているなら、これを機にお知らせ記事リストについて考えてみてはいかがでしょうか。
では。
お気軽にコメントください！