投稿日順と更新日順の記事一覧をトップページに表示、CSSでプチカスタマイズ(WordPress + SWELL)

当サイトは2022年9月に再構築しました。WordPressテーマとして新たに導入したSWELLは、ブロックエディターが使いやすい高速表示なテーマです。

独自のSWELLブロックを使って高機能なサイトがマウス操作で容易に構築できるのでコンテンツ作成に集中できます。6カ月たった現在のカスタマイズ履歴です。

目次

投稿日順と更新日順の記事一覧をトップページに表示

OSやプログラムのバージョンアップに合わせて公開済みの記事をリライトしているので、SWELLブロックを使って、投稿日順と更新日順の両方で記事一覧を表示する固定ページをトップページに設定しています。

(1)記事一覧表示用の親カテゴリ-作成

記事一覧の表示用に、すべてのカテゴリ-を紐づけた親カテゴリ-「menu」を作成しました。

「投稿 」—> 「カテゴリー」で親カテゴリ-「menu」とその配下に2階層の子カテゴリ-を設けています。

親カテゴリ-「menu」
外観 —> メニューでカテゴリ-階層を確認

(2)SWELLブロックのタブと投稿リストで固定ページhomeを作成

「タブ」と「投稿リスト」を使って固定ページ「home」を新規作成して公開します。
主な設定箇所です。

タブ
テキスト
投稿リスト Pickup
タクソノミーの条件設定
カテゴリ-
投稿リスト Settings
投稿の表示順序
投稿リスト Settings
MOREリンクのURL
新着記事menu」を選択新着順menuのURL
更新日順menu」を選択更新日順menuのURL
人気順menu」を選択人気順menuのURL
  • SWELLブロックの「タブ」を追加して、「新着記事 」、「更新日順 」、「人気順 」を設定
  • 「タブ」毎に投稿リストのPickup、Settingsを設定
  • 投稿リストのMOREリンクは、「テキストを入力…」には「カテゴリ-別にもっと見る」を、「リンク先:」にはカテゴリ一覧「menu」のURLを登録
タブと投稿リストを組み合わせて作った固定ページhome
固定ページhome、右端はPickup

今回親カテゴリ-「menu」を作りましたが、SWELLブロックの 投稿リスト —> Pickup —> タクソノミーの条件設定 —> カテゴリー で複数のカテゴリーを一括選択することもできます。

「投稿リスト」のMOREボタンを目立たせるためにCSSで修飾しています。

/*「MOREリンク」ボタンを強調*/
.is-style-more_btn a{
background-color: #F5F5F5;/*背景色:薄いグレー*/
border-radius:50px;/*角の丸さ*/
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px;/*影の透明度*/
}
記事一覧の「もっと見るボタン(「カテゴリ-別にもっと見る」に名称変更)」には、「menu」のURLを割り当て
MOREリンク:「カテゴリ-別にもっと見る」ボタン

「カテゴリ-別にもっと見る」のリンク先「menu」には、すべてのカテゴリ-を紐づけた親カテゴリ-(投稿日順)の記事一覧が表示されます。menuには子カテゴリ-へのリンクタブ 9個が表示されて記事をフィルタできるので便利です。

子カテゴリ-をクリックするとその配下の孫カテゴリーのリンクタブが表示れ、上位のタブをクリックすると元に戻ります。

投稿リスト Settings 「表示する投稿数」を超える記事は最下段のページャボタンで次画面にジャンプです。

親カテゴリ「menu」の表示
リンク先「menu」

(3)ホームページの変更

WordPressの「設定」—>「表示設定」で「ホームページの表示」を「固定ページ(以下で選択)」に設定変更します。

・ホームページには、作成した固定ページ「home」を選択。

・投稿ページは未指定。

ホームページを固定ページを固定ページ「home」に設定
ホームページを固定ページ「home」に設定

今回親カテゴリ-「menu」を使ったので「投稿ページ」は未指定でした。新たに投稿ページ(ページャー付きの新着記事一覧)を設定するには、本文には何も書かずに固定ページ(例えば、タイトル:新着記事一覧、パーマリンク:new-post )を作って公開。その後、上記「(3)ホームページの変更」の要領で「投稿ページ」の選択プルダウンから、公開した「新着記事一覧」を選択します。なお、ページに何も表示されないときは「外観」—>「カスタマイズ」—>「記事一覧リスト」—>「タブ切り替え設定(トップページ)」—>「表示するタブの設定」で「新着記事タブを追加する」にチェックが入っているかを確認です。
1画面に表示する最大数は「設定」—>「表示設定」で変更。レイアウトやカラム数などの変更は、SWELLでは「外観」—>「カスタマイズ」—>「記事一覧リスト」からできます。

CSSでプチカスタマイズ

サイトデザインに凝りだすとエンドレス、PageSpeed Insightsのパフォーマンス(携帯電話、デスクトップ)値を見ながらプチ カスタマイズしています。

iPhoneで表罫線が消える対策で色指定

