初心者html::サイトマップ｜noindex タグ｜＜ｐ＞と＜ｄｉｖ＞｜スライドショー｜ウィジェット


　サイトマップを作るために色々調べました。

ＡＩに作ってもらったり、自動作成ページのプログラムを作って貰ったりしました。

そのページにリンク貼ろうかと思っていましたが、見栄えが良くないので整えようかと思います。

綺麗に仕上がったら持ってきます。。

あと、スライドショーも調べたので加筆しました。

初心者の備忘録ですので、参考までに。

　

１：　noindex タグ原因

　search consoleでの、「送信された URL に noindex タグが追加されています」

取り敢えず、うちのサイトでは直ぐに原因を特定できました。解決法は以下の部分にチェックを入れただけでした。

以下は、このブログの場合の１つの方法をご紹介いたします。過去記事で現在の状況と違う可能性がありますが、参考になりましたら嬉しい限りです。

直ぐに原因が分かったのは何故かというと、サーチコンソールのページ上の

「送信された URL に noindex タグが追加されています」

というエラーメッセージです。。

同じテンプレ・同じプラグインのサイトを複数作っているので、

他の複数のサイトを確認してみるとチェックが入っていたから・・というのと、

サイトマップをプラグインによって送信をした時期だったので・・、たまたまです。

「XML Sitemap Generator for WordPress」というプラグインを使って

似たようなことをされた方は、以下のように設定を確認してみてくださいませ。

「送信された URL に noindex タグが追加されています」ですが。。

上記の　プラグインの設定画面にて

↓

「

Try to automatically compress the sitemap if the requesting client supports it.
Disable this option if you get garbled content or encoding errors in your sitemap.

（要求元のクライアントがサイトマップをサポートしている場合は、サイトマップを自動的に圧縮してみてください。
サイトマップで文字化けしたコンテンツやエンコードエラーが発生した場合は、このオプションを無効にしてください。）」

に、チェックを入れました。それだけです・・

　

２：　サイトマップが最初からあると思わしきサイト｜必要がない場合　

　WordPress、Wix、Blogger 、baserCMSなどの CMS を使用している場合は、CMS によって検索エンジンが利用できるサイトマップがすでに用意されている可能性があります。ご使用の CMS によるサイトマップの自動作成方法や、CMS がサイトマップをデフォルトのままでは自動作成しない場合に自分で作成する方法について、情報を検索してみることをおすすめします。Wix であれば、「wix サイトマップ」、Blogger であれば、「Blogger RSS」などと検索します。

「サイトマップにウェブページの URL のみを指定する場合は、1 行につき 1 つの URL を記載した一般的なテキスト ファイル形式で Google に送信できます。」とあり、「https://www.example.com/sitemap.txt」というＵＲＬアドレスでテキストファイルにURLを１行に１つ書いたものがあればいいみたいです。分からなければ最悪、こうしようかと。

参考：サイトマップの必要がない場合の例について

  • サイトが小さい（データやページ数が少ない）
  • すべてのページにリンクがされていて、全部見ることができる場合

しかし、上記の通りでも以下の場合は作っておく方が良いです。

サイトが新しく、外部からのリンクが少ない場合。ーーGooglebot などのウェブ クローラーは、ページからページヘリンクをたどることによってウェブをクロールします。その結果、Googlebot が他のサイトからリンクされていないページを検出できない可能性があります。

３：　「XML Sitemap Generator for WordPress」というプラグインについて


サイトのページごとに以下のようにＵＲＬ（4行目）、更新日（5行目）を記述されています。

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <url>

    <loc>https://www.○○○○.com/ooo.html</loc>

    <lastmod>2024-06-04</lastmod>

  </url>

</urlset>


「Google は、＜lastmod> 値が一貫して正確であることを（ページの最終更新との比較などにより）検証できる場合に、この値を使用します。」とあるので、

更新する時に過去の日付に変えてしまっては意味がなくなるのかと。

アクセス解析でエラーになったりするかもしれません。


　

４：　スライドショー｜ウィジェットのタグ（コピペで）

