MENU
アーカイブ
くうか
ミニマリスト
整理収納・ゲーム・プログラミングが好きな40代専業主婦。4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているミニマリストでもあります。
SWELLでサイト型トップページを作る!解説→CLICK!

SWELLでHTMLサイトマップを固定ページで自作する方法

SWELLでHTMLサイトマップ

こんにちは、SWELL歴2年半のくうかです。

この記事では、「HTMLサイトマップ」をWordPressテーマSWELLで自作した手順を紹介します。

そもそもHTMLサイトマップは、サイトの運営に絶対に必要というものではありませんが、サイトを見に来たユーザーとしては、

  • 目的の記事を探しやすい
  • 別の視点から記事を見つけることができる

などの利点もあるかと思います。

HTMLサイトマップはプラグインで簡単に作成することもできます。

しかし記事が多い当ブログのようなサイトでは、プラグインでサイトマップを作成してしまうと逆に見つけづらくなってしまうかな?という懸念もあり…

くうか

自作して、見やすく色んな視点から探せるようなサイトマップを考えてみました!

この記事はこんな人におすすめ
  • 記事を探しやすいサイトマップを作りたい
  • オリジナリティのあるサイトマップを作りたい

\ こちらもおすすめ /

目次

HTMLサイトマップはプラグインもいいけど、SWELLなら好みに自作できる

そもそもサイトマップとは、

  1. XMLサイトマップ:検索エンジンに認識してもらう
  2. HTMLサイトマップ:訪問者が見たい記事へと誘導する

という2種類のサイトマップがあります。

この記事では、②の「HTMLサイトマップ」を自作する方法について説明します。

自作は面倒だよ~!という場合は、ワードプレスではプラグインがあるので、手っ取り早く作ってしまうのが良いですね。

「PS Auto Sitemap」というプラグインが有名で、使っている方も多い印象。

設定画面が日本語でわかりやすい、見た目のカスタマイズも簡単そうです。

これから説明するサイトマップは、ブロックエディターで1から作ります。

自作サイトマップを作る手順
  1. 固定ページを新規作成(フルワイドブロック・サイドバーはなし)
  2. 表示させたい記事や項目を追加していく
  3. トップページからリンクする

上記手順2の、実際に表示されるページの作り方を説明していきます。

私が作ったサイトマップでは、

  1. マップ風リスト(管理者目線からのおすすめ記事集)
  2. カテゴリー別
  3. キーワード

から記事を探せるようにしました。

実際に完成した見た目はこちら

くうか

SWELLならサイトマップも好みな感じで作れちゃいます!
プラグインも増えなくて一石二鳥。笑

SWELLで自作サイトマップ①マップ風リストエリア

サイトマップというからには「マップ風」な表現にしました。

SWELLでサイトマップ
マップ風のリスト

各項目ごとに、おすすめしたい記事をリストアップしています。

当ブログの場合は、「SWELL」「ルームツアー」など、8項目です。

特にカテゴリーとは関係なく、読者が見たいのではないか?という項目をピックアップしています。

くうか

簡単に作れますが、内容を説明していきます。

ボックスメニューでマップ風に

SWELLのボックスメニュー
ボックスメニューを多用
STEP
情報メニューをボックスメニューにする

運営者情報やお問い合わせなどのメニューを、「ボックスメニュー」ブロックで配置。

サイトマップのメニュー
ボックスメニュー使用
ボックスメニュー設定
  • スタイル:標準
  • カラー設定:アイコンカラーをグラデーション
  • アイコンとテキストの並び:横並び
  • アイコンサイズ:2
  • 列数:PC・タブレットは4、モバイルは2
STEP
項目メニューをボックスメニューにする

「リッチカラム」ブロックを3列に配置後、「見出し」「ボックスメニュー」を各カラムに配置。

見出しはシンプルに。

サイトマップの見出し
見出し
見出し

見出しブロックに、お好みでまとめ記事へのリンクを入れる

当ブログの場合は、テキストリンクを追加し、注釈にして文字を小さくしている

ボックスメニューは、アイコンを付けることが出来て、探すのが面倒だけど楽しい。

