【初心者必見】 SWELLのカテゴリーページをアレンジする方法を紹介!
![SWELLのカテゴリーページをアレンジする方法を紹介](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-introduction.jpg)
SWELLでブログを始めて、もっとブログをおしゃれにしたい!
と感じている人も多いかと思います。
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
ブログをするなら、おしゃれに、見やすくしたいよね。
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
今回は、カテゴリページをアレンジする方法を紹介します!
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
おー!カテゴリーページか。記事数も増えてきたし、アレンジしたいな!
- カテゴリーページをアレンジする理由とは
- カテゴリーの設定方法
- カテゴリーページをアレンジする方法
この記事ではSWELLのカテゴリーページのアレンジ方法を紹介します。
→SWELLで運営しているサイト「kimakura(気ままな暮らし)」はこちら
→早くSWELLのカテゴリーページのアレンジ方法を知りたい人はこちらをタップ
SWELLのカテゴリーページをアレンジする理由とは
カテゴリーページをアレンジする利用は「おしゃれになる」「見やすくなる」です。
カテゴリーページを何も設定をしていないと、
![SWELLのブログのカテゴリーページの編集前](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-1.jpg)
とすこしだけ、質素な感じがしますね。
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
このままでもいいけど、何か物足りない気がする…。
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
ブログを少しでもおしゃれに、見やすくしたい人はカテゴリーページをアレンジした方がいいですね。
すこしだけ、アレンジしてみると、
![SWELLのブログのカテゴリーページの編集後](http://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-2.jpg)
となりました。
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
画像が増えたね!それと、新着記事と人気記事がわかれているね。
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
今回は、「画像」と「新着記事」「人気記事」を追加しました!
ほかにもアレンジする内容はたくさんあります。
SWELLのカテゴリーページのアレンジ方法
SWELLのカテゴリーページのアレンジ方法を紹介します。
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
アレンジ方法は、無限大!
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
はい!自分好みのカテゴリーページにすることができます!
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
でも初心者なので、難しいことはできないな…。
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
そんな人のために、僕がだれでもマネすることができる、カテゴリーページを紹介します!
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
それは助かる!
投稿 >カテゴリー を選択すると、SWELL設定ができます。
このSWELL設定でカテゴリーページのアレンジができます。
おすすめのSWELL設定は、「新着順/人気順でタブを分けるかどうか」をするに変更することですね。
これは簡単にできるので、1分あれば変更することができます。
それでは、カテゴリーページのアレンジ方法を紹介します。
それでは、画像を用いて詳しく紹介していきますね。
![](http://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-3.jpg)
WordPressを開いて、左メニューのブログパーツ「新規追加」を選択します。
![](http://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-5.jpg)
カテゴリーページのタイトルは自分がわかりやすいようにしましょう。
今回は、ブログカテゴリーアレンジ方法としています。
記事の内容の部分がカテゴリーページの下に反映される
![](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-4.jpg)
記事の内容がカテゴリーページの下に反映されるようになります。
今回は、画像を1ついれました。
ここが、アレンジポイントで大切になってきます。
記事の内容をアレンジして、おしゃれに、見やすいカテゴリーページにしましょう!
画像のサイズは横1,200×縦300を使用しています。画像編集ソフトはCanvaを利用
![](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-6.jpg)
右上の公開の横にあるマークをタップします。
ブログパーツの用途「カテゴリー用」にチェックを入れてください。
先ほど、記事の内容を書いていない場合は、なにか入れておきましょう。
記事の内容を書いたら、右上の「公開」を選択します。
![](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-7.jpg)
左メニューにある、投稿の「カテゴリー」をタップします。
自分がアレンジしたい、カテゴリーを選択してください。
1つ1つのカテゴリーごとにアレンジができますので、まずは1つをアレンジしましょう。
![](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-8.jpg)
SWELL設定の「ページで呼び出すブログパーツ」を選択します。
先ほど作成した、ブログパーツを選びましょう。
ここでは、SWELL設定でいろいろなアレンジができます。
今回は「新着順/人気順でタブを分けるかどうかを「する」に変更しました。
SWELLの設定が完了したら、下にスクロールして「更新」をタップしてください。
後からでも、変更ができますので、安心してください。
更新をタップしたら、カテゴリーページのアレンジは完成です。
これが、ブログカテゴリーのアレンジの手順となります。
ここまでの作業お疲れさまでした。
これが、ブログカテゴリーのアレンジの手順となります。
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
次は、僕が考えたブログカテゴリーのアレンジを紹介します!
![カメさん](http://homeworker20.com/wp-content/uploads/2023/12/tortoise-icon.jpg)
マネしてもいい?
![ひゅー](http://homeworker20.com/wp-content/uploads/2023/11/hyu-icon.png)
はい!だれでもマネができるように紹介していきますね!
ブログカテゴリー【1つめのアレンジ】
![ブログのカテゴリーページの1つ目のアレンジ](https://kimakura-hyu.com/wp-content/uploads/2023/08/swell-category-arrangement-5.jpg)
ブログパーツの新規追加で記事を作成します。
画像のサイズは横1,200×縦300で使用しています。
![ブログのカテゴリーページの編集で投稿リストを選択](https://kimakura-hyu.com/wp-content/uploads/2023/08/swell-category-arrangement-8.jpg)
左上の「+」を選択して、「投稿リスト」をタップします。
投稿リストをタップすると、3つの記事がでてきたと思います。
![投稿リストの編集](https://kimakura-hyu.com/wp-content/uploads/2023/08/swell-category-arrangement-7.jpg)
更新の右のマークを選択します。
つぎに、「Pickup」をタップして、「投稿IDを直接指定」の変更を行います。
自分のブログの投稿画面にいくと、右のほうにIDと書かれたマークがあると思います。
その下の数字が、IDとなるので、おすすめしたい記事のIDをメモしましょう。
![投稿リストの編集でpick upを選択](https://kimakura-hyu.com/wp-content/uploads/2023/08/swell-category-arrangement-6.jpg)
IDを入れると、ブログの記事が変わりましたね。
後からでも、自分が紹介したい記事に変更できるので、紹介したい記事にしましょう。
これで、後は右上の「更新」をすれば完成です。
後は、先ほど紹介した手順にそっていけば、ブログカテゴリーを変更できます。
ブログカテゴリー【2つめのアレンジ】
![ブログのカテゴリーページの2つ目のアレンジ](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-17.jpg)
先ほどと同様に、ブログパーツの新規追加から記事を作成しています。
![swellのページ用を選択](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-14-1024x868.jpg)
左上の「+」を押して、「パターン」を選択します。
「[SWELL]ページ用」をタップして、どちらかの写真を選択します。
![画像とテキストが出てくる](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-15.jpg)
そうすると、2つの画像とテキストができくると思います。
1つの画像と写真を消去しましょう。
「画像」と「文章」を自分のオリジナルのモノを作ります。
![画像とテキストを1つにする](https://homeworker20.com/wp-content/uploads/2023/11/swell-category-arrangement-16.jpg)
「全体を塗りつぶすように画像を切り抜く」をオフにします。
「メディアの幅」を自分の好みに調整してください。
後は、更新をして完了です。
さいごに
今回は、ブログカテゴリーのアレンジ方法を紹介しました。
ブログを運営していると、おしゃれにしたくなりますよね。
ブログに愛着がわいてくるので、少しでもおしゃれに!と感じます。
ブログカテゴリーのアレンジするので、HTMLやCSSを使わなくていいのが楽ですよね。
だれでも、簡単にアレンジすることができるので、アレンジに挑戦してみてはどうでしょうか。