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

こんにちは、ゆるミニマリスト主婦のくうかです。

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

そもそもHTMLサイトマップは、サイトの運営に絶対に必要というものではありません。

しかしそのサイトを見に来たユーザーとしては、目的の記事を探しやすい・別の視点から記事を見つけることができる、などの利点もあるかと思います。

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

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

HTMLサイトマップをSWELLで自作！

自作は面倒だよ～！という場合は、プラグインで手っ取り早く作ってしまうのが良いですね。

「PS Auto Sitemap」というプラグインが有名なようです。

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

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

固定ページでフルワイドブロックを使い、サイドバーはなしにして画面を広く使います。

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

実際に完成したサイトマップはこちら。

SWELLでサイトマップ①ピックアップから探すエリア

カテゴリーとは別に、ブログ内で推している分野や人気のワードから推測してピックアップとしました。

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

特にピックアップしたい分野

特にピックアップしたい分野は画像も入れて目立つようにしました。

その他にピックアップしたい分野

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

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

アイコンからも飛べるし、カテゴリー別にも細かくリンクさせています。

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

微妙に違うのです。

カテゴリーアイコン

あ…ここはトップページと全く同じです。汗

ブログパーツで使いまわし！

アイコンを選択すると各カテゴリーへ飛ぶことができます。

カテゴリー別エリア

カラムブロックで、１段に２カテゴリーずつ全６カテゴリーを配置して、各内容は以下の通り。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

しかし今年の目標は「丁寧なサイト作り」。

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

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

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