SWELLでHTMLサイトマップを自作してみよう

こんにちは、ゆるミニマリスト主婦のくうかです。
この記事では、HTMLサイトマップを「WordPressテーマSWELL」で自作した手順をご紹介します。
そもそもHTMLサイトマップは、サイトの運営に絶対に必要というものではありません。
しかしそのサイトを見に来たユーザーとしては、目的の記事を探しやすい・別の視点から記事を見つけることができる、などの利点もあるかと思います。
HTMLサイトマップはプラグインで簡単に作成することもできます。
しかし記事が多い当ブログのようなサイトでは、プラグインでサイトマップを作成してしまうと逆に見つけづらくなってしまうかな?という懸念もあり…

自作して、見やすく色んな視点から探せるようなサイトマップを考えてみました!
HTMLサイトマップをSWELLで自作!
自作は面倒だよ~!という場合は、プラグインで手っ取り早く作ってしまうのが良いですね。
「PS Auto Sitemap」というプラグインが有名なようです。
設定画面が日本語でわかりやすい、見た目のカスタマイズも簡単そうです。
これから説明するサイトマップは、ブロックエディターで1から作ります。
固定ページでフルワイドブロックを使い、サイドバーはなしにして画面を広く使います。
- ピックアップ(管理者目線からのおすすめ)
- カテゴリー別
- キーワード
から記事を探せるようにしました。
実際に完成したサイトマップはこちら。
SWELLでサイトマップ①ピックアップから探すエリア
カテゴリーとは別に、ブログ内で推している分野や人気のワードから推測してピックアップとしました。


当ブログでは「SWELL」「無印良品」「ミニマリスト」「収納」「主婦の知恵」、ですね。



中身はけっこう簡単な作り!
特にピックアップしたい分野


特にピックアップしたい分野は画像も入れて目立つようにしました。
50/50のカラムブロックを追加。
バナーリンクを追加し、画像の設定・「無印良品のタグ」をリンク。
SWELLボタンブロックを追加し、「無印良品のタグ」をリンク。
その他にピックアップしたい分野


カラムブロック(33/33/33)を追加し、上記と同じようにリストブロックでおすすめの記事へとリンクしています。



このリストたちもサイドバーにも使用していて、使いまわしのブログパーツです。笑
SWELLでサイトマップ②カテゴリーから探すエリア
アイコンからも飛べるし、カテゴリー別にも細かくリンクさせています。


トップページのカテゴリーエリアと似てるんですけどね。笑
微妙に違うのです。
カテゴリーアイコン


あ…ここはトップページと全く同じです。汗
ブログパーツで使いまわし!
アイコンを選択すると各カテゴリーへ飛ぶことができます。
カテゴリー別エリア
カラムブロックで、1段に2カテゴリーずつ全6カテゴリーを配置して、各内容は以下の通り。


まとめ記事のバナー(画像)を作ってあるのでそれを使いました。
ついでにテキストリンクも入れています。
ここ!
私が1番頭を悩ませたところ。
サブカテゴリーをどうしても入れたいけど、すっきりと表示させるにはどうしたらいいのか。
行き着いた答えが「アコーディオン」ブロックでした。
見た目に”シンプル”を選択したら、本当にシンプルで超好みだった…!
アイコンも「+-」を選んで可愛くなりました。
各サブカテゴリーを段落で追加して、リンクしています。
新着記事の投稿リストブロックを「リスト型」で追加。
ランダムにしようか迷いましたが、今のところ”新着記事”で。



はい!これを6カテゴリー分!
ちょっと大変でした。笑
SWELLでサイトマップ③キーワードから探すエリア
検索したいキーワードまたはタグ一覧から検索できるようにしました。


「検索」ブロックと「タグクラウド」ブロックを追加します。
設定する項目はほとんどなく、見た目を少しいじれる程度。


検索ボックスのラベルの位置や、幅くらい。
タグクラウドも設定項目はないに等しいです。
SWELLでサイトマップ④フォロー・問い合わせエリア
「SWELLボタン」ブロックにて各種フォロー、問い合わせのページへ飛ぶようにしています。


これらもブログパーツにてあらかじめ作ってあったもので、プロフィールページにも使用しています。
SWELLボタンの設定で各種アイコンも設定することができます。
楽天ROOMのアイコンは公式マニュアルにはまだ載ってなかったのですが、「icon-room」と入れてみたら出ました!笑
他のアイコンについては公式マニュアルを参照してください。


SWELLで自作のサイトマップを作ってみた感想
自作のサイトマップを作り終えて、ちょっと達成感…!笑
あまりアクセスのあるページではありませんが、訪問してくれた方に見て行ってほしいな~と思いながら作りました。
以前の私だったらサイトマップを手作りするなんて面倒くさい、と思って作っていなかったと思います。
しかし今年の目標は「丁寧なサイト作り」。
丁寧に作られているブログのサイトマップが自作だったことに感銘を受けて、私も作ることにしました。
自己満足の世界ではありますが、サイトマップ作りもSWELLなら楽しいです。



良かったら見て行ってくださいね♪
トップページのカスタマイズはこちらの記事


コメント