【プラグインなし】Luxeritasでブログトップページを簡単に作る方法

おさるさん

・Luxeritasのテーマを使用しているけど、トップページの作り方が分からない
・できればプラグインは使いたくない

本記事ではこんなお悩みを解決します。
※現在、当ブログはcocoonを利用しています。

今回Luxeritasで作成するトップページのイメージ

今回作成するトップページのイメージは上記の画像のようになっています。一番上には「読んで欲しい記事」のバナーを貼ります。(テストページなので「TEST」と記載) 次にカテゴリ別の最新記事の一覧を作成しています。

まずは固定ページを作成します。左側のサイドバーの「固定ページ」から作成します。※記事を作成したときにタイトルが表示されますが、最後におこなう設定で非表示にできるので一旦置いて作業しましょう

次にブログ記事本文の一部分を分割して複数列で表示する方法です。トップページを作成する中で何回か必要になるので先に紹介します。

ブロックを追加し、検索ボックスに「カラム」と入力して検索をかけます。画像右上のような「カラム」のアイコンが出てきたら選択します。

「カラム」を選択すると、上の画像のような表示が出てきます。好きなパターンのアイコンを選択すると、下のような画像の表示になります。

列の幅を同じにしたい場合、「50/50」を選択するとブロックが2列になり、「33/33/33」を選択するとブロックが3列になります。

トップページの一番上に読んで欲しい記事の一覧を作ります。

私が作成したサンプルページ(3列表示)では「280ピクセル×120ピクセル」で作成しました。本サイトのサイドバーの幅は「外観(カスタマイズ)＞コンテンツ領域とサイドバー＞サイドバーウィジェットの幅＞2カラム目：250」となっています。

画像編集の簡単な方法についての記事は作成中です。

作成した画像を記事上に貼り付けていく作業です。「Luxeritasの簡単トップページ作成②ブログ記事本文を2、3列に分割する」を読みながら、カラムを2~3列作成します。

作成したカラムに画像を貼り付ける作業です。カラムの「＋」マークをクリックし、画像を選択すると画像を挿入できます。(最初の表示に出てこない方は、検索ボックスで「画像」と検索します)

画像に記事のURLを挿入します。URLを挿入したい画像をクリックして、URL挿入ボタン(画像参照)から記事のURLを挿入します。

「カテゴリ別最新記事」の一覧を作成します。「Luxeritasの簡単トップページ作成②ブログ記事本文を2、3列に分割する」を読みながら、カラムを2~3列作成します。(列は表示させたいカテゴリの数に応じて変えてください)

カラムを作成したら、カラム内の「＋」マークをクリックし「最新の投稿」を検索して選択します。画像の右のような表示が出ていたらOKです。次のステップに進みます。

デフォルトのままだと記事タイトルの羅列になってしまうので、見やすいように変更していきましょう。まず「アイキャッチ画像設定」から「アイキャッチ画像を表示」をオンにします。画像サイズや位置なども「アイキャッチ画像設定」欄からお好みに設定してください。

次に特定のカテゴリの記事だけを表示する設定をしましょう。「並び替えと絞り込み」の中から「カテゴリー」という欄を探してください。「カテゴリー」内に表示させたい記事のカテゴリー名を入力すると、候補が出てきて選択できます。

見本のテストページでは左側に「LIFE」のカテゴリーを表示させて、右側に「WORK」のカテゴリーを表示させる設定をしました。

ボタンとは、「今回Luxeritasで作成するトップページのイメージ」での「カテゴリ別最新記事」やその下の「LIFE」「WORK」と表示されているもののことです。

ブロックを作成し、「ボタン」検索して選択してください。デフォルトでは黒い塗りつぶしのボタンが出てきます。ボタンの設定から色やサイズを変更できます。URLを挿入することも可能です。

トップページ用の記事が完成したら、固定ページをトップページに設定していきます。「設定」の中の「表示設定」の画面を開きます。ホームページの表示で、デフォルトが「最新の投稿」になっているので「固定ページ」を選択します。

最後に固定ページの記事タイトルを非表示する設定をします。「外観」の中から「カスタマイズ」の画面を開きます。上から2つ目の「全体のレイアウト」を下にスクロールします。「固定ページ」欄で「固定フロントページの記事タイトル表示」にデフォルトでチェックが入っているので、チェックを解除します。

最後までお疲れ様でした！本記事ではWordPressのLuxeritasテーマのトップページの作り方をご紹介しました。元々のLuxeritasの機能を生かすことで、プラグインを使わずに作成が可能です。ブログをそれっぽいデザインに仕上げたい方はぜひ実際に手を動かしてみてください。