サイトマップのボックスメニュー
メニューをボックスに
ボックスメニュー設定
  • スタイル:標準
  • カラー設定:アイコンカラーをグラデーション
  • アイコンとテキストの並び:横並び
  • アイコンサイズ:1
  • 列数:PC・タブレット・モバイルすべて1

そして、各メニューに該当記事をリンクしていく。

SWELLで自作サイトマップ②カテゴリーから探すエリア

アイコンからもカテゴリーページへ飛べるし、サブカテゴリー別に記事を探すことができます。

サイトマップのカテゴリーエリア
カテゴリー別エリア全体像

トップページのカテゴリーエリアと似てるんですけどね。苦笑

微妙に違うのです。

  • アイコンからカテゴリーページへ遷移できる
  • 新着記事を表示(トップではランダム表示)
くうか

微妙な違いすぎる〜

カテゴリーアイコンはボックスメニューで

サイトマップのカテゴリー別メニュー
カテゴリーアイコン

こちらでも「ボックスメニュー」ブロックを使っています。

①のエリアと違って、ここではカテゴリーに照準をあてて、カテゴリーから探せるようにしました。

ブログパーツで作ってあるので、モバイル版の開閉メニューのところにも使いまわしています。

カテゴリー別エリア

「リッチカラム」ブロックで、全5カテゴリーを上3・下2のカラムで配置して、各内容は以下の通り。

サイトマップのカテゴリー別新着記事
カテゴリー別の新着記事
STEP
見出しを追加

カテゴリーのタイトルを見出しにする。

STEP
サブカテゴリーが開けるアコーディオンを追加

ここ!私が1番頭を悩ませたところ。

くうか

サブカテゴリーをどうしても入れたいけど、すっきりと表示させるにはどうしたらいいの?

行き着いた答えが「アコーディオン」ブロック。

見た目に”シンプル”を選択したら、本当にシンプルで超好みだった…!

アイコンも「+-」を選んで可愛く。

各サブカテゴリーを段落ブロックで追加して、リンクする。

STEP
投稿リストを追加

新着記事の投稿リストブロックを「リスト型」で追加。

ランダムにしようか迷いましたが、今のところ”新着記事”で。

くうか

はい!これを5カテゴリー分!
ちょっと大変でした。笑

SWELLで自作サイトマップ③キーワードから探すエリア

検索したいキーワードまたはタグ一覧から検索できるようにしました。

サイトマップのキーワードから探すエリア
キーワードから探すエリア

「検索」ブロックと「タグクラウド」ブロックを追加します。

設定する項目はほとんどなく、見た目を少しいじれる程度。

検索ブロック設定
検索ブロック設定

検索ボックスのラベルの位置や、幅くらい。

タグクラウドも、設定項目はないに等しいです。

SWELLで自作サイトマップ④フォロー・問い合わせエリア

「SWELLボタン」ブロックにて各種フォロー、問い合わせのページへ飛ぶようにしています。

フォロー・問い合わせボタン
フォロー・問い合わせボタン

これらもブログパーツにてあらかじめ作ってあったもので、プロフィールページにも使用しています。

SWELLボタンの設定で各種アイコンも設定することができます。

楽天ROOMのアイコンは公式マニュアルにはまだ載っていなかったのですが、「icon-room」と入れてみたら出ました!笑

他のアイコンについては、公式マニュアルを参照してください。

SWELLで自作のHTMLサイトマップを作ってみた感想

自作のサイトマップを作り終えて、ちょっと達成感…!笑

あまりアクセスのあるページではありませんが、訪問してくれた方に”見て行ってほしいな”と思いながら作りました。

現在はトップページの目立つところに画像でリンクを貼ったので、以前よりはアクセスが増えています。

昔の私だったらサイトマップを手作りするなんて面倒くさい、と思って作っていなかったと思います。

しかし目標は「丁寧なサイト作り」。(見た目も中身も)

丁寧に作られているブログのサイトマップが自作だったことに感銘を受けて、私も作ることにしました。

自己満足の世界ではありますが、サイトマップ作りもSWELLなら楽しいです。

くうか

良かったら見て行ってくださいね♪

\ 使用しているテーマ /

シンプルでスタイリッシュなデザインと高機能が備わったテーマ
快適すぎてびっくりしちゃうかも!?

トップページのカスタマイズはこちらの記事

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

SWELLでHTMLサイトマップ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次