SWELLでHTMLサイトマップを固定ページで自作する方法
こんにちは、SWELL歴２年半のくうかです。
この記事では、「HTMLサイトマップ」をWordPressテーマSWELLで自作した手順を紹介します。
そもそもHTMLサイトマップは、サイトの運営に絶対に必要というものではありませんが、サイトを見に来たユーザーとしては、
- 目的の記事を探しやすい
- 別の視点から記事を見つけることができる
などの利点もあるかと思います。
HTMLサイトマップはプラグインで簡単に作成することもできます。
しかし記事が多い当ブログのようなサイトでは、プラグインでサイトマップを作成してしまうと逆に見つけづらくなってしまうかな？という懸念もあり…
くうか自作して、見やすく色んな視点から探せるようなサイトマップを考えてみました！
- 記事を探しやすいサイトマップを作りたい
- オリジナリティのあるサイトマップを作りたい
＼ こちらもおすすめ ／
HTMLサイトマップはプラグインもいいけど、SWELLなら好みに自作できる
そもそもサイトマップとは、
- XMLサイトマップ：検索エンジンに認識してもらう
- HTMLサイトマップ：訪問者が見たい記事へと誘導する
という２種類のサイトマップがあります。
この記事では、②の「HTMLサイトマップ」を自作する方法について説明します。
自作は面倒だよ～！という場合は、ワードプレスではプラグインがあるので、手っ取り早く作ってしまうのが良いですね。
「PS Auto Sitemap」というプラグインが有名で、使っている方も多い印象。
設定画面が日本語でわかりやすい、見た目のカスタマイズも簡単そうです。
これから説明するサイトマップは、ブロックエディターで１から作ります。
- 固定ページを新規作成（フルワイドブロック・サイドバーはなし）
- 表示させたい記事や項目を追加していく
- トップページからリンクする
上記手順２の、実際に表示されるページの作り方を説明していきます。
私が作ったサイトマップでは、
- マップ風リスト（管理者目線からのおすすめ記事集）
- カテゴリー別
- キーワード
から記事を探せるようにしました。
実際に完成した見た目はこちら。
くうかSWELLならサイトマップも好みな感じで作れちゃいます！
プラグインも増えなくて一石二鳥。笑
SWELLで自作サイトマップ①マップ風リストエリア
サイトマップというからには「マップ風」な表現にしました。
各項目ごとに、おすすめしたい記事をリストアップしています。
当ブログの場合は、「SWELL」「ルームツアー」など、８項目です。
特にカテゴリーとは関係なく、読者が見たいのではないか？という項目をピックアップしています。
くうか簡単に作れますが、内容を説明していきます。
ボックスメニューでマップ風に
運営者情報やお問い合わせなどのメニューを、「ボックスメニュー」ブロックで配置。
- スタイル：標準
- カラー設定：アイコンカラーをグラデーション
- アイコンとテキストの並び：横並び
- アイコンサイズ：２
- 列数：PC・タブレットは４、モバイルは２
「リッチカラム」ブロックを３列に配置後、「見出し」「ボックスメニュー」を各カラムに配置。
見出しはシンプルに。
見出しブロックに、お好みでまとめ記事へのリンクを入れる
当ブログの場合は、テキストリンクを追加し、注釈にして文字を小さくしている
ボックスメニューは、アイコンを付けることが出来て、探すのが面倒だけど楽しい。
- スタイル：標準
- カラー設定：アイコンカラーをグラデーション
- アイコンとテキストの並び：横並び
- アイコンサイズ：１
- 列数：PC・タブレット・モバイルすべて１
そして、各メニューに該当記事をリンクしていく。
SWELLで自作サイトマップ②カテゴリーから探すエリア
アイコンからもカテゴリーページへ飛べるし、サブカテゴリー別に記事を探すことができます。
トップページのカテゴリーエリアと似てるんですけどね。苦笑
微妙に違うのです。
- アイコンからカテゴリーページへ遷移できる
- 新着記事を表示（トップではランダム表示）
くうか微妙な違いすぎる〜
カテゴリーアイコンはボックスメニューで
こちらでも「ボックスメニュー」ブロックを使っています。
①のエリアと違って、ここではカテゴリーに照準をあてて、カテゴリーから探せるようにしました。
ブログパーツで作ってあるので、モバイル版の開閉メニューのところにも使いまわしています。
カテゴリー別エリア
「リッチカラム」ブロックで、全５カテゴリーを上３・下２のカラムで配置して、各内容は以下の通り。
カテゴリーのタイトルを見出しにする。
ここ！私が１番頭を悩ませたところ。
くうかサブカテゴリーをどうしても入れたいけど、すっきりと表示させるにはどうしたらいいの？
行き着いた答えが「アコーディオン」ブロック。
見た目に”シンプル”を選択したら、本当にシンプルで超好みだった…！
アイコンも「＋－」を選んで可愛く。
各サブカテゴリーを段落ブロックで追加して、リンクする。
新着記事の投稿リストブロックを「リスト型」で追加。
ランダムにしようか迷いましたが、今のところ”新着記事”で。
くうかはい！これを５カテゴリー分！
ちょっと大変でした。笑
SWELLで自作サイトマップ③キーワードから探すエリア
検索したいキーワードまたはタグ一覧から検索できるようにしました。
「検索」ブロックと「タグクラウド」ブロックを追加します。
設定する項目はほとんどなく、見た目を少しいじれる程度。
検索ボックスのラベルの位置や、幅くらい。
タグクラウドも、設定項目はないに等しいです。
SWELLで自作サイトマップ④フォロー・問い合わせエリア
「SWELLボタン」ブロックにて各種フォロー、問い合わせのページへ飛ぶようにしています。
これらもブログパーツにてあらかじめ作ってあったもので、プロフィールページにも使用しています。
SWELLボタンの設定で各種アイコンも設定することができます。
楽天ROOMのアイコンは公式マニュアルにはまだ載っていなかったのですが、「icon-room」と入れてみたら出ました！笑
他のアイコンについては、公式マニュアルを参照してください。
SWELLで自作のHTMLサイトマップを作ってみた感想
自作のサイトマップを作り終えて、ちょっと達成感…！笑
あまりアクセスのあるページではありませんが、訪問してくれた方に”見て行ってほしいな”と思いながら作りました。
現在はトップページの目立つところに画像でリンクを貼ったので、以前よりはアクセスが増えています。
昔の私だったらサイトマップを手作りするなんて面倒くさい、と思って作っていなかったと思います。
しかし目標は「丁寧なサイト作り」。（見た目も中身も）
丁寧に作られているブログのサイトマップが自作だったことに感銘を受けて、私も作ることにしました。
自己満足の世界ではありますが、サイトマップ作りもSWELLなら楽しいです。
くうか良かったら見て行ってくださいね♪
トップページのカスタマイズはこちらの記事
この記事が気に入ったら
フォローしてね！
コメント
コメント一覧 （2件）
いつもブログを参考にさせていただいています。
私もサイトマップを手作りしようと思ったのですが、手作りした場合、サチコでサイトマップの登録はできないということでしょうか？
私も丁寧なブログ作り頑張ってみようと思います！
ひまわりさん
参考にしていただきありがとうございます！
Googleに認識してもらうサイトマップはxmlファイルかと思いますので、それはXML Sitemap & Google Newsなどのプラグインで対処します。
手作りするのはhtmlファイルで、見た目だけです＾＾
これで回答になってますでしょうか。
頑張ってください♪