![](https://pen-pocket.com/wp-content/uploads/2022/01/名称未設定のアートワーク-150x150.jpg)
こんにちはペンギンです!
ツイッター@penpockeblog
SWELLでサイト型にした場合、PCとモバイルで表示が変わるため場合によっては見え方を変更しなければいけないです
ペンポケブログも大きくトップページを変更しました
今回すごく使える!と思ったのがアコーディオンです
目次
アコーディオンの使い方
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.13.34-1024x622.png)
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.13.34-1024x622.png)
SWELLブロックのアコーディオンを選択します
投稿リストをアコーディオンに入れる
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.14.01-1024x626.png)
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.14.01-1024x626.png)
次にテキスト入力部分を選択して投稿リストを選択します
テキスト入力部分は隠れる部分になります
右側の矢印で表示させる事ができます
好みで中身の投稿リストを作る
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.14.52-1024x605.png)
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.14.52-1024x605.png)
ペンポケのトップページは投稿数9>カード型>PC3列>モバイル2列で作成しています
お好みで投稿リストを編集していきましょう!
投稿リストのリンク設定
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.15.15-1024x608.png)
![](https://pen-pocket.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-23-12.15.15-1024x608.png)
リンクボタンのテキストとURLを設定するとすぐボタンが作成できます
次に何を使いたいかがしっかり想定されて作られてるのがSWELLのいいところ
実際に作ったアコーディオン
記事を開く
これで完成です!
必要以上にトップページにあれこれ表示させたくない場合に使うといいと思います
Word Pressテーマ『SWELL』
当ブログで使用中のテーマ
オシャレなサイトを作ってみませんか?
SWELL最高ですよ!
![](https://pen-pocket.com/wp-content/uploads/2022/01/名称未設定のアートワーク-150x150.jpg)
![](https://pen-pocket.com/wp-content/uploads/2022/01/名称未設定のアートワーク-150x150.jpg)
![](https://pen-pocket.com/wp-content/uploads/2022/01/名称未設定のアートワーク-150x150.jpg)
最後まで読んでいただきありがとうございます!