読者の悩み
- SANGOでサイトマップを作りたい
- でもどうやって作ればいいか分からない
- コピペで簡単におしゃれなサイトマップを作れたらなぁ・・・。
そんな悩みを解決します。
サイトマップは意外とアクセスがあるページです。
maipyon
直帰率も低いので優秀。
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を紹介します。
/*サイトマップ*/ .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
ショートコードでほとんどを終わらせてます。
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
記事ごとにマウスホバーしたらURL遷移先が表示されるかと思いますが、そこにあるpost=〇〇の部分の数字を記事IDに入れましょう。
たったこれだけで完成するので、こちらの方が簡単ですね。
SANGOでおしゃれなサイトマップを作って回遊してもらおう
おしゃれなサイトマップを作成する方法を紹介しました。
このサイトマップですが、工夫次第ではトップページでも使えそうです。
アレンジは人それぞれなので、自由に活用してみてください。
PVを増やしたいならこちらもどうぞ


