カテゴリ一覧から記事を探す

【SANGO】誰でも簡単におしゃれなサイトマップを作る方法

【SANGO】誰でも簡単におしゃれなサイトマップを作る方法

サイトマップは頻繁にアクセスがある(というか来てほしい)ページです。

そんなサイトマップの作成を、プラグインに頼っていたのでは勿体ない!
SANGOなら、誰でも簡単におしゃれなサイトマップを作ることができます。

文字だけのサイトマップを改善して、画像付きのおしゃれなものにしましょう。

今回の記事では、以下のようなサイトマップを作ることを目指します。
コピペとかURL打ち込みだけで終わるので、工夫しつつやってみてはどうでしょうか!

以下の画像のようなサイトマップを目指します。

サイトマップ

何はともあれ、サイトマップを実際に見てもらえればと思います。

この記事では、主要部分(記事一覧と、それを囲う枠の部分)を作成していきます。

1.サイトマップをショートコードを使って作成

実際にサイトマップを作成する方法を紹介します。

SANGOのショートコードを使用すれば簡単に作ることができます!

私の場合、以前はphpやwordpress関数を使ってゴリゴリ書いていました(笑)

コードの使い方

  1. 固定ページより、サイトマップを新規作成
  2. [★○○]の★を消す(紹介の際にショートコードが反映されるので星を付けております)
  3. ★○○★の部分を、名前やURLに変更する

記事一覧を横2列で並べる

では、実際に固定ページに載せるコードを紹介します。

ショートコードを使えば簡単にできるなんてSANGOは優秀だなぁ・・・。

ショートコード
[★yoko2 responsive]
[★cell]
<div class="child-category-wrapper">
<div class="sitemap-category-title">★カテゴリータイトル★</div>
[★catpost catid="★カテゴリーID★" num="★表示させる記事数★"]
<a class="category-showmore-btn" href="★カテゴリーURL★"><i class="fa fa-plus-circle" aria-hidden="true"></i>このカテゴリーをもっと見る</a>
</div>
[★/cell]
[★cell]
<div class="child-category-wrapper">
<div class="sitemap-category-title">カテゴリータイトル</div>
[★catpost catid="★カテゴリーID★" num="★表示させる記事数★"]
<a class="category-showmore-btn" href="★カテゴリーURL★"><i class="fa fa-plus-circle" aria-hidden="true"></i>このカテゴリーをもっと見る</a>
</div>
[★/cell]
[★/yoko2]
[★catpost catid=”★カテゴリーID★” num=”★表示させる記事数★”]の部分で、特定カテゴリーの記事を指定しただけ表示させています。

カテゴリーIDについては、カテゴリー編集ページのURLを見ればOK
カテゴリーIDを調べる
画像は、「ブログ運営」にマウスホバーしたときの状況です。

URLの中にID=10とありますので、これを参考にします。

また、表示させる記事数は私は5にしています。
統一させるようにしましょう!

これで、2カテゴリー分が完成しますので、上記のコードを何回か貼って全カテゴリーを埋めれるようにしましょう。

カテゴリー数が奇数の場合は、一つ減らすか、画像で埋めるなどして対策してもらえればと思います!

2.サイトマップで使用するCSS

次に、CSSを紹介します。

編集する箇所
外観
テーマエディター
style.css
CSS
/*サイトマップ*/
.category-showmore-btn {
  color: #fff;
  margin: 1.2em 0 1em;
  font-weight: 700;
  display: inline-block;
  padding: .4em .8em;
  background: #ffb36b;
  border-radius: 5px;
  border-bottom: solid 3px #eea25a;
}

.category-showmore-btn:hover {
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  text-decoration: none;
}

.sitemap-category-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 0.25em;
  margin-bottom: 1.2em;
  border-top: solid 2px #00bb80;
  border-bottom: solid 2px #00bb80;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #ebffe9 3px, #ebffe9 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #ebffe9 3px, #ebffe9 7px);
}

.child-category-wrapper {
  padding: 1.0em 1em;
  border: solid 2px #d1d1d1;
  border-radius: 5px;
  text-align: center;
}
/*サイトマップここまで*/

色などは各自で調整してください!

また、タイトル部分を各自で作成したバナー型の画像にするのもおしゃれかなと思います。

3.まとめ

おしゃれなサイトマップを作成する方法を紹介しました。

このサイトマップですが、工夫次第ではトップページでも使えそうです。

トップページは本の目次みたいにすべきと言われていますしね。(私はできていませんが・・・)

アレンジは人それぞれですので、おしゃれ&分かりやすくユーザーに優しいサイト作りを目指しましょう!