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

読者の悩み

SANGOでサイトマップを作りたい
でもどうやって作ればいいか分からない
コピペで簡単におしゃれなサイトマップを作れたらなぁ・・・。

そんな悩みを解決します。

サイトマップは意外とアクセスがあるページです。

maipyon

このサイトの場合、1日平均2PVくらいはあるみたい。
直帰率も低いので優秀。

SANGOであれば、誰でも簡単におしゃれなサイトマップを作ることができます。

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

今回の記事では、サイトマップをの作り方を2通り紹介します。

雑記ブログにオススメのサイトマップ

カテゴリが多いので、各カテゴリページへ飛ばすサイトマップです。

特化ブログにオススメのサイトマップ

記事1つ1つに特化したサイトマップで、特化ブログ向けかなと思います。

この記事の目次

【雑記ブログ型】サイトマップをショートコードを駆使して作成する

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

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

コードの使い方

固定ページより、サイトマップを新規作成
ページ属性を、『トップページ用1カラム』or 『1カラム表示』に変更(参考)
固定ページへ、テキストモード or カスタムHTMLブロックの状態でコードをコピペする
[★○○]の★を消す（紹介の際にショートコードが反映されるので星を付けております）
★○○★の部分を、名前やURLに変更する
CSSの調節などをする

記事一覧を画像付きで横3列に並べる

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

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

ショートコード

[★yoko3 responsive]
[★cell]
<div class="sitemap-category-title">★カテゴリ名1★</div>
<div class="sitemap-img">
  <a class="sitemap-img-inner" href="★カテゴリへのリンクURL★"><img class="alignnone size-full wp-image-4151" src="★画像URL★" alt="" width="700" height="498" /></a>
</div>
★カテゴリの説明文★
<p style="text-align: center;"><a class="category-showmore-btn" href="★カテゴリへのリンクURL★">★カテゴリ名1★の記事をもっと見る</a></p>
[★/cell]
[★cell]
<div class="sitemap-category-title">★カテゴリ名2★</div>
<div class="sitemap-img">
  <a class="sitemap-img-inner" href="★カテゴリへのリンクURL★"><img class="alignnone size-full wp-image-4103" src="★画像URL★" alt="" width="700" height="394" /></a>
</div>
★カテゴリの説明分★
<p style="text-align: center;"><a class="category-showmore-btn" href="★カテゴリへのリンクURL★">★カテゴリ名2★の記事をもっと見る</a></p>
[★/cell]
[★cell]
<div class="sitemap-category-title">★カテゴリ名3★</div>
<div class="sitemap-img">
  <a class="sitemap-img-inner" href="★カテゴリへのリンクURL★"><img class="alignnone size-full wp-image-4295" src="★画像URL★" alt="" width="700" height="423" /></a></div>
★カテゴリの説明文★
<p style="text-align: center;"><a class="category-showmore-btn" href="★カテゴリへのリンクURL★">★カテゴリ名3★の始め方の記事を見る</a></p>
[★/cell]
[★/yoko3]

これで1列分の記事一覧が完成します。

なお、画像については700px × 400～500pxのものを活用しましょう。

maipyon

画像の背景が白色であれば画像の大きさがずれていてもCSSで調整します。
背景がある画像を使用する場合は、全部画像サイズを合わせましょう。

まぁ、画像の大きさは基本的にサムネイルと同じで問題ありません！

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

次に、CSSを紹介します。

編集する箇所

外観

テーマエディター

style.css

CSS

/*サイトマップ*/
.sitemap-img{
  height: 280px;
  display: table;
  margin-bottom: 1.5rem;
}
.sitemap-img-inner{
  display: table-cell;
  vertical-align: middle;
  box-shadow: 1px 1px 3px rgba(0,0,0,.25);
  border-radius: 3px;
  transition: .3s ease-in-out;
}
.sitemap-img-inner:hover{
  box-shadow: 1px 2px 6px rgba(0,0,0,.25);
  transform: translateY(-2px);
  cursor:pointer;
}

.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;
  transition 0.3s;
  text-decoration: none!important;
}

.category-showmore-btn:after {
  content: "\f138";
  font-family: 'FontAwesome';
  padding-left: 0.3rem;
}

.category-showmore-btn:hover{
  -webkit-transform: translateY(3px);
  transform: translateY(2px);/*下に動く*/
  border-bottom: solid 3px transparent;/*線を消す*/
  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);/*カテゴリの見出しの色*/
}
/*サイトマップここまで*/

これをコピペで完成します。

カテゴリの見出しの色については黄緑色になっているので、自由に変えてみてください！

カテゴリ説明文については、全部のカテゴリでほぼ同じ文字量にした方が見栄えがいいでしょう。

完成形を見つつ、調節していけばいいかなと思います。

【特化ブログ型】サイトマップをショートコードを駆使して作成する

お次は特化ブログ型のサイトマップの紹介。

コードの使い方

固定ページより、サイトマップを新規作成
ページ属性を、『トップページ用1カラム』or 『1カラム表示』に変更
固定ページへ、テキストモード or カスタムHTMLブロックの状態でコードをコピペする
[★○○]の★を消す（紹介の際にショートコードが反映されるので星を付けております）
★○○★の部分を、名前やURLに変更する
CSSの調節などをする

サイトマップの記事一覧を横3列で並べる

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

maipyon

コチラのサイトマップは、CSSのコピペはなしで完了します。
ショートコードでほとんどを終わらせてます。

1カテゴリ分だけ掲載しておきますので、自由に増やすなどしてみてください。

ショートコード

[★center]
<div id="top_start">
  <h2 class="hh hh1">★カテゴリ名★
    <span style="font-size: 0.7rem; opacity: 0.6; display: block;">★カテゴリ説明文★</span>
  </h2>
  [★yoko3 responsive]
    [★cell][★card id="★記事ID★"][★/cell]
    [★cell][★card id="★記事ID★"][★/cell]
    [★cell][★card id="★記事ID★"][★/cell]
  [★/yoko3]
  [★yoko3 responsive]
    [★cell][★card id="★記事ID★"][★/cell]
    [★cell][★card id="★記事ID★"][★/cell]
    [★cell][★card id="★記事ID★"][★/cell]
  [★/yoko3]
  [★btn href="★カテゴリページのURL★" class="raised main-bc strong"]★カテゴリ名★の記事一覧<i class="fas fa-chevron-circle-right" style="margin-left: 0.2rem;"></i>[★/btn]
</div>
[★/center]

記事IDについては、投稿一覧ページのURLを見ればOK