子テーマCSSに以下を追加。
図示のように赤枠と青枠の表示順を逆にします。

.comment-area {
  display: flex;
  flex-direction: column-reverse;
}

@chu-ya さま、

連日お世話になり恐縮です。

また、早々の回答ありがとうごさいます！

CSSの記述でスッキリ解決致しました。

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

@kukuku さん

CSS ではアクセシビリティ（サイトを支障なく使えるかどうか）に問題が発生するため、私であればテンプレートを作成します。

CSS でのアクセシビリティの問題は、以下のページに書かれています。

flex-direction - アクセシビリティの考慮 - CSS: カスケーディングスタイルシート | MDN

視覚障害者と書かれていますが、視覚障害者に限らずキーボードで操作する方にも不利な影響を及ぼします。実際に現在の状態のままページを表示した後、tab キーを押してページ内の移動をお試しください。コメントフォームを飛ばして大きく下に移動し、コメント一覧のコメントにフォーカスが当たります。また、コメント一覧の後では、今度は上に大きく移動しコメントフォームにフォーカスが当たります。これは支障があると思います。

この問題を避けるために、まずは子テーマに 1 つファイルを作り、ファイル名を square-comment.php とします。

※ FTP ソフトやサーバーのファイルマネージャーをお使いになり、子テーマの style.css や functions.php と同じ階層にファイルを作ります。ロリポップのファイルマネージャーは、おそらく ロリポップ！FTP だと思います。

そして、square-comment.php に下記リンク先のコードを追加します。

https://notepad.pw/share/tks1dash1

※ 中身は親テーマの comments.php とほぼ同じです。

最後に、以前に子テーマの functions.php に追加したコードを削除し、新たに以下のコードを追加します。

add_shortcode( 'square_comment', function() {
  get_template_part( 'square-comment' );
});

Akiraさま、

アクセシビリティの問題、ご指摘ありがとうございます。

私にはハードル高すぎて、とりあえずご指示のようにファイルの作成、コードの書き換えを実行致しました。

が、添付のような結果になってしまいました！

きっと何か基本的な所をミスっているのだと思い何度も検証していますがわかりません。

またまたお手数おかけして申し訳ありませんが、再度お力添え下さい！

現状URL：　 https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/

@kukuku さん

●手順補足

• リンク https://notepad.pw/share/tks1dash1 のコードをコピペし、「square-comment.php」と言う名前でファイル作成。
• サーバの子テーマのディレクトリ/wp-content/themes/cocoon-child-master/下に、作成した「square-comment.php」をアップロード。
• 以前、function.phpに書いたコードを置き換える。

add_shortcode( 'square_comment', function() {
  comments_template();
});

↓前のコードを以下に置き換え

add_shortcode( 'square_comment', function() {
  get_template_part( 'square-comment' );
});

• コメントを表示したいページに、前回と同じ以下のショートコードを記述する。

[square_comment]

@chu-ya さま、

ご連絡遅くなりました。

お手間を取らせています。
手順を要約して頂きありがとうございます。

最初はDreamweaverからサーバーにアクセスし、「square-comment.php」のアップロードと
function.phpの書き換えを実行し、
先ほど、ロリポップのFTPで同じ処理を致しました。

が、全く結果は同じ全面文字化けです。

きっと何か基本的な所をミスっているのだと思いますが　　
私の知識では全くお手上げです。

固定ページに掲示板機能を…というところから見直した方が良いのでしょうか。

@kukuku さん

ファイルの文字コードが原因かもしれません。

このような手順で行うとどうなるでしょうか。

① 現在ある square-comment.php ファイルを削除します。

② ロリポップ！FTP でファイルを作成します。

参考：ロリポップ！FTP（ファイルの作成、編集、ダウンロード）

「ファイル名」に square-comment.php と入力します。

「文字コード」は何を選べるのか分かりませんが、utf-8 が選べるのなら選びます。

「ファイルの属性（パーミッション）」は、とりあえずデフォルトの 644 でいいと思います。

「編集画面」に https://notepad.pw/share/tks1dash1  のコードをコピペします。

@akira さん

根本原因が何か？元ファイルを何で作ったか気になる点ですが。

ワードプレス上で
[ダッシュボード]→[外観]→[テーマファイルエディタ]→square-comment.php

既にあるファイルにソースコード(テキスト)をコピペして上書き保存。
でもいいのは？

@akira さま、

chu-ya さま、

見捨てずお付き合い頂きありがとうございます！

ダッシュボードーテーマファイルエディタでの記述も

ロリポップでのファイル作成（utf-8）も同じように文字化けしました。（ファイル添付）

他に策がありましたらよろしくお願いいたします。

kukukuさん

文字化けは治りましたね。

問題は、PHPソースと認識されないために、実行されずに、ソースの中身が表示されてしまっていることだと思います。

拝見すると、？マークが全角になってしまっています。
（1箇所ではなく、多数。）

少なくとも、「<?php」（すべて半角）で始まらないと、認識されないと思います。

作成したPHPファイル上でも、全角なのでしょうか。

