SWELL カスタマイザー完全ガイド|アーカイブページの設定ポイントと使い方を解説

1841_customizer-archive-2

こんにちは "osaboo"osabooです。"@osaboo_Bot"

SWELL カスタマイザー完全ガイド|アーカイブページのデザインや表示設定を初心者さん向けに解説します。

Question

アーカイブページ…ってなに?

SWELLでは、カスタマイザーから「アーカイブページ」のデザインや表示内容を直感的に調整できます。

この記事では、カスタマイザーの各メニュー項目に沿って、設定方法と実際の反映箇所を初心者さんにもわかりやすく徹底解説します。

「カスタマイザーってなに?」という段階の方でも安心して読み進められる内容になっているので、ぜひ参考にしてください。

こんな方におすすめ
  • SWELLでブログを始めたばかりで、アーカイブページの設定方法がよく分からない
  • カテゴリー・タグ・検索結果ページを見やすく整えたい
  • 読者が快適に記事を探せるように、デザインや表示をカスタマイズしたい
  • カスタマイザーの各項目がどこに反映されるのか具体的に知りたい
この記事でわかること
  • SWELLのカスタマイザーでできるアーカイブページの基本設定
  • カテゴリー・タグ・検索結果ページの表示カスタマイズ方法
  • アイキャッチや抜粋文の表示切り替えといった実用的な設定ポイント
  • 読者にとって見やすく、回遊しやすいアーカイブページ作りのコツ

それではご覧ください。

目次 "Contents"

カスタマイザーについて

 WordPressのカスタマイザー(Customizer)は、ユーザーがリアルタイムでウェブサイトの外観と設定をカスタマイズできるツールです。

テーマの変更やウィジェットの追加、メニューの編集、サイトのタイトルやキャッチフレーズの設定などを視覚的に行うことができます。

カスタマイザーは、『WordPress管理>ダッシュボード>外観>カスタマイズ』で、アクセスします。

以下に主要な機能を簡単に説明します。

  1. テーマのカスタマイズ
    • テーマの色、フォント、レイアウトなどを変更できます。テーマによっては、特定のオプションが用意されていることもあります。
  2. ウィジェットの管理
    • サイドバーやフッターに追加するウィジェットをドラッグ&ドロップで簡単に配置できます。
  3. メニューの設定
    • ナビゲーションメニューを作成・編集し、表示位置を設定できます。
  4. サイトの基本情報
    • サイトのタイトル、キャッチフレーズ、サイトアイコン(ファビコン)などを設定できます。
  5. 背景画像とカラースキーム
    • サイト全体の背景画像や色を設定し、カスタマイズされた外観を作り出せます。
  6. ライブプレビュー
    • 変更をリアルタイムでプレビューしながら行えるため、公開前に正確な仕上がりを確認できます。

カスタマイザーは使いやすく、コーディングの知識がなくてもサイトを自由にカスタマイズできるため、初心者から上級者まで幅広く利用されています。

カスタマイザー起動手順

カスタマイザーを起動する手順は次の通りです。

Menu『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

「カスタマイザー」画面で以下の手順で進み、詳細を設定します。

この記事では、「アーカイブページ」の詳細設定項目について紹介していきます。(赤破線部)

アーカイブページ
➡︎

1841-1|カスタマイザー|アーカイブページ
yajirusi-yoko-40x80

詳細設定項目
⬇︎

1841-2|カスタマイザー|アーカイブページ|詳細設定項目

カスタマイザーの設定を変更したら必ず、『公開』!その他の設定を変更したら必ず、設定ページの『変更を保存』!…を忘れずにクリックしましょう。

アーカイブページの詳細設定項目

  • カスタマイザー起動後の手順になります。

アーカイブページでは、ページタイトルの表示位置やデザインの設定ができます。

ウェブページの最上部に配置されるタイトルは、訪問者の第一印象を左右する重要な部分です。視認性やデザイン性を高めることで、サイト全体の印象を大きく向上させることができます。自分のサイトにスタイルを設定しましょう。

この章では、「アーカイブページ」の詳細設定項目を順番にご紹介していきます。

