WordPressのテーマ

【初心者必見】 SWELLのカテゴリーページをアレンジする方法を紹介!

SWELLのカテゴリーページをアレンジする方法を紹介
hyu
当サイトのリンクには広告が含まれています。

SWELLでブログを始めて、もっとブログをおしゃれにしたい!

と感じている人も多いかと思います。

カメさん
カメさん

ブログをするなら、おしゃれに、見やすくしたいよね。

ひゅー
ひゅー

今回は、カテゴリページをアレンジする方法を紹介します!

カメさん
カメさん

おー!カテゴリーページか。記事数も増えてきたし、アレンジしたいな!

この記事でわかること
  • カテゴリーページをアレンジする理由とは
  • カテゴリーの設定方法
  • カテゴリーページをアレンジする方法

この記事ではSWELLのカテゴリーページのアレンジ方法を紹介します。

→SWELLで運営しているサイト「kimakura(気ままな暮らし)」はこちら

早くSWELLのカテゴリーページのアレンジ方法を知りたい人はこちらをタップ

SWELL

SWELLはだれでも簡単に、おしゃれなブログを作りたい人におすすめ!

THMLやCSSの知識がなくても、ブログを運営ができます。

SWELLのカテゴリーページをアレンジする理由とは

カテゴリーページをアレンジする利用は「おしゃれになる」「見やすくなる」です。

カテゴリーページを何も設定をしていないと、

SWELLのブログのカテゴリーページの編集前

とすこしだけ、質素な感じがしますね。

カメさん
カメさん

このままでもいいけど、何か物足りない気がする…。

ひゅー
ひゅー

ブログを少しでもおしゃれに、見やすくしたい人はカテゴリーページをアレンジした方がいいですね。

すこしだけ、アレンジしてみると、

SWELLのブログのカテゴリーページの編集後

となりました。

カメさん
カメさん

画像が増えたね!それと、新着記事と人気記事がわかれているね。

ひゅー
ひゅー

今回は、「画像」と「新着記事」「人気記事」を追加しました!

ほかにもアレンジする内容はたくさんあります。

SWELLのカテゴリーページのアレンジ方法

SWELLのカテゴリーページのアレンジ方法を紹介します。

先ほど、アレンジする前と後を紹介しましたが、アレンジ方法は無限大です。

カメさん
カメさん

アレンジ方法は、無限大!

ひゅー
ひゅー

はい!自分好みのカテゴリーページにすることができます!

カメさん
カメさん

でも初心者なので、難しいことはできないな…。

ひゅー
ひゅー

そんな人のために、僕がだれでもマネすることができる、カテゴリーページを紹介します!

カメさん
カメさん

それは助かる!

投稿カテゴリー を選択すると、SWELL設定ができます。

このSWELL設定でカテゴリーページのアレンジができます。

おすすめのSWELL設定は、「新着順/人気順でタブを分けるかどうか」をするに変更することですね。

これは簡単にできるので、1分あれば変更することができます。

それでは、カテゴリーページのアレンジ方法を紹介します。

1つずつやっていけば、簡単だよ!
カテゴリーページのアレンジ方法
  1. 左メニューの「ブログパーツ」の新規追加をタップ
  2. タイトルは自分がわかりやすいようにしてOK(なんでもよい)
  3. 記事の内容の部分がカテゴリーページの下に反映される
  4. ブログパーツの用途「カテゴリー用」にチェックを入れる
  5. 記事の内容を書いたら、「公開」をタップ
  6. 左メニューの投稿「カテゴリー」をタップ
  7. 自分がアレンジしたいカテゴリーを選択
  8. ページで呼び出すブログパーツを先ほど作成したものを選択
  9. 下にスクロールして「更新」をタップ
  10. カテゴリーページのアレンジ完了!

それでは、画像を用いて詳しく紹介していきますね。

左メニューの「ブログパーツ」の新規追加をタップ

WordPressを開いて、左メニューのブログパーツ「新規追加」を選択します。

タイトルは自分がわかりやすいようにしてOK(なんでもよい)

カテゴリーページのタイトルは自分がわかりやすいようにしましょう。

今回は、ブログカテゴリーアレンジ方法としています。


記事の内容の部分がカテゴリーページの下に反映される

記事の内容がカテゴリーページの下に反映されるようになります。

今回は、画像を1ついれました。

ここが、アレンジポイントで大切になってきます。

記事の内容をアレンジして、おしゃれに、見やすいカテゴリーページにしましょう!

画像のサイズは横1,200×縦300を使用しています。画像編集ソフトはCanvaを利用

ブログパーツの用途「カテゴリー用」にチェックを入れる

