【Luxeritasルクセリタス】カテゴリーページの作り方（２パターン）

それでは、本題に入ります。

 

カテゴリーページの作り方

下記の３つのプラグインを使用して、２パターンのカテゴリーページを作成してみます。

 

英語ばっかりですね・・・。
でも、心配する必要はありません。
いざとなれば『google chrome』の日本語翻訳機能を使えば、大丈夫です。

完成イメージは、下記の２つです。

 

どちらのデザインが好きですか？

自分の好みに合ったデザインのカテゴリーページを作ることをオススメします！

 

 

それでは、作り方をご紹介します。

まずは、カテゴリーページの骨組みを作るためのプラグインをインストールします。

そのプラグイン名は、『Page Builder By SiteOrigin』です。

 

Page Builder By SiteOrigin

Page Builder By SiteOriginは、自分好みにレイアウトを作成することができるプラグインです。

感覚的に操作ができるので、初心者の方でも安心です。

 

step
1Page Builder By SiteOriginをインストールして、有効化します。

 

step
2固定ページを『新規追加』します。

 

step
3『ページビルダー』をクリックします。

 

step
4『列を追加』をクリックします。

 

step
5完成イメージ①の場合は、2カラムで設定します。

（完成イメージ②の場合は、1カラムです）

 

step
6左側の四角をクリックすると、青色が濃く変わります。

 

step
7『ウィジェットを追加』をクリックします。

 

step
8『テキスト』を選択します。（『テキスト』で、何でもできるので便利です。）

 

step
9テキストモードで、下記のように入力します。

 

こちらのcssはCSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選で参考にさせていただいています。
他にも綺麗でおしゃれな、cssをたくさん紹介されているのでとても参考になります。

step
10子テーマの編集→style.cssに下記を追記します。（※.category-btn2としていますが、ボタン名は任意です）

 

step
112カラム目も同じように、テキストウィジェットで同じように入力します。

 

step
12テスト表示してみます。

 

ここまで完成したら、下書き保存します。
（まぁこのボタンはあってもなくてもどちらでもいいかなぁという感じです爆）

 

Category Posts Widget

『Category Posts Widget』と呼ばれるプラグインを使って、カテゴリーの最新投稿を表示しています。

 

step
1Category Posts Widgetをインストールして有効化します。

 

step
2先程に作成した固定ページに『列の追加』→『ウィジェットの追加』→『Category Posts』を選択します。

 

step
3Category Postsの設定をします。

 

step
4Category Postsを上にドラッグして、テキストにくっつけます。

 

step
5テスト表示してみます。

 

step
62カラム目も同じように設定するとこのような感じなります。

 

 

step
7バナーボタンを作成します。

『テキストウィジェット』→『メディアを追加』→『メディアにカテゴリーページリンクを貼る』

 

step
8バナーボタンをドラッグしてくっつけておきます。

 

step
9完成です。

 

以上が、１パターン目のカテゴリーページの作成方法です。

 

Site Origin Widgets Bundle

続いて、２パターン目のカテゴリーページの作成に移ります。
使用するプラグインは『Site Origin Widgets Bundle』です。

step
1Site Origin Widgets Bundleをインストールして有効化します。

様々なウィジェットが入っています。（お得感満載）

step
2固定ページに『列の追加＝１カラム』、『ウィジェットの追加』、『SiteOrigin Post Carousel』を選択します。

 

step
3英語のままだと分かりづらいのでgoogle chromeの日本語に翻訳を使いました。

 

step
4設定します。

 

step
5完成です。

２つ目のイメージのカテゴリーページが完成しました。

 

まとめ

 

プラグインによって、カテゴリーページの見せ方は簡単に変えることができます。
実際に色々試してみて、あなた好みのカテゴリーページを作ってみることをオススメします。

 

今回ご紹介した『Page Builder By SiteOrigin』は、トップページレイアウトも自由に設定することができるので、特にオススメのプラグインです。以上です。

 

※本記事の内容で実行された結果について、筆者は一切の責任を負いません。
必ず自己責任で実行してください。

そろそろ、有料テーマを使ってみたいと考えていませんか？   結論です。 あなたの貴重な時間を無駄にしないためにも『AFFINGER6』を買うことをオススメします。 Luxeritas→SWELLとAFFINGER6の２つのブログ運営をしている私が理由を解説します。   AFFINGER6は￥14,800（税込）です。 サラリーマンの時給平均って『1,486円』らしいです。 サラリーマンの給料、時給換算するとなんと平均「1486円」 出典元：マイナビ学生の窓口フレッシャーズ（https://gakumado.mynavi.jp/freshers/articles/14142）   10時間、働けばAFFINGER6を購入できるって計算です。 私は、別ブログでLuxeritasを１年以上使い倒しました。 自分なりに、CSSやHTMLをカスタマイズしましたがAFFINGER6の『A』にも及んでいませんw。 正直に言って、CSSやHTMLをカスタムするために費やした時間は10時間は超えています。   注意ポイント ググった時間 デザインを考慮する時間 CSSやHTMLを記述する時間 etc・・・ 10時間以上の貴重な時間をカスタムに費やしても、思い通りのデザインにできていないのが現実です。 私は職業柄（得意言語はCOBOL笑）、プログラミングには詳しいと自負していましたが勘違いも良いところでした。   繰り返します。 あなたの貴重な時間を無駄にしないためにも、AFFINGER6を買ってください。 あなたがどんなに優れたSEであったとしても、たったの10時間でAFFINGER6並のカスタマイズをすることは不可能です。 ￥14,800（税込）で【優れたデザイン✕装飾✕操作性のテーマ】を手に入れることができるなら安いとすら感じます。   注意ポイント 失った時間は取り戻すことはできません。 CSSやHTMLに時間を費やすくらいなら、記事を書いていたほうが有意義です。   Luxeritasで別ブログを運営している運営していた私が断言します。 『AFFINGER6』を買うということ＝貴重な時間を買うこと。   SWELLかAFFINGER6のどちらにするのか悩まれているなら、『アフィリエイトを追求したいなら』AFFINGER6をオススメします。 SWELLとAFFINGER6の両方を使って２つのブログを運営している私が実際に感じていることです。   ＼ブログ汁限定特典付き／ AFFINGER6（特典付き）を手に入れる   特典内容 実際に１位を取った『検索クエリ（月間検索ボリューム500～1000＆競合性=低）』 クリック率が上がるタイトルの付け方 SEO効果が期待できる記事の書き方 キーワード選定方法   ドメインパワー=6.4でも1位を取れた検索クエリを教えます 特典の性質上『予告なく終了します』！ ＼期間限定特典（公式）／ 『SUGOI MOKUJI（すごいもくじ） [LITE]』 ※公式特典についても予告なく終了する可能性があります 迷ってるくらいなら購入をオススメします   【AFFINGER6をすでに持っている方へ朗報！】 ブログ汁限定特典パスワードをnoteで販売することに致しました！ （価格￥３００） 気になった方は『ブログ汁限定特典』をクリック！