ご確認いただけますでしょうか。
（他にも文字が変換されていないか、確認が必要かもしれないです。）

kukukuさん

あと、表示されているので変なのは変数名だと思います。

$マークの後ろに、スペースがあります。

例えば、本来「$user」のものが、「$ user」と$マークの後ろにスペースが入っています。

これも1箇所ではなく、多数なっています。

これらも、作成したPHPファイル（square-comment.php）上では、間にスペースが入っているのでしょうか。

それとも、PHP上は問題なくて、表示されているだけでしょうか。

もし変換されているようであれば・・・。

？マークや$マークの件が、変換されずに、そのままを貼り付けることができれば、今の方法で上手くいきそうに思います。

@mk2_mk2 さま、

ご連絡ありがとうございます。

全角？を全て半角?に変換しUPしたところ
「重大なエラー発生しました」と表示されこのページにだけアクセスできなくなりました！

WPからのメールでは下記のようになっています。

エラー詳細

===============

エラータイプ E_PARSE が /home/users/0/daa.jp-nmos-shayukai/web/new/wp-content/themes/cocoon-child-master/square-comment.php ファイルの 18 行目で発生しました。 エラーメッセージ: syntax error, unexpected 'req' (T_STRING), expecting variable (T_VARIABLE) or '{' or '$'

指摘されている18行目あたりのコピー添付いたします。

いずれにせよ、一度 square-comment.phpを削除して出直さなければならないですね。

@mk2_mk2 さま、

ご指摘のように$の後にも半角スペースが入っていたりします。

明日は朝から終日出かけますので、php の全角、スペースなどを整理してから
ご報告させて頂きますのでよろしくお願いいたします。

明日の朝早いので今日はこれにて失礼いたします。

kukukuさん

とりあえずエラーメッセージは、PHPと認識されたために出力されているように思います。
（変数に$がないため、文法的にエラーとなった）

先程エラーメッセージを記載いただいた返信に、貼っていただいた画像を拝見すると、他にも問題ありそうです。

• 半角の括弧「()」が、全角の括弧「（）」に、なっているように見えます
  　
• 半角のカンマ「,」が、全角の読点「、」になっているように見えます
  　
• 半角のピリオド「.」は、全角の句点「。」になっているように見えます

これまでの経緯を拝見する限り、貼り付け方に問題がありそうです。

例えば、WordやExcelなどに一旦貼り付けて、オートコレクト機能が働いて自動変換。
それを貼り付けた。

そんな風に見えてしまいます。

ここまで、変換されている文字が多いと、他にも変換された文字がないか確認するのは大変だと思います。

やり直した方が確実かと思います。

直接貼り付けても、こういう状態になってしまうのでしょうか。

そうであれば、文字コード「UTF-8(BOMなし)」を扱えるテキストエディタをご利用になった方が良いのかもしれないです。

そうでなく、何かを経由してこうなったのであれば、直接貼り付けた方が良いと思います。

今後のことを考えれば、テキストエディタをご利用になれる状態にしておくのが、良さそうには思います。

@kukuku さん

php の全角、スペースなどを整理してから

整理するのではなく、ファイルを削除し作り直すのがいいです。

そのようなことになる理由が分かりませんが、コードは以下のリンクから直接ファイルに貼り付けてください。

https://notepad.pw/share/tks1dash1

ｍｋ２さんもおっしゃっていますが、別の何かに貼り付けた後で、その別の何かからファイルに貼り付けるのはお止めください。

もし、コードの変更など別の何かに貼り付ける必要がある場合は、Visual Studio Code などのコードエディターをお使いください。Visual Studio Code は オンライン版 もありますので、すぐに使えます。

問題の本質、直接的原因（動作の問題）より、仮に「なぜ全角が混入」したのか？動機的原因が問題。
これを明確にしないと、同様の繰り返しかと...

@akira さま、
ｍｋ２　さま、
chu-ya　さま、

大変返信が遅くなり申し訳ありません！
そしてまた、私のケアレスミスが発覚しましたこと、ご報告いたします。

コードの貼付けは案内いただいているnotepadから直接コピペしていたのですが、
リンク先のコードが表示されると同時にgoogle翻訳が作動して英語⇒日本語に変換されているのに気付いていませんでした！
コードが半角でなければならない…ということは知ってはいましたが、全角になっていたという事実に気づいておりませんでした。

本当にお騒がせいたしました！！！

というわけで、無事イメージ通り表示され（タブ移動も問題無しです）、皆さまの数々のご支援に感謝申し上げます。

⇒ https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/

またこのフォーラムの中をウロウロお邪魔することと思いますので、今後ともよろしくお願い申し上げます。

kukukuさん

上手くいって良かったです。

投稿者:: @kukuku

google翻訳が作動して英語⇒日本語に変換されている

これは盲点でした。
（ブラウザの翻訳機能ってことですよね）

そんなケースもあるんですね。
記憶しておこうと思います。

@mk2_mk2 さま、

ご指摘、本当にありがとうございました。

私もこの事実に気が付いたときはぎょッといたしました。