HTMLのサイトマップの作成方法をわかりやすく紹介します。2019.02.24SASUKE父です。登録とXMLサイトマップの作成をしました。これらはGoogleの検索エンジンに早く気付いてもらうための手段でした。それと同じくらい大事なことの一つに、見に来てくれた皆さんに、少しでも見やすくするために目次を作ることがあります。縁があってこの記事を見に来てくれた、皆さんに対して少しでもわかりやすくサイトを紹介することも大事なことです。その一つがHTMLサイトマップになります。過去のCocoonの設定方法の記事の一覧はこちらです。よろしければご覧ください。pressのCocoonで迷って調べた物の一覧。Sitemapをインストールします。サイトマップが表示できるように設定します。HTMLサイトマップをどのように表示するか?メニュー作成方法Cocoon設定を確認しましょう。ヘッダー部分の設定フッターの編集方法まとめ共有:関連HTMLサイトマップの作成方法いくつかの手順があるので順を追って説明します。Sitemapをインストールします。Sitemap」というプラグインをインストールすることで簡単に作成することが出来るそうです。下の画像の通りやってみてください。pressのダッシュボード(左側)から1プラグインをクリックして下さい。2新規追加をクリックして下さい。Sitemap」を入力または貼り付けする。※この時、単語ごとにスペースを空けてください。私の場合、PsAutoSitemapと続けて入力したら検索されませんでした。6「今すぐインストール」をクリックして下さい。7今すぐインストールがあったボタンが有効化に変わるので、有効化をクリックして下さい。プラグインの設定は以上になります。色々な設定が出来るようですが、私のような初心者はいったん手を付けずに先に進もうと思います。(同時進行でやっているので、もし続ける中で設定が必要そうなら尽かしたいと思います。)サイトマップが表示できるように設定します。Sitemapをインストールするだけでは、サイトマップが表示されませんでした。みなさんもそうなら、下の画像の通り操作してみてください。WordPressのダッシュボードから1設定をクリックして下さい。Sitemapをクリックして下さい。3下にスクロールしてください。4の部分をコピーして下さい。次に1ダッシュボードの固定ページをクリックして下さい。2新規追加をクリックして下さい。3好きな文字を入力して下さい(私はサイトマップにしました。)4好きな英語を半角で入力してください。(私はsitemapにしました。)5テキストにして下さい。6先ほどコピーしたものを貼り付けて下さい。※5の操作をせず、ビジュアルのままで貼り付けてもサイトマップは出来ません。7公開をクリックして下さい。頑張りましょう次に1ダッシュボードの固定ページをクリックして下さい。2固定ページ一覧をクリックして下さい。3編集をクリックして下さい。上の数字を覚えてください。(この数字は皆さん違うそうです。)ラストスパートです。ダッシュボードから1設定をクリックして下さい。Sitemapをクリックして下さい。3先ほどの数字を入力してください。4下にある変更を保存をクリックして下さい。これで、サイトマップの作成は完成です。HTMLサイトマップをどのように表示するか?今私のブログは新着順に記事が表示されている状態です。今回サイトマップを作ったことで、トップページを下の画像のようにすることが可能になりました。作成したサイトマップの画面です。サイトマップにした場合、カテゴリーごとに記事の一覧が出てきます。私のようになんでも適当に書いているブログはこちらの方が、記事を探しやすく、見に来てくれた人には親切かもしれません。これについては好みになると思います。今回は、ヘッダー(タイトルロゴの下)、スマホ、フッター(サイト最下部)にサイトマップを作る方法の説明をします。メニュー作成方法まずはダッシュボードの画面から下の画像の通り操作して下さい。1外観をクリックして下さい2メニューをクリックして下さい3新規メニューを作成をクリックして下さい4好きな文字を入力して下さい。今回私はヘッダーメニューにしました。5メニューを保存をクリックして下さい6サイトマップにチェックを入れくて下さい(私はサイトマップにしましたが、皆さんが違う名前にしている場合はその名前になります。)7メニューを追加をクリックして下さい次にサイトマップをどこに表示するか選択します。1上の画像を参考にして、どこにサイトマップのメニューを置くか選択します。私は一応全部にチェックをいれました。そのためサイト上では上部と下部に1つずつサイトマップのメニューが入ることになります。2変更を保存をクリックして下さいこれでメニューの表示は完成です。一度サイトを表示してみてください。上のような感じで表示されていれば完成です。私の場合は文字が白くなっていてサイトマップと背景が同じ色で文字が見れない状態でした。皆さんも同じだった場合は次の項目を参考にしてください。Cocoon設定を確認しましょう。ここからは私自身が最初わからずに色々とヘッダー部分を変更してしまっているので、変更することになりましたが、もしかすると皆さんの場合は上の状態でもう、完成しているかもしれません。その場合はこの項目を飛ばしてください。下の画像の通り進めてください。ダッシュボードから1Cocoon設定をクリックして下さい2Cocoon設定をクリックして下さい3ヘッダーをクリックして下さい次に下にスクロールしてグローバルナビ(メニューの部分)の設定を変更します。1背景の色を選択して下さい。2文字の色を選択して下さい。これでヘッダーの編集は完了です。フッターの編集方法フッターにも表示するを選んだ場合フッターの編集も出来ます。初期設定の場合、サイトマップ(私の場合)は下の画像のように右端に表示されます。これで良ければOKですが、中央にしたい場合はフッターの設定が必要になります。上の画像のように1Cocoon設定をクリックして下さい2Cocoon設定をクリックして下さい3フッターをクリックして下さい次に下にスクロールして□の部分を変更して下さい。今回は中央ぞろえにします。変更したら、上部と下部にある変更を保存をクリックして下さい。サイトを表示してみてください。このように中央になっていれば完成です。まとめブログを書きながら同時進行でサイトマップを作成しましたので、出来るはずですが、文章力の無さで皆さんが迷ってしまったら申し訳ありません。私自身、パソコンを触るのは嫌いではありませんが、ブログは全く初心者なので試行錯誤中です。今回で自分自身レベルアップ出来てうれしいです。皆さんも一緒にレベルアップしましょう!ご覧いただきありがとうございました。人用】わかりやすいCocoonのタイトル画面のロゴのサイズや画像を変更したい。超初心者やブログ始めたての人用の、Cocoonタイトルロゴのフォント変更方法です。超初心者用にわかりやすく画像付きで説明しています。設定しながら記事を書いたので、同じようにすれば確実に出来ますので、頑張って挑戦してみましょう。adsenseの登録申請方法です。Cocoonでのコードの貼付け方法もこれをみれば迷うことはありません。ほかのテーマの貼付け方法も勉強したので紹介します。超初心者用のCocoonの目次の作り方です。私のような素人で作り方がわかるように説明していますので、目次が作れなくて困っている方は是非チェックしてみてください。一緒に楽しくブログが作れるようになりましょう。Cocoon設定方法Cocoonの文字装飾ができない方向け、解決方法紹介!wordpressのcocoonで文字装飾が出来ない人のための、設定方法の紹介です。原因はビジュアルエディターを強化するために入っているプラグインです。プラグインを停止するだけで文字装飾が出来るようになるので、できない方は是非設定しましょう。超初心者、始めたばかりの人用、要注意!わかりやすいパーマリンク編集方法です。パーマリンクはシンプルに人がわかりやすいようにするのが特徴ですが、それ以上に最初の段階で編集することが大事になってきます。編集方法を素人目線で教えます。pressのCocoonのスタイルの簡単改行方法wordpressのcocoonでスタイルのボックス内の改行方法を紹介します。普通にENTERで改行してしまうと、一つのボックス内に文章を入れることが出来ません。SHIFT+ENTERで改行することでボックス内の改行をすることが出来ます。スポンサーリンク【超初心者用、始めたばかりの人用】わかりやすいCocoonのタイトル画面のロゴのサイズや画像を変更したい。自然食バイキング・パークサイドキッチン桜亭に行ってきました。一攫千金!ポケットハッシュ半月経過レポート1ローリスクの長期投資FX自動売買GAINSKY。不労所得】おすすめGAINSKY登録方法紹介!FX自動売買のGAINSKY。わかりやすくシステムと投資方法を紹介します。一攫千金!ポケットハッシュ半月経過レポート1ローリスクの長期投資FX自動売買GAINSKY。不労所得】おすすめGAINSKY登録方法紹介!FX自動売買のGAINSKY。わかりやすくシステムと投資方法を紹介します。ディズニーランド騎士竜戦隊リュウソウジャ。