【ブログ超初心者、始めたばかりの人用】HTMLサイトマップのわかりやすい作り方

HTML形式のサイトマップのわかりやすい作成方法 Cocoon設定方法

SASUKE父です。

前回は私のブログをGoogleの検索エンジンが早く見つけてくれるよ用にGoole Suarch Console の登録とXMLサイトマップの作成をしました。

Goole Suarch Console の登録の記事はこちら

XMLサイトマップの作成の記事はこちら

これらはGoogleの検索エンジンに早く気付いてもらうための手段でした。

それと同じくらい大事なことの一つに、見に来てくれた皆さんに、少しでも見やすくするために目次を作ることがあります。

せっかく、縁があってこの記事を見に来てくれた、皆さんに対して少しでもわかりやすくサイトを紹介することも大事なことです。

その一つがHTMLサイトマップになります。

スポンサーリンク

HTMLサイトマップの作成方法

いくつかの手順があるので順を追って説明します。

Ps Auto Sitemapをインストールします。

Word pressにはXLMサイトマップと同様に「PS Auto Sitemap」というプラグインをインストールすることで簡単に作成することが出来るそうです。

下の画像の通りやってみてください。

Word pressのダッシュボード(左側)から

プラグインをクリックして下さい。

新規追加をクリックして下さい。

③「Ps Auto Sitemap」を入力または貼り付けする。

※この時、単語ごとにスペースを空けてください。私の場合、PsAutoSitemapと続けて入力したら検索されませんでした。

⑥「今すぐインストール」をクリックして下さい。

今すぐインストールがあったボタンが有効化に変わるので、有効化をクリックして下さい。

プラグインの設定は以上になります。

色々な設定が出来るようですが、私のような初心者はいったん手を付けずに先に進もうと思います。

(同時進行でやっているので、もし続ける中で設定が必要そうなら尽かしたいと思います。)

サイトマップが表示できるように設定します。

私の場合、Ps Auto Sitemapをインストールするだけでは、サイトマップが表示されませんでした。

みなさんもそうなら、下の画像の通り操作してみてください。

WordPressのダッシュボードから

設定をクリックして下さい。

Ps Auto Sitemapをクリックして下さい。

③下にスクロールしてください。

④の部分をコピーして下さい。

 

次に

①ダッシュボードの固定ページをクリックして下さい。

新規追加をクリックして下さい。

好きな文字を入力して下さい(私はサイトマップにしました。)

好きな英語を半角で入力してください。(私はsitemapにしました。)

テキストにして下さい。

先ほどコピーしたものを貼り付けて下さい。

※⑤の操作をせず、ビジュアルのままで貼り付けてもサイトマップは出来ません。

公開をクリックして下さい。

もう少し頑張りましょう

次に

①ダッシュボードの固定ページをクリックして下さい。

固定ページ一覧をクリックして下さい。

編集をクリックして下さい。

上の数字を覚えてください。(この数字は皆さん違うそうです。

ラストスパートです。

ダッシュボードから

設定をクリックして下さい。

Ps Auto Sitemapをクリックして下さい。

先ほどの数字を入力してください。

下にある変更を保存をクリックして下さい。

これで、サイトマップの作成は完成です。

HTMLサイトマップをどのように表示するか?

今私のブログは新着順に記事が表示されている状態です。

今回サイトマップを作ったことで、トップページを下の画像のようにすることが可能になりました。

サイトマップ画面

作成したサイトマップの画面です。

サイトマップにした場合、カテゴリーごとに記事の一覧が出てきます。

私のようになんでも適当に書いているブログはこちらの方が、記事を探しやすく、見に来てくれた人には親切かもしれません。

これについては好みになると思います。

なので今回は、ヘッダー(タイトルロゴの下)、スマホ、フッター(サイト最下部)にサイトマップを作る方法の説明をします。

メニュー作成方法

まずはダッシュボードの画面から下の画像の通り操作して下さい。

外観をクリックして下さい

メニューをクリックして下さい

新規メニューを作成をクリックして下さい

④好きな文字を入力して下さい。今回私はヘッダーメニューにしました。

メニューを保存をクリックして下さい

サイトマップにチェックを入れくて下さい(私はサイトマップにしましたが、皆さんが違う名前にしている場合はその名前になります。)

メニューを追加をクリックして下さい

次に

サイトマップをどこに表示するか

サイトマップをどこに表示するか選択します。

①上の画像を参考にして、どこにサイトマップのメニューを置くか選択します。

私は一応全部にチェックをいれました。そのためサイト上では上部と下部に1つずつサイトマップのメニューが入ることになります。

変更を保存をクリックして下さい

これでメニューの表示は完成です。

一度サイトを表示してみてください。

ヘッダーにサイトマップのメニューが入った画像

上のような感じで表示されていれば完成です。

ただ、私の場合は文字が白くなっていてサイトマップと背景が同じ色で文字が見れない状態でした。

皆さんも同じだった場合は次の項目を参考にしてください。

Cocoon設定を確認しましょう。

ここからは私自身が最初わからずに色々とヘッダー部分を変更してしまっているので、変更することになりましたが、もしかすると皆さんの場合は上の状態でもう、完成しているかもしれません。

その場合はこの項目を飛ばしてください。

ヘッダー部分の設定

下の画像の通り進めてください。

ダッシュボードから

Cocoon設定をクリックして下さい

Cocoon設定をクリックして下さい

ヘッダークリックして下さい

次に下にスクロールしてグローバルナビ(メニューの部分)の設定を変更します。

①背景の色を選択して下さい。

②文字の色を選択して下さい。

これでヘッダーの編集は完了です。

フッターの編集方法

フッターにも表示するを選んだ場合フッターの編集も出来ます。

初期設定の場合、サイトマップ(私の場合)は下の画像のように右端に表示されます。

Cocoonフッターメニュー 右端にある状態

これで良ければOKですが、中央にしたい場合はフッターの設定が必要になります。

まずは上の画像のように

Cocoon設定をクリックして下さい

Cocoon設定をクリックして下さい

フッターをクリックして下さい

次に下にスクロールして

Cocoonフッターメニュー 中央揃えにする方法

□の部分を変更して下さい。今回は中央ぞろえにします。

変更したら、上部と下部にある変更を保存をクリックして下さい。

サイトを表示してみてください。

フッター部分のサイトマップが中央になりました。

このように中央になっていれば完成です。

まとめ

ブログを書きながら同時進行でサイトマップを作成しましたので、出来るはずですが、文章力の無さで皆さんが迷ってしまったら申し訳ありません。

私自身、パソコンを触るのは嫌いではありませんが、ブログは全く初心者なので試行錯誤中です。

今回で自分自身レベルアップ出来てうれしいです。

皆さんも一緒にレベルアップしましょう!

ご覧いただきありがとうございました。