現役エンジニアがオススメするデスク周りの商品紹介

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

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

読者の悩み

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

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

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

maipyon

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

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

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

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

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

雑記ブログのサイトマップ

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

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

特化ブログのサイトマップ

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

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

雑記ブログのサイトマップ

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

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

コードの使い方
  1. 固定ページより、サイトマップを新規作成
  2. ページ属性を、『トップページ用1カラム』or 『1カラム表示』に変更(参考)
  3. 固定ページへ、テキストモード or カスタムHTMLブロックの状態でコードをコピペする
  4. [★○○]の★を消す(紹介の際にショートコードが反映されるので星を付けております)
  5. ★○○★の部分を、名前やURLに変更する
  6. 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. 固定ページより、サイトマップを新規作成
  2. ページ属性を、『トップページ用1カラム』or 『1カラム表示』に変更
  3. 固定ページへ、テキストモード or カスタムHTMLブロックの状態でコードをコピペする
  4. [★○○]の★を消す(紹介の際にショートコードが反映されるので星を付けております)
  5. ★○○★の部分を、名前やURLに変更する
  6. 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

記事IDの調べ方

記事ごとにマウスホバーしたらURL遷移先が表示されるかと思いますが、そこにあるpost=〇〇の部分の数字を記事IDに入れましょう。

たったこれだけで完成するので、こちらの方が簡単ですね。

SANGOでおしゃれなサイトマップを作って回遊してもらおう

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

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

アレンジは人それぞれなので、自由に活用してみてください。

PVを増やしたいならこちらもどうぞ

【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】 【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】 今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。 WordPressブログで使っている神ツールまとめ【月間2万PV達成】 WordPressブログで使っている神ツールまとめ【月間2万PV達成】 ブログ歴2年の私が、取捨選択しながら現在WordPressブログで使っているツールについてまとめました。使用しているツールに変更点があれば、その随時この記事を更新したいと思います! 【SANGO】ブログの回遊率を改善!カテゴリ別人気記事&デザイン変更 【SANGO】ブログの回遊率を改善!カテゴリ別人気記事&デザイン変更 SANGOで回遊率をもっと上げるために、人気記事ランキングをカテゴリー別にする方法を解説します。ランキングの数字もつけて、全記事がしっかり見えるようにスクロール可能なデザインに変える方法を紹介します!