　通常はJavaScriptを使うと思いますが、htmlとCSSだけで（コピペで）できる方法がありました。
（しかし、私のサイトでは無理でした。試しに適当なｈｔｍｌファイルを作ってみたら普通に表示されたので、
タグには落ち度がなく、調べて気になったのはテーマで「呼び出せない」などという回答があったので
JavaScriptでないと絶対にスライドショーの出来ないデザイン・仕様だったのでしょう。）

同じ方法をコピペしても申し訳がないので、リンク先ＵＲＬを下の方に残しています。

（リンク可能であれば貼っておきたいと思いますが、問い合わせする気力があれば聞いてみます）

ウィジェットの編集は、style.cssの中では以下のような部分で、

.bs-widget-area
など。


テーマによって違うかもですが、さくらのサーバーの例は、

  • - config.css --- テーマ設定でメインカラーやサブカラーを設定する為に利用
  • - editor.css --- 管理画面のWYSIWYGエディタ上で参照する為に利用
  • - bge_style.css --- 「BurgerEditor」プラグインを利用する場合に管理画面の表示を最適化するために利用
  • - style.css --- フロントで参照する為に利用

でした。
とてもわかりやすかったです。ありがとうございました。

　他、「wrapper」の意味は包むとか囲むという感じだったので「サランラップ」をイメージして覚えようと思います。

初心者向けには厳しいですが、時間あるときに画像付きの説明をアップできたらと思います。

htmlだけでの方法もありました！

スライドショーではなくて、右から左へ動く画像でしたが。。

「<marquee>文字や画像</marquee>」というタグです。


　　

５：　トップへ戻るボタンをつけたいが・・今のところ無理

　JavaScriptはよく分からないので時間が沢山かかってヘトヘトになるので、
HTMLとCSSの方法を探しました。。

コピペで出来るというサイトは結構あるみたいですが・・、コピペでやってみると全部の方法が全く出来ませんでした。
説明してくださっているサイトでは可能なのでしょうけど、baserＣＭＳなのかテーマやテンプレの問題があるのか

前回もスライドショーとか出来なくて、テーマ・テンプレ以外のテキストのみのｈｔｍｌファイルを作ったら出来たので
今回も無理そうです。もし出来た場合は追記します。

　自分の行った方法ですが、失敗例になるかもしれませんので覚書を残します。
ＣＳＳのコードは、
ＦＴＰファイルマネージャー　＞　貼り付けたいサイトのフォルダ　＞　theme　＞　自分の使っているテーマのフォルダ　＞　ＣＳＳ　＞　style.css　のファイルに書き込み。
そして、ＨＴＭＬは
ウィジェットに張り付けています・・が、もしかしたら場所が違うのかもしれません。


　baserCMSでは初めから「ｔｏｐへもどる」ボタンの付いているテーマがあるので、わからない場合それを使うのが吉かもです。殆どのサービスでもテーマ・テンプレートで「機能があるものを使う」のが簡単ですね。。

　　

６：　＜ｐ＞と＜ｄｉｖ＞タグについて｜参考・終わり

　＜ｐ＞と＜ｄｉｖ＞タグについて、よくわからないまま使っていたのですが、最近分かったこと。

  • ＜ｐ＞は中に＜ｕｌ＞＜ｏｌ＞＜ｄｉｖ＞＜ｈ１＞などが使えません。段落の意味があり、（改行タグではないそうです）、閉じカッコはなくても平気です。
  • ＜ｄｉｖ＞（ディブ）は、中に＜ｕｌ＞＜ｏｌ＞が使えます。要素の意味になり、グループ化が出来るので画像や段落・テーブルも含められます。閉じ括弧が必要なタグです。閉じカッコなしだとbloggerでは「作成ビュー」で編集が出来なくなります。これを直さないとエラーとなり「コンテンツが無効」になると書いてありました。

以上、自分自身の為の覚書みたいなものですが・・
どなたかの参考になればうれしいです。

ここまで読んで頂きありがとうございました。

いかがでしたでしょうか。

良かったら気が向いた時にでもまた覗いてやってくださいませ。

よろしくお願い致します。

参考サイト：

ページトップへ戻るボタンをHTMLとCSSのみで実装する方法/Rilaks
https://rilaks.jp/blog/pagetop-css/

tl-marketing.jp https://tl-marketing.jp › column › hp › 20250603-1380 htmlのdivの使い方と構造を徹底解説!初心者でもわかる基本と ...
Googleサイトで作ったページのサイトマップ

