ルクセリタス

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

スポンサーリンク

兄弟ブログの『ぶろぐしる~』ですが、『ルクセリタス』→『SWELL』へテーマ変更しました。(2021年6月にテーマ変更)

 

1年以上かけて書いた記事は130記事以上・・・。
デザイン崩れを修正するのに1ヶ月かかりました。

注意ポイント

正直に言って、デザイン崩れを修正するのは大変な作業でした。

テーマ変更を決断するなら、早いほうが断然良いです。
私自身、テーマ変更に悩んでいた時間は無駄だったと感じました。

 

記事にまとめたので、『SWELL』が気になる方は要チェック!
→『【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ?

\え?まだ、クラシックエディタ使いよん?もったいなw/

SWELL

SWELLのブロックエディタを体験しないのは損!

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

この記事の信憑性

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

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

使用する3つのプラグイン

下記の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 完成イメージ

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つ目のイメージのカテゴリーページが完成しました。
『ぶろぐしる~』の2021年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』を買うということ=貴重な時間を買うこと。

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

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

 

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

特典の性質上『今月残り4名』!

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

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

-ルクセリタス