Luxeritas(ルクセリタス)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン)

スポンサーリンク

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 私困 232x300
困っている人
ルクセリタスでカテゴリーページの作り方を教えてほしい

この記事の信憑性

  • 私の兄弟ブログの『ぶろぐしる~』のWordPressテーマはルクセリタスです→SWELLへテーマ変更しました。
  • ルクセリタスを使用して、まもなく2年目になろうとしています

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

 

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

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

メモ

  1. Page Builder By SiteOrigin
  2. Category Posts Widget
  3. Site Origin Widgets Bundle

 

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

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

完成イメージ①(縦方向)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 0 完成イメージ

完成イメージ②(横方向)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 0 ルクセリタスカテゴリーページの作り方

 

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

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

 

 

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

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

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

 

Page Builder By SiteOrigin

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

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

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 1 Page Builder by SiteOriginインストール

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 2 固定ページ新規追加

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 3 ページビルダーを選択

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 4 列を追加

 

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


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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 5 2カラム選択

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 6 1カラム目を選択

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 7 ウィジェットを選択

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 8 テキストを選択

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 9 1カラム目テキスト入力

 

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

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 11 style.css追記

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 10 2カラム目テキスト入力

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 12 テスト表示

 

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

 

Category Posts Widget

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

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 13 category postインストール

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 14 category post 追加

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 15 category post 設定1

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 16 category post 設定2

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 16.5 列を結合

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 17 テスト表示2

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 18 2カラム目も同様に

 

参考

Category Postsの設定画面→『デザイン』→『境界線の色』で枠線を引くことが可能です。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 19 category post 境界線

 

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


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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 20 バナー設定

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 21 行結合

 

step
9
完成です。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 0 完成イメージ

 

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

 

Site Origin Widgets Bundle

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

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


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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 1 ルクセリタスカテゴリーページの作り方

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 2 ルクセリタスカテゴリーページの作り方

 

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

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 3 ルクセリタスカテゴリーページの作り方

 

step
4
設定します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 4 ルクセリタスカテゴリーページの作り方

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 5 ルクセリタスカテゴリーページの作り方

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 6 ルクセリタスカテゴリーページの作り方

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 7 ルクセリタスカテゴリーページの作り方

 

step
5
完成です。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 8 ルクセリタスカテゴリーページの作り方

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

 

まとめ

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) img 4776
ばらもん。
いかがでしたか?

 

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

 

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

 

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

そろそろ、有料テーマを使ってみたいと考えていませんか?

 

結論です。
あなたの貴重な時間を無駄にしないためにも『AFFINGER6』を買うことをオススメします。

Luxeritas→SWELLとAFFINGER6の2つのブログ運営をしている私が理由を解説します。

 

AFFINGER6は¥14,800(税込)です。

サラリーマンの時給平均って『1,486円』らしいです。

サラリーマンの給料、時給換算するとなんと平均「1486円」
出典元:マイナビ学生の窓口フレッシャーズ(https://gakumado.mynavi.jp/freshers/articles/14142

 

10時間、働けばAFFINGER6を購入できるって計算です。

私は、別ブログでLuxeritasを1年以上使い倒しました。
自分なりに、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の両方を使って2つのブログを運営している私が実際に感じていることです。

 

\ブログ汁限定特典付き/

AFFINGER6(特典付き)を手に入れる

 

特典内容

実際に1位を取った『検索クエリ(月間検索ボリューム500~1000&競合性=低)』

クリック率が上がるタイトルの付け方

SEO効果が期待できる記事の書き方

キーワード選定方法

 

ドメインパワー=6.4でも1位を取れた検索クエリを教えます

特典の性質上『予告なく終了します』!

\期間限定特典(公式)/
『SUGOI MOKUJI(すごいもくじ) [LITE]』
※公式特典についても予告なく終了する可能性があります

迷ってるくらいなら購入をオススメします

 

【AFFINGER6をすでに持っている方へ朗報!】

ブログ汁限定特典パスワードをnoteで販売することに致しました!
(価格¥300)

気になった方は『ブログ汁限定特典』をクリック!

-Luxeritas(ルクセリタス)