https://support.google.com/webmasters/thread/21353486/

コピペで簡単！HTMLでスライドショー作成 ボタンをつける方法も解説

【コピペOK！】HTMLページの「トップに戻る」ボタンの作り方
DMM WEBCAMPhttps://web-camp.io › magazine › archives › 93605

カテゴリー: HTML＆ＣＳＳ 入門ガイド/Designup designup.jp
https://designup.jp/html-slider.html

html タグだけでスライドを作る！ | keiのブログameblo.jp
https://ameblo.jp › mimicocoaus2000 › entry-12492845131.html

簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き）ウェブ制作会社ベイジ
https://baigie.me › officialblog › 2021 › 02 › 25 › css-tips-1

【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ ..株式会社BRISK
https://b-risk.jp › blog › 2021 › 01 › anim-reference .

ドロワーメニュー - 動くCSSのためのメモ。 - Lopan.jp
Lopan.jphttps://lopan.jp/css-animation/drawer　－－ここが一番わかりやすかった

ウィジェットエリアのスタイル変更 WEBサイト制作 解決済
https://forum.basercms.net/t/topic/700/2

Bootstrapで高速でレスポンシブなサイトを構築
https://getbootstrap.com/

Wrap Box - Epic Games Developers/Epic Games Developers
https://dev.epicgames.com › documentation › ja-jp › unreal-engine › wrapping-umg-widgets-in-unreal-engine

コメント

コメントを投稿

読んで頂きありがとうございます。
お気軽にコメントして頂けると嬉しいです。
返事は９０％くらいお返ししますが、めちゃくちゃ遅い場合があります。
気長にお待ちください。

このブログの人気の投稿

tuta:::暗号化メールの登録方法｜ブロックの原因｜複数アカウント｜エイリアス｜

イメージ
　2025年、新規登録は格段にスムーズになっています。しかし、うまくいかない時は以下の方法が確実です。 複数のアカウントは、有料の契約であれば作成は出来るが無料アカウントは１人につき１つだけに限られているとの事。 　後日談：2024年4月頃に、2つ目のアカウントを登録しようとしたら・・普通に申込フォームでは出来ませんでした！！ アカウントの作り難さは全く変わっていない様子です！なので、以下は参考になると思います。 　ドイツ製の暗号化メールtuta（ツタ・tutanota・ツタノタ・トゥータノータ)メールは 「全文検索」出来るとのことで（protonmail でも出来る様になりました。 は出来ない、又は有料（高額なプラン）かもしれません） 使ってみたくてスマホから登録してみましたが。（アプリで登録しようとしてもブラウザに飛びました。直近の情報） 色々問題もあったのですが、ブロックも解決したのでその方法と、 登録する為に調べたこと・少し使って気になった事を備忘録として残します。。 （申し訳ないですが・・この記事には細かい手順は参考程度しかありませんが。。） 私と同じくあまり詳しくない人に・・、参考になりましたら幸いです。 目次 　　 １：　新規登録でブロックされた・確認・原因 　　 ２：　複数アカウント・複数アドレス（エイリアス）は？ 　複数アカウントは可能？ 　エイリアスメール（複数アドレス）の方法 　複数のアドレスを統合する方法 　 ３：　検索した結果：解決方法 　　 ４：　取得できるメールアドレス（ドメイン）一覧 　　 ５：　料金プラン・参考・終わり 　　　 　 １：　新規登録でブロックされた・確認・原因 　後日追記：おそらく、運営までメールしないことには新規の登録は 出来ないみたいでした。 す 。かくいう自分は、メールをして数時間後に開通出来ました。 できた方法は、当初は他の記事でしたが、ブログ引っ越し中で重複してしまい そっち（他の記事）は下書きに戻し、重複にならない様にこの記事にまとめました。 自分が成功した一つの方法は、簡単に言うと運営の会社へメールでお願いすれば ...
Read more »

protonmail::メールアドレス変更｜複数アカウント｜届かない原因｜パスワード忘れ｜

