MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

SWELLで作るHTMLサイトマップ

SWELLで作るサイトマップ
URLをコピーする
URLをコピーしました!

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

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

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

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

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

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

くうか

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

Contents

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

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

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

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

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

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

  1. ピックアップ(管理者目線からのおすすめ)
  2. カテゴリー別
  3. キーワード

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

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

ピックアップから探すエリア

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

ピックアップエリア全体像
ピックアップエリア全体像

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

くうか

中身はけっこう簡単な作り!

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

特にピックアップしたい分野
無印良品のピックアップエリア

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

STEP
カラムを追加

50/50のカラムブロックを追加。

STEP
バナーリンクを追加

バナーリンクを追加し、画像の設定・「無印良品のタグ」をリンク。

STEP
SWELLボタンを追加

SWELLボタンブロックを追加し、「無印良品のタグ」をリンク。

STEP
リストを追加

リストブロックを追加し、他におすすめしたい記事をいくつかリンク。

こちらは以前ブログパーツで作ったものを再利用しています。(サイドバーでも使用中)

関連記事 ブログパーツはこんな使い方をしています!

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

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

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

くうか

このリストたちもサイドバーにも使用していて、使いまわしのブログパーツです。笑

\ おすすめのテーマ /

テーマSWELL

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

カテゴリーから探すエリア

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

カテゴリー別エリア全体像
カテゴリー別エリア全体像

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

微妙に違うのです。

カテゴリーアイコン

カテゴリーアイコン
カテゴリーアイコン

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

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

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

カテゴリー別エリア

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

カテゴリー別エリア
カテゴリー別エリア
STEP
まとめ記事のバナーリンクを追加

まとめ記事のバナー(画像)を作ってあるのでそれを使いました。

ついでにテキストリンクも入れています。

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

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

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

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

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

アイコンも「+-」を選んで可愛くなりました。

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

STEP
投稿リストを追加

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

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

くうか

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

キーワードから探すエリア

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

キーワードから探すエリア
キーワードから探すエリア

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

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

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

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

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

フォロー・問い合わせエリア

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

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

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

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

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

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

最後に

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

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

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

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

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

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

くうか

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

\ おすすめのテーマ /

テーマSWELL

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

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

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

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

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

SWELLで作るサイトマップ

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

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

ピックアップ記事

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる