「音楽×テクノロジー」の話題を中心に、DTM、iPhone・iPad・Mac、最新テック情報、ガジェット・書評レビューなんでも書きます。ガンガンいこうぜ!みんなの訪問を、全力で待ってます。

5.14.2018

Bloggerでサイトマップに全記事を自動で表示させるやり方って話

閲覧回数

Bloggerでサイトマップに全記事を自動で表示させるやり方って話

どうも。サウンドオルビス( @soundorbis )です。

いままで Blogger にサイトマップを表示させるスクリプト公開記事は、たくさんありました。

けれど全ての記事がサイトマップに表示されず、困ったことはありませんでしたか?

今回は、ブログ「意外と知らない事実や改善方法と生活の知恵」で紹介されていた「Bloggerでサイトマップ(記事一覧)を自動で作成する方法」を参考に、Blogger でサイトマップに全記事を自動で表示させる外部サービス「Blogger Table of Contents Demo」の使い方を、お伝えしていきます。

賢狼パニさん、garafu さん、ありがとう〜! Thanks a lot! 

「Blogger Table of Contents Demo」を使って、Bloggerに全記事サイトマップを表示させよう

Bloggersitemap3

blogger.toc(https://garafu.github.io/blogger.toc/index.html)

Blogger でサイトマップに全記事を表示させるには、外部サービスを使います。

海外のデベロッパー「garafu」さんが作った「Blogger Table of Contents Demo」

必要な項目に入力していけば、あっという間に自動で Blogger のサイトマップが完成します。

それでは、使い方をみていきましょう↓

「Blogger Table of Contents Demo」の使い方

Bloggersitemap4

HTML 入力ページ(https://garafu.github.io/blogger.toc/demo/index.html)

HTML 入力ページ先で、必要項目を入力していきます。手順は次の通り↓

  1. 各項目を入力しよう
  2. 「open window」をクリックして動作を確認しよう
  3. HTML を Blogger のページにコピペしてサイトマップページを作成しよう

です。1つずつ詳しい使い方を、解説していきます。

その1:各項目を入力しよう

入力すべき項目は、全部で 3 つです。

1.Enter your blog URLに入力しよう

Bloggersitemap6

まずは 1.Enter your blog URL. のYour Blog URL :に、あなたのブログURLを入力します。

入力するときの注意は、https:// を抜いたあなたのブログ URL を入力してください。

(例)× https://www.soundorbis.com → ○ www.soundorbis.com

2.Select list options.でカスタマイズしよう

2.Select list options. では、表示されるサイトマップをお好みでカスマイズすることができます。

  • sort → 並び順を変更する。
  • print type → 全記事の表示方法を変更する。
  • thumbnail → 記事のアイキャッチを表示させる。
  • published date → 記事が公開された日付を表示させる。
  • updated date → 記事が最終更新された日付を表示させる。
  • new post → 新しく更新された記事に「New」のマークを表示させる。

アイキャッチは表示が遅くなります。やらないほうが、無難です。

日付に関して時間を表示させたくない場合は、「HH:mm:ss」を削除しましょう。format は後から手入力で修正することもできます。

さほど難しくないので、とりあえずいろいろ試して自分好みにカスタマイズしちゃいましょう!

3.Select display style. でサイトマップの外観を設定しよう

次の 5 つの外観を選ぶことができます。

  • simple
  • white
  • tile emerard
  • tile steel
  • border

個人的には、もっとも見やすい「border」を選択しました。

その2:「open window」をクリックして動作を確認しよう

Bloggersitemap7

カスタマイズしたものの動作を確認しましょう。

画像のように open window をクリックします。

別窓ウィンドウが開き、サイトマップが表示されるはずです。もしもカスタマイズが気に入らない場合は、戻って入力を変更して見¥みましょう。

ゴールは目前です。頑張ってください!

その3:HTML を Blogger のページにコピペしてサイトマップページを作成しよう

Bloggersitemap8

生成された HTML を選択して、コピーしてください。

Blogger の管理画面に戻ります。

Bloggersitemap9

左側の「ページ」をクリックして「新しいページ」を作ってください。

Bloggersitemap10

エディットモードは「作成」ではなく、HTMLを選択してください。

ページのタイトルはサイトマップと記入。

生成された HTML を、コピペして公開保存しちゃいましょう。

はい。以上です。お疲れさまでした!

実際にBloggerでサイトマップに全記事を表示させてみた

Bloggersitemap5

soundorbis.com のサイトマップページ

こんな感じで、あなたの Blogger にも全記事サイトマップに表示させることができましたか?

特別なスクリプトを書き込まず、外部サービスを利用することで簡単に表示させることができるんです。嬉しいですね。

「Blogger Table of Contents Demo」を使うときには、デベロッパーの「Grafu」さんに百万回の「ありがとう」を言ってからにしましょう。

まとめ

いかがだったでしょうか?

あなたも「「Blogger Table of Contents Demo」の使い方 - その1:各項目を入力しよう」に戻って、全ての記事をサイトマップに表示させちゃいましょう。

Google 検索でブログ評価を上げるためにも、しっかりとサイトマップを作成しておきましょう。SEO 対策は小さな積み重ねですからね。

 

それでは、あなたの人生にドラマを!

サウンドオルビス(@soundorbis)でした。

↓10万回再生されたフリーBGM公開中↓

↓ おなじ話題をもっと読む ↓

このブログを書いてる人
soundorbis
サウンドオルビス -フリーBGMアーティスト-

ブログ・音楽・VTuberなど好きなコトで生きていく情報を毎日、発信しています。あなたのクリエイティブを応援するぞ!詳しいプロフィールは ⇨ こちら

soundorbis 公式アカウント

関連する記事

パワープッシュリンク