イメージ
　複数アカウントは運営に問い合わせたこともあり、Ｑ＆Ａなども何度か確認していますが、何年も前から禁止されてないので可能です。けど、有料アカウントでエイリアス使う方が安全度が増すのは確実で、使い捨てメールがいくつでも作れます。子会社のSimpleLoginというエイリアスメールも沢山作れて便利です。 あと、さっき気付いたのですが、2024年9月の時点では「友達を紹介」して、最大ＵＳ＄９０のクレジットが付与されるそうです。 これも有料アカウントだから？ （以前、紹介したことあったんですけど、その時は無料で使っていたせいか、こんな制度は数年間で一度もなかった・・） 随分と調べたのでまとめて覚書備忘録を残しています。 目次 　　 １：　protonmailのメールアドレス変更｜新しいデバイスの追加・機種変　　 　　 ２：　有料プラン｜支払い方法について｜サイトのヘルプ 2-1　有料プラン 2-2　支払い方法について 　 　 ３：　アカウント２つの使用感｜何台まで｜複数の設定｜ログイン失敗 　　 3-1　２つのアカウントを使っての使用感（複数アカウント） 3-2　何台まで使える？複数のデバイスの設定 3-3　ログインで失敗｜パスワードリセット 　 ４：　protonmail で、メール一斉配信で届かない場合｜VPNの場合と比較 4-1　protonmail で、メール一斉配信した場合 4-2　VPNの場合と比較 　 ５：　全文検索・参考・終わり 　　　 　 １：　protonmailのメールアドレス変更｜新しいデバイスの追加・機種変 　protonmailのメールアドレス変更をしたいと思ったのですが・・なんかややこしそうだと思って、変更しないと困ることも何もなかったので、ずっと後回しにしていました。 時間があった時、その方法について調べましたが未だによく分からないので、記事に残したいと思います。 散々、設定を弄ったりヘルプを見た感じでは、公式な方法はありませんでした。 なので、もう一つアドレスを作ってしまう（...
Read more »

フォートナイトのアカウント::ブロック｜ミュートの方法｜みまもり設定のリセット｜

イメージ
　Fortniteでフレンドから誘われても気分が乗らない・一人でプレイしたい時などに、人間関係もあって断るのが難しい場合の話です。 一時的に「ブロックは？」「ミュートは？」とか時々話していたのですが、 「そこまでしたくない」「バレる」とか言われて、本人からは何度も却下されましたけど。。。 相手が「嫌い」という訳ではなく、「良い子だったんだけどな～」と悩んでいたので フォートナイトは設定のメニューが少ないのかな？と思っていました。 （当人はＬＩＮＥ（ライン）とかは感心するほど設定や使い方を色々と知っていて、 逆に裏技の様な方法を教えてくれるほど使いこなしているので、分からないとは全然思えなくて） そこで、パソコン版の画面ならば、何かあるのではないかと調べました。 それにしても、ゲーム中にケンカとかも結構あるみたいなので「ブロック」「ミュート」は必要不可欠な筈なのですが。。 うちのうるさい子供は「死体打ち」「通報」と、物騒な言葉でキーキー言っていましたけど。。 引き続き、良い方法があればと調査中です。 　フォートナイトはリニューアルというのか、画面のデザインやメニューも結構変わってしまったらしく、知恵袋を見ていても「古い情報しかない」という意見も多かったので、今の調べた中では新しい方法のみ（２０２４年秋の時点）覚え書きを置いておきます。 目次 　 １：　オンラインステータス｜離席 ２：　設定｜ソーシャル通知の表示をオフ（と、裏技？） ３：　epicgamesの公式サイトのブロック・ミュート方法 ４：　名前変更後、フレンドを切るという方法 ５：　みまもり設定のリセット｜終わり｜参考サイト：　 １：　オンラインステータス｜離席 　オンラインステータスを「オフライン」表示にする 　離席状態だとオフラインと同じような見え方になるそうです。 「基本中の基本」な方法だそうです。ほかの方法は一応、分けました。 ２：　設定｜ソーシャル通知の表示をオフ（と、裏技？） 　設定　＞　アカウント　プライバシー　＞　ソーシャル通知を表示をオフ この設定「ソーシャル通知表示をオフ」と、 上記の「１．離席」 を同時に２つ行う（以下「オフライン表示★」）とオフライン表示に...
Read more »