当サイトではプラグインとの相性が悪いのか、iPhoneで表の一部の枠線が消えます。CSSでtableタグの th、td に淡いグレー色(#dcdcdc)を優先(!important)で指定しています。

table, th, td { 
  border: 1px solid #dcdcdc !important;
}

お問い合わせフォーム横幅を100%にする設定

お問い合わせプラグインとしてContact Form 7を使っています。入力フォームの横幅をCSS設定で横幅いっぱいに広げています。

div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="your-subject"],
div.wpcf7 textarea[name="your-message"] {
width: 100%;
}

スマホ画面にもキャッチフレーズを表示

みさきweb サイトを参考にさせていただき、スマホ画面にもサイトタイトルの下にキャッチフレーズを表示しています。margin-top、margin-bottomでテキストの表示位置を調整します。

@media (max-width: 959px) {
.l-header__inner .c-catchphrase {
display: block;
margin-top: -8px;
margin-bottom: 5px;
font-size: 12px;
color: #000000;
}
}

スマホ画面のヘッダー背景をRGBA値で色と透過度を設定して、PCと同じ透過にしています。

.l-header{
background: rgba(231,231,235,0.8);
}

メインビジュアルのテキスト位置を右下に変更

トップページ「メインビジュアル」の画像上に表示されるメインテキスト(初期値はさぁ、始めよう。)とサブテキストを使って画像の紹介を行ってます。

横方向のテキストの位置は左、中央、右を選べますが、縦位置が選べなかったので画像の下部に変更するCSSを追加。合わせて、メインテキスト、サブテキストの文字サイズを小さくしています。

.p-mainVisual__slideTitle {
  font-size: 12px;
}
.p-mainVisual__slideText {
  font-size: 12px;
}
.p-mainVisual__textLayer {
  justify-content: flex-end;
}
メインビジュアルのテキスト位置を右下に変更
トップページのメインビジュアル


クラス名は、上記サイトの「HTML / CSS 構造の変更点」を参考に、Chromeブラウザの「ページのソースを表示」で確認しています。

メインビジュアルの表示に画像を指定した場合、「リンク先URL」が入力され、かつ「ボタンテキスト」が空の場合、画像全体がリンクとなります。

動画の場合は、サブテキストに替えて、ブログパーツでテキストリンクを作ってメインビジュアルの「ブログパーツID」にブログパーツの番号を登録して、記事中のリンクと同じに見栄え(青テキスト、マウスオーバで柿色)にしてみました。


SPのみの「全てのカテゴリー」menuへのテキストリンク
メインビジュアル動画のテキストリンク

タイトル背景画像の高さ、コンテンツ上の余白量を揃える

トップページのメインビジュアルの画像の高さは、投稿ページ、カテゴリーページ、固定ページのタイトル背景画像の高さに近い値を設定しています(240px程度)。
画面レイアウトが統一されるので、ページ遷移しても本文の開始位置が揃います。

投稿ページのタイトル背景画像は、その編集画面で最適なサイズの画像ファイルを登録できます。
当サイトではPC用の横長サイズに適した画像ファイルの手持ちがなく、記事内で使った16:9や4:3の画像ファイルを流用しています。

投稿ページに表示されるタイトルの背景画像
投稿ページのタイトル背景画像

カテゴリータグページのタイトル背景画像は、その編集画面でタイトル位置を「コンテンツ上」に設定して「タイトルの背景画像」を登録すると有効になります。
登録しない時は「外観」—>「カスタマイズ」—>「サイト全体設定」で登録した「NO IMAGE画像」になります。
当サイトではこのNO IMAGE画像をタイトル背景画像として使っています。

投稿ページmenuに表示されるタイトルの背景画像
カテゴリーページのタイトル背景画像

固定ページ(お問い合わせ、プライバシーポリシー)のタイトル背景画像は、その編集画面でタイトル位置を「コンテンツ上」に設定して「タイトルの背景画像」を登録すると有効になります。
当サイトではカテゴリーページと同じくNO IMAGE画像を使っています。

固定ページのタイトル背景画像
固定ページのタイトル背景画像

投稿ページ、カテゴリーページ、固定ページのタイトル背景画像とコンテンツ上の余白量をトップページに合わせて調整しています。

#content {
padding-top: 30px;
}
タイトル背景画像tとコンテンツ間の余白量の調整
余白量の調整(赤枠線部分)

トップページのメインビジュアルとその下のコンテンツ部分との間の余白量は「外観」—>「カスタマイズ」—>「トップページ」—>「その他」—>「コンテンツ上の余白量」で調整します。

トップページとサイドバーの見出し下線の位置合わせ

トップページ(固定ページで作成)とサイドバーの見出しには下線付きのh3タグを使っています。双方の見出しの下線位置が微妙にずれるのが気になったので位置合わせしました。

@media (min-width: 960px) {
.l-mainContent__inner {
margin-top: 6px;
}
}
トップとcategoryページとサイドバーの高さ調整
見出し下線の位置合わせ(赤枠線部分)
よかったらシェアしてね!
  • URLをコピーしました!
目次