アーカイブページの詳細設定項目
  • タイトル設定
  • タイトル設定(表示イメージ)

それではご覧ください。

タイトル設定

アーカイブページのタイトルの表示位置やデザインを設定できます。
(サイト内全てのアーカイブページに影響します)

『タイトル設定』の設定項目は以下の通りです。

1841-3|カスタマイザー|アーカイブページ|詳細設定項目
タイトル設定
表示位置

コンテンツ「内・上」から選択できます。

  • コンテンツ内(デフォルト)
  • コンテンツ上
    • ページ用のアイキャッチ画像を設置した場合に画像の中に文字が表示されます。
コンテンツ内タイトルデザイン

タイトルの装飾設定ができます。

  • 装飾なし
  • 下線(デフォルト)
タームナビゲーション
  • ON(デフォルト)
補足
  • アーカイブ
    • WordPressなどのCMSで特定の条件に基づいてまとめられた投稿やコンテンツの一覧ページを指します。
      例として、カテゴリ別、タグ別、月別、著者別の一覧ページなどが含まれます。
  • ターム
    • 「タクソノミー」に属する分類項目を指します。
      カテゴリやタグの各項目(例:「ニュース」や「イベント」)がタームに該当します。
      タクソノミーが分類のルール全体であるのに対し、タームはその具体的な内容を表します。
  • タクソノミー
    • コンテンツを分類する仕組みやルールのことを指します。
      カテゴリやタグのように、投稿を整理してグループ化するために使用されます。

タイトル設定(表示イメージ)

カスタマイザーで各設定を変更した場合の表示サンプルです。

表示位置 → コンテンツ上
タームナビゲーション → ON『カテゴリーページを表示する』

1841-4|アーカイブページ|タイトル設定|表示イメージ
  • タイトルの背景画像は、カテゴリー・タグなどの「タームアーカイブページ」で設定します。

表示位置 → コンテンツ上
タームナビゲーション → OFF『カテゴリーページを表示する』

1841-5|アーカイブページ|タイトル設定|表示イメージ

表示位置 → コンテンツ内
コンテンツ内タイトルデザイン → 下線
タームナビゲーション → OFF『カテゴリーページを表示する』

1841-6|アーカイブページ|タイトル設定|表示イメージ
  • タイトルの表示がパンくずの下側に表示されます。

表示位置 → コンテンツ内
コンテンツ内タイトルデザイン → 装飾なし
タームナビゲーション → OFF『カテゴリーページを表示する』

1841-7|アーカイブページ|タイトル設定|表示イメージ

表示位置 → コンテンツ内
コンテンツ内タイトルデザイン → 装飾なし
タームナビゲーション → ON『カテゴリーページを表示する』

1841-8|アーカイブページ|タイトル設定|表示イメージ
補足

アーカイブページで表示される記事が少ない場合は、以下の設定がおすすめです。

  • 表示位置 → コンテンツ内
  • コンテンツ内タイトルデザイン → 下線
  • タームナビゲーション → ON『カテゴリーページを表示する』
  • 参考にしてみてくださいね。^^/

タームアーカイブページ
カテゴリー・タグのページごとの設定について

カテゴリーやタグなどの「タームアーカイブページ」では、それぞれのページに対して、表示する内容やデザインを自由にカスタマイズできます。これにより、特定の分類ごとに異なるレイアウトや情報を提供し、訪問者に合わせた体験を作ることが可能です。

詳しくは以下のページで解説しています。あわせてご覧ください。

※ SWELL公式マニュアルはこちらからご覧いただけます。

まとめSWELL カスタマイザー完全ガイド|アーカイブページの設定ポイントと使い方を解説

SWELLのカスタマイザーで設定できるアーカイブページの設定ポイントと使い方をご紹介しました。

カスタマイザーでの設定は、「タイトルの表示位置とデザイン」が主です。

カテゴリやタグページの個別設定とあわせて、アーカイブページを最適化することで、読者の回遊率や滞在時間が向上し、SEO効果にもつながります。

基本設定を整えるだけでも検索評価を高められるので、ぜひ活用してみてください。この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"