WordPressの質問（q10226736）の続

質問

➀
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

➁
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

➂
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

下記のHTML クラスで CSS を書きたいのですが、
➀➁のクラスを2つ分ける方法と➂のまとめて書く方法どちらを選択すべきでしょうか？
頻繁に書き換える場合 classList を使ったほうが良いとのことでどちらが良いか悩んでおります。

・title-partial {

}

回答No.20

dell_OK · ベストアンサー

・➀行目はどのようなコードになるのでしょうか？

質問の意味がわかりません。
コメントに書かれている通りのことです。

他のところにもあります。
200行目　for (let i = 0; i < parts.length; i++) {
229行目　for (let i = 0; i < attach.length; i++) {

・➈blobUrl[i]というコードはバイナリファイルをURLにする目的で書かれたものでしょうか？
DataURL と BlobURL があるようで何故 BlobURL になったのか知りたいです。

私は覚えていません。
質問者さまが決められたのではなかったですか。

「※DataURIとBlobURLの違い」を見て思いましたが、
Base64を使いたくないとか言われていなかったでしょうか。

そもそもアップロードファイルと同じものです。
411行目　changeImg.src = blobUrl[i];

お礼

こちらが最新の質問になります。
回答が遅れてしまい申し訳ありません、dell_okさんに事前に伝えておくべきでした。

回答の期限が切れてしまった為下記のリンクからアドバイスお願い致します。

https://okwave.jp/qa/q10245849.html

補足

回答ありがとうございます。遅れてしまい申し訳ありません。
Base64を使わずにバイナリーデータを調べる方法をとっていたのを忘れておりました。
結果画面まで作成致します。

回答No.9

dell_OK

・スタンプ画像が表示されず原因が分かりません

原因は371行目がコメントになってラジオボタンが追加されていないからです。
その下のラベルの追加と同じように、divStampPartialにchildを追加するようにしてみてください。

お礼

確認画面を下記のように並べたところ名前列の空白スペースが寂しいので、任意でアップロード(アップロードされていない場合はダミー画像を表示)画像アイコンの項目を追加したいと考えております。
HTML と Javascript について考えてみたのですが、ファイルのアップロードと処理を分けるべきか悩んでおります。
カメラ画像とは別の画像を用意する予定なのですが、clear ボタンの部分は同じものを使いたい場合どうすれば良いでしょうか？
アドバイスお願い致します。

Q　質問する　　　　　　　　　STEP1入力＞STEP2確認＞STEP3完了

タイトル　　　　　　　　　　　　　　　　　　　　　スタンプ画像

画像アイコン　名前

メッセージ

アップロードファイル1　　アップロードファイル2　　アップロードファイル3

修正するボタン　　　　　　　投稿するボタン
___________________________________________________________

※tsst.php に該当コードを書きました。
https://wandbox.org/permlink/aBxewVORjRqoRYAB

補足

訂正ありがとうございます。見落としておりました…
修正したところ表示することが出来ました。
CSSを整えてから表示画面を作成する予定です。

※最新コード
https://wandbox.org/permlink/RzZtObkRnxhmSfNe

回答No.8

dell_OK

スタイルシートのことは詳しくないのでアドバイスできそうにありません。
私のローカル環境ではそれなりの位置に表示されています。
かぶさっているheaderの影響もあって、相性がよくないのかも知れませんね。
外に出したことが原因だとしたら、headerの要素と並列にならないよう、divを追加して階層をかえてみてはどうでしょうか。

現在のElements
～～～～
<div class="wrapper">...</div>
<div class="questionHeader-partial">...<div>
<div class="input_area">...<div>
<div class="confirm_area"><div>
<div class="result_area"><div>
～～～～

headerと階層の違うElements
～～～～
<div class="wrapper">...</div>
<div>
<div class="questionHeader-partial">...<div>
<div class="input_area">...<div>
<div class="confirm_area"><div>
<div class="result_area"><div>
</div>
～～～～

補足

Q.かぶさっているheaderの影響もあって、相性がよくないのかも知れませんね。
外に出したことが原因だとしたら、headerの要素と並列にならないよう、divを追加して階層をかえてみてはどうでしょうか。

A.アドバイスありがとうございます。divを追加して階層をかえてみたところ上手く並べることが出来ました。
元々<div id="input_area">内にあったコードを外に出してステップフロー画像まで囲うように変更いたしました。
HTMLの書き換えにあった sample.php の343行目コードを削除いたしました。

確認画面を表示することが出来たのですが、スタンプ画像が表示されず原因が分かりません…アドバイスお願い致します。
ディレクトリに置いているファイルを呼び出せていないのではないかと考えております。
現在下記のように表示されており stamp_value の中身が HTML の書き換え後に消失しているようです。
<div class="stamp-partial"><label for="confirm_stamp"></label></div>

※削除したコード
// class
const divBoardFormPartial = document.createElement("div");
// classの追加
divBoardFormPartial.classList.add("board_form_partial");
// idの追加
divBoardFormPartial.id = 'js_board_form_partial_div';

～～～～
<div class="wrapper">...</div>
<div class="board_form_partial" id="js_board_form_partial">
<div class="questionHeader-partial">...<div>
<div class="input_area">...<div>
<div class="confirm_area"><div>
<div class="result_area"><div>
</div>
～～～～

※最新コード
https://wandbox.org/permlink/UJlCxj75kDDM3mBX

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.7

dell_OK

・Javascript 側でクラスがページの主要な内容に影響を与えることができたら、アタッカーと同義になってしまうのでありえないということでしょうか？

いいえ。

「クラスがページの主要な内容に影響を与える」と言うのは、例えば、タイトルや質問文のフォントサイズを大きくするとか太字にするとか点滅させるとか、だと思います。
あくまで、スタイルシートのためのクラス、のことです。
今だと、質問画面と確認画面のクラスは同じにしようとしていましたよね。
つまり、スタイルシートも同じわけです。
クラスを変更していないのですから、何も影響も与えていないことになります。

アタッカーについては、検索エンジンは送信ボタンを押すようなことはしない前提で、もし送信ボタンを押すような検索エンジンがあったら、それはアタッカーと同じ行為だといったまでです。

補足

Q.「クラスがページの主要な内容に影響を与える」と言うのは、例えば、タイトルや質問文のフォントサイズを大きくするとか太字にするとか点滅させるとか、だと思います。
あくまで、スタイルシートのためのクラス、のことです。

アタッカーについては、検索エンジンは送信ボタンを押すようなことはしない前提で、もし送信ボタンを押すような検索エンジンがあったら、それはアタッカーと同じ行為だといったまでです。

A.解説ありがとうございます。本来の役割とは異なる動作をすることですね、理解出来ました。
__________________________________________________

上記とは別にアドバイスお願い致します。
ステップフロー画像の配置を動画・画像をアップロードの上に並べたい場合どうすればよいと思われますでしょうか？
修正前のコードでは下記のように input_form 内に questionHeader-partial があった為、position で並べることができたのですが、外に出たことによって header に被さるようになってしまいどのように css を書けばよいか分からない状態です…

<div class="board_form_partial" id="js_board_form_partial">
<form name="input_form">
<div class="questionHeader-partial">
<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>
<div class="other_step">
<img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step01.png" width="364" height="36" alt="STEP1 入力">
</div>
</div>

<style>
/* 質問掲示板ヘッダー配置位置 */
.questionHeader-partial {
position: relative;
height: 36px;
margin-bottom: 20px;
}

/* 質問掲示板ヘッダーステップバー */
.questionHeader-partial .other_step {
position: absolute;
top: 0;
right: 0;
}
</style>

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.6

dell_OK

ヤフー知恵袋と参考サイトを見てみました。
クラスはＳＥＯに関係なさそうですね。
ＣＳＳの作り方は何かしら影響はありそうですが、検索エンジンにかかる負荷を軽減させることでのポイントアップが目的のようです。
なのでクラスは思うように書いてよさそうです。

質問掲示板の質問投稿画面（ページ）は、検索エンジンには無視してもらう方がいいと思います。

このページは投稿者のみが見て書いて意味のあるページなので、それを他者が見ることはできません。
検索エンジンにも見れないですし、検索しても（誰かが投稿しようとしている最中の内容が）表示されるはずのないページです。
なので、検索エンジンが無駄にアクセスしにくるため、無視してもらう方法があるのならその方がいいと思います。

一方、質問掲示板の質問一覧画面（ページ）なら、そこに並んだ質問のタイトルや文章（またはその一部など）を検索エンジンに見てもらってインデックスに入れてもらった方が、ヒット率が上がるのでＳＥＯ対策する意味はあると思います。

上記の通りなのでこの質問投稿画面（ページ）でＳＥＯうんぬんを語ってもしかたありません。

なので蛇足になりますが。
ＡＩ回答にこうありますね。
「非同期通信で切り替えた後のクラスを検索エンジンに認識させるかどうかは、そのクラスがページの主要な内容に影響を与えるかどうかによります。」

もし仮に確認画面まで見れたとしても（いえ、そんなことは絶対にないので期待しないでください、それができたら「検索エンジンが入力欄に文字を入れて投稿ボタンを押す」と言うとんでもないアタッカーと同じことになりますから）、確認画面は質問画面と同じ内容なのでまったく影響を与えないことになります。
質問画面が見れたら確認画面を見る必要はないということです。

補足

Q.質問掲示板の質問投稿画面（ページ）は、検索エンジンには無視してもらう方がいいと思います。

このページは投稿者のみが見て書いて意味のあるページなので、それを他者が見ることはできません。
検索エンジンにも見れないですし、検索しても（誰かが投稿しようとしている最中の内容が）表示されるはずのないページです。
なので、検索エンジンが無駄にアクセスしにくるため、無視してもらう方法があるのならその方がいいと思います。

A.解説ありがとうございます。外部に見せる必要がない内容ということで理解できました。

Q.一方、質問掲示板の質問一覧画面（ページ）なら、そこに並んだ質問のタイトルや文章（またはその一部など）を検索エンジンに見てもらってインデックスに入れてもらった方が、ヒット率が上がるのでＳＥＯ対策する意味はあると思います。

A.解説ありがとうございます。確かに質問一覧ページは検索エンジンに見てもらう方がアクセスも上がりそうですね。回答者の画面も他者が見ることは出来ないため質問一覧画面を SEO 対策することが一番良さそうです。

Q.「非同期通信で切り替えた後のクラスを検索エンジンに認識させるかどうかは、そのクラスがページの主要な内容に影響を与えるかどうかによります。」

もし仮に確認画面まで見れたとしても（いえ、そんなことは絶対にないので期待しないでください、それができたら「検索エンジンが入力欄に文字を入れて投稿ボタンを押す」と言うとんでもないアタッカーと同じことになりますから）、確認画面は質問画面と同じ内容なのでまったく影響を与えないことになります。
質問画面が見れたら確認画面を見る必要はないということです。

A.解説ありがとうございます。Javascript 側でクラスがページの主要な内容に影響を与えることができたら、アタッカーと同義になってしまうのでありえないということでしょうか？

回答No.5

dell_OK

・partsクラスに関して理解が追いついていなかったのですが、負担になっているのであれば削除して別のクラス名を考えたほうが良さそうですね…

"namae-partial-parts"　と
"namae-partial parts"　が別物であることは理解いただけましたか。
"namae-partial-parts"　にすることで負担にはならなくなりますのでそれでもいいのです。

・SEO について詳しく調べてみたところハイフンでも効果はあるようでした。

いただいたＳＥＯの情報はＵＲＬに関するものなので、クラスには関係なさそうです。
クラスに関するＳＥＯの情報はありますか。

・今の parts を維持する方法か別のクラスを付け加えて名前、タイトル、質問文を1まとまりとして認識してもらう方法のどちらを選択しますでしょうか？

クラスに共通のものがあればひとまとまりとして認識されるのであれば、
namae-partial
title-partial
body-partial
に共通している　partial　の部分がその役割を果たしてくれるとおもいます。
もちろん、
image-partial
stamp-partial
これらも含まれます。

そうでなければ、ひとまとりにするために、その外側に　div　追加してもいいのではないでしょうか。

partial　とは「部分」とかの意味です。
parts　とは「部品」とかの意味です。
どちらにも共通している　part　に由来していると思います。
「一部」と言う意味なので、「全体ではない」ことを暗示しているとも考えられます。

「ひとまとめ」が「全体」と同じ意味になるので、そうなる　div　を追加すると言うことです。

確か、
～-partial　を付けた元コードと、
parts　を付けた元コードがことなる情報源だったと思うので、
たまたまこのような組み合わせになったのだと思いますが、
～-partial　の元コードの意図が不明なので、
それをはっきりさせたらＳＥＯに関係するのかも知れないですね。

その上で、もし外側divで括っていいのであれば、
そこにどのようなクラスを書いたらいいかを考えて、それでひとまとまりにしたいと思います。

お礼

申し訳ありません、参考サイトとしてもう１つ追加で確認お願い致します。

※参考サイト（SEO対策のためのCSSの正しい書き方）
https://appmart.co.jp/blog/seo-css/

補足

Q.いただいたＳＥＯの情報はＵＲＬに関するものなので、クラスには関係なさそうです。
クラスに関するＳＥＯの情報はありますか。

A.回答ありがとうございます、参考サイトを探してみたところ SEO には影響がないようでした申し訳ありません。
保守性・予測性の意味があるようです。法則に沿ってハイフンやアンダーバーが使われるようで、今回の場合 partial は必要ないと思われます。

※参考サイト
➀　https://web-manabu.com/html-css19/#1249512452125011253135352278616528812465124961250212465125401247365289

➁　https://rfs.jp/sb/html-css/html-css-guide/css-architecture.html

Q.partial　とは「部分」とかの意味です。
parts　とは「部品」とかの意味です。
どちらにも共通している　part　に由来していると思います。

「ひとまとめ」が「全体」と同じ意味になるので、そうなる　div　を追加すると言うことです。

その上で、もし外側divで括っていいのであれば、
そこにどのようなクラスを書いたらいいかを考えて、それでひとまとまりにしたいと思います。

A.アドバイスありがとうございます。元のコードが分からなくなってしまったのですが、おそらく画像、名前、質問タイトル、質問文、スタンプを選ぶ全てに partial が付いているためそれらを部分として、入力フォームを parts として書かれているのではないかと考えております。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

上記とは別に HTML の書き換えについて昨日ヤフー知恵袋に質問したところ AI から回答を頂きました。
確認、結果ページがSEOに影響を与える可能性は低いと思うのですが、Javascript でクラスを書き換えた後のコードを検索エンジンに認識させる必要はないと思われますでしょうか？

※抜粋
クラス名自体は検索エンジンに直接影響を与えませんが、そのクラスが適用される要素の内容や表示がSEOに影響を与える場合は、検索エンジンに認識させるべきです。

※ヤフー知恵袋からの回答
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12294811907

回答No.4

dell_OK

・parts は可能であればハイフンにして付け加えたいのですが、エラーになるのであれば削除する予定です。

エラーにはなりませんが削除した方がいいと思っていました。

コメントがウソになっているので直しておいてください。
－－－－
<div class="namae-partial-parts"> <!-- title-partial-parts -->
－－－－

もともとpartsクラスは文字数チェックのための要素を取得するためのものです。
－－－－
/* バリデーション条件判断部分 */
function validation() {
let parts = document.getElementsByClassName('parts');
－－－－

でもそれは１階層上のdivのpartsが役目を果たしてくれています。
－－－－
<div class=parts>
<input class="input" type="text" name="namae" id="name" data-length="<?php echo MAX_LENGTH::NAME; ?>" data-minlength="<?php echo MIN_LENGTH::NAME; ?>" placeholder="未入力の場合は、匿名で表示されます">
－－－－
partsを引用符で括るようにお願いしましたが、まだされていないようですね。

なので２階層上のpartsクラスには意味がありませんでした。
むしろ負荷をかけていたようなものです。
なぜなら、class="namae-partial parts"とかのせいで、対象要素が６個あることになり、本来３個の処理でいいものを６個分処理していたからです。
そう言うこともあって、外のpartsクラスを削除するようにすすめました。

それに、入力画面と確認画面では要素も目的もＳＥＯについても違うものなので、不要なものはない方がいいと思っています。
とは言え、class="namae-partial-parts"のようにハイフンを付けることで、正しく３個の要素しか取得しなくなるので、もしかしたら、それはそれでもいいのかも知れません。

私がＳＥＯに詳しくないのでいけないのですが、親要素は子要素のクラスを含む必要があるのでしたら、ハイフンではなく空白で区切っているのが正しいクラスのありかただと思いますが、ハイフンでつないでいても同様な効果があるのでしたら、それはそれでいいのかも知れません。

質問者さまのpartsに関する事情がわからないので、私がいろいろ想像して話しても仕方ないですね。
以前も話した変数名に空白は含めないのと同じようにクラス名には空白は含めないこと、class属性の中に空白を書くのは複数のクラスを区切るための方法だと言うことを理解していただければいいと思います。

・次にconfirm_area.appendChild(div); でエラーが発生しております。

このdivも直してください。

補足

Q.コメントがウソになっているので直しておいてください。
－－－－
<div class="namae-partial-parts"> <!-- title-partial-parts -->
－－－－

A.訂正ありがとうございます、修正いたしました。

Q.エラーにはなりませんが削除した方がいいと思っていました。

なので２階層上のpartsクラスには意味がありませんでした。
むしろ負荷をかけていたようなものです。
なぜなら、class="namae-partial parts"とかのせいで、対象要素が６個あることになり、本来３個の処理でいいものを６個分処理していたからです。
そう言うこともあって、外のpartsクラスを削除するようにすすめました。
－－－－
<div class=parts>
<input class="input" type="text" name="namae" id="name" data-length="<?php echo MAX_LENGTH::NAME; ?>" data-minlength="<?php echo MIN_LENGTH::NAME; ?>" placeholder="未入力の場合は、匿名で表示されます">
－－－－
partsを引用符で括るようにお願いしましたが、まだされていないようですね。

A.解説ありがとうございます、申し訳ありません。parts に関して読み落としておりました。
partsクラスに関して理解が追いついていなかったのですが、負担になっているのであれば削除して別のクラス名を考えたほうが良さそうですね…

Q.とは言え、class="namae-partial-parts"のようにハイフンを付けることで、正しく３個の要素しか取得しなくなるので、もしかしたら、それはそれでもいいのかも知れません。

私がＳＥＯに詳しくないのでいけないのですが、親要素は子要素のクラスを含む必要があるのでしたら、ハイフンではなく空白で区切っているのが正しいクラスのありかただと思いますが、ハイフンでつないでいても同様な効果があるのでしたら、それはそれでいいのかも知れません。

A.回答ありがとうございます、SEO について詳しく調べてみたところハイフンでも効果はあるようでした。
dell_ok さんであれば今の parts を維持する方法か別のクラスを付け加えて名前、タイトル、質問文を1まとまりとして認識してもらう方法のどちらを選択しますでしょうか？

※URLがSEOに重要な理由
https://white-link.com/sem-plus/seo-url/

※SEO対策
https://seopack.jp/seoblog/20160603-underscore-or-dash/

Q.次にconfirm_area.appendChild(div); でエラーが発生しております。

このdivも直してください。

A.回答ありがとうございます、div を修正するのですね…理解出来ました。

※最新コード
https://wandbox.org/permlink/l6EU9RSIdyHTQXye

回答No.3

dell_OK

やはりpartsは入力画面にあればいいと思います。
ＳＥＯと言うか検索エンジンが見れるのは入力画面までのはずです。
確認画面以降は検索エンジンからは見えていないのでpartsを付ける意味はない気がします。

補足

アドバイスありがとうございます。parts は可能であればハイフンにして付け加えたいのですが、エラーになるのであれば削除する予定です。

上記とは別に TypeError: Cannot read properties of undefined (reading 'appendChild')
at div.appendChild(child); エラーが発生していたので原因を調べてみたところ、変数div が宣言されていないとのことでした。下記のようにコードを変更してみたところエラーは解消されたのですが、
次にconfirm_area.appendChild(div); でエラーが発生しております。confirm_area = 〇〇で宣言する必要があるのですが、どのように書けばよいのでしょうか…？

※修正コード（sample.phpの359行目）
div.appendChild(child);→divTitlePartialParts.appendChild(child);

※最新コード
https://wandbox.org/permlink/OolWECnCztHXy2cU

※該当ページ
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.2

dell_OK

・下記のような形で出力することは不可能でしょうか？

不可能です。
partsはnamae-partialとは別のクラスです。
クラスの前にはピリオドが必要です。
別々に記述してください。
－－－－
.namae-partial{
}
.parts{
}
－－－－

あるいは、カンマで区切ってください。
－－－－
.namae-partial,
.parts{
}
－－－－

本当にＳＥＯに関係するのですか。
なにか勘違いされているような気がしています。

それで結局クラスを複数追加するのであれば、①②③のどれでもかまいません。

補足

A.アドバイスありがとうございます。不可能なんですね…
parts は名前、タイトル、質問文全てに共通するものとして付けたほうが良い気がしているので、 namae-partial-parts にクラス名を変更してみます。

回答No.1

dell_OK

partsクラスは無用に重複しているので外側のparts①はなくしてもいいと思います。
－－－－
<div class="namae-partial parts①"> <!-- title-partial + parts -->
<h2>名前(name)<span class="required">※任意</span></h2>
<div class=parts②>
－－－－

parts②は引用符で括るようにしておきましょう。
－－－－
<div class="parts">
－－－－

partsクラスはスタイルシートに関係していないので、確認画面以降は不要になってきます。
なので複数クラスを追加する件についてはpatrsを削除するだけでよくなります。
－－－－
divTitlePartialParts.classList.add("title-partial parts"); // classの追加
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
－－－－

補足

A.回答ありがとうございます。
partsクラスは可能であれば SEO を考えてそのまま確認画面でも出力させたいのですが、下記のような形で出力することは不可能でしょうか？

.namae-partial parts {

}