右上の公開の横にあるマークをタップします。

ブログパーツの用途「カテゴリー用」にチェックを入れてください。

記事の内容を書いたら、「公開」をタップ

先ほど、記事の内容を書いていない場合は、なにか入れておきましょう。

記事の内容を書いたら、右上の「公開」を選択します。

左メニューの投稿「カテゴリー」をタップ

左メニューにある、投稿の「カテゴリー」をタップします。

自分がアレンジしたいカテゴリーを選択

自分がアレンジしたい、カテゴリーを選択してください。

1つ1つのカテゴリーごとにアレンジができますので、まずは1つをアレンジしましょう。

ページで呼び出すブログパーツを先ほど作成したものを選択

SWELL設定の「ページで呼び出すブログパーツ」を選択します。

先ほど作成した、ブログパーツを選びましょう。

ここでは、SWELL設定でいろいろなアレンジができます。

今回は「新着順/人気順でタブを分けるかどうかを「する」に変更しました。

下にスクロールして「更新」をタップ

SWELLの設定が完了したら、下にスクロールして「更新」をタップしてください。

後からでも、変更ができますので、安心してください。

カテゴリーページのアレンジ完了!

更新をタップしたら、カテゴリーページのアレンジは完成です。

これが、ブログカテゴリーのアレンジの手順となります。

ここまでの作業お疲れさまでした。

これが、ブログカテゴリーのアレンジの手順となります。

ひゅー
ひゅー

次は、僕が考えたブログカテゴリーのアレンジを紹介します!

カメさん
カメさん

マネしてもいい?

ひゅー
ひゅー

はい!だれでもマネができるように紹介していきますね!

ブログカテゴリー【1つめのアレンジ】

ブログのカテゴリーページの1つ目のアレンジ

先ほどのブログカテゴリーのアレンジの手順を覚えた前提でお話します。わからないところがあれば、戻ってみてくださいね。

今回のアレンジでは、自分が紹介したい記事を一番上にするアレンジ方法です!

ブログパーツの新規追加で記事を作成します。

画像のサイズは横1,200×縦300で使用しています。

ブログのカテゴリーページの編集で投稿リストを選択

左上の「+」を選択して、「投稿リスト」をタップします。

投稿リストをタップすると、3つの記事がでてきたと思います。

投稿リストの編集

更新の右のマークを選択します。

つぎに、「Pickup」をタップして、「投稿IDを直接指定」の変更を行います。

自分のブログの投稿画面にいくと、右のほうにIDと書かれたマークがあると思います。

その下の数字が、IDとなるので、おすすめしたい記事のIDをメモしましょう。

投稿リストの編集でpick upを選択

IDを入れると、ブログの記事が変わりましたね。

後からでも、自分が紹介したい記事に変更できるので、紹介したい記事にしましょう。

これで、後は右上の「更新」をすれば完成です。

後は、先ほど紹介した手順にそっていけば、ブログカテゴリーを変更できます。

ブログカテゴリー【2つめのアレンジ】

ブログのカテゴリーページの2つ目のアレンジ

先ほどのブログカテゴリーのアレンジの手順を覚えた前提でお話します。わからないところがあれば、戻ってみてくださいね。

今回のアレンジでは、見栄えをよくする方法を紹介します!

先ほどと同様に、ブログパーツの新規追加から記事を作成しています。

swellのページ用を選択

左上の「+」を押して、「パターン」を選択します。

「[SWELL]ページ用」をタップして、どちらかの写真を選択します。

画像とテキストが出てくる

そうすると、2つの画像とテキストができくると思います。

1つの画像と写真を消去しましょう。

「画像」と「文章」を自分のオリジナルのモノを作ります。

画像とテキストを1つにする

「全体を塗りつぶすように画像を切り抜く」をオフにします。

「メディアの幅」を自分の好みに調整してください。

後は、更新をして完了です。

さいごに

今回は、ブログカテゴリーのアレンジ方法を紹介しました。

ブログを運営していると、おしゃれにしたくなりますよね。

ブログに愛着がわいてくるので、少しでもおしゃれに!と感じます。

自分の工夫次第で、ブログページがおしゃれになる!

ブログカテゴリーのアレンジするので、HTMLやCSSを使わなくていいのが楽ですよね。

だれでも、簡単にアレンジすることができるので、アレンジに挑戦してみてはどうでしょうか。

ABOUT ME
ひゅー
ひゅー
気ままなブロガー
20代の気ままなブロガーです。ブログ運営で生活をしています。ブログ運営で得た知識を当サイトで発信中。

╲よろしければお願いします!/

記事URLをコピーしました