コメントエリアを単列化・入力内容で高さを自動調整

テンプレートを作る際、コメント投稿部分を出来るだけコンパクトにまとめたいと思ってPC表示時は左右二列に入力部品を並べております。（一列のものも有り。また、レスポンシブデザインなので閲覧デバイスによっては一列に変化します。）

しかし、PC表示で「入力欄が小さくて使い辛い」「何を書いたか確認し難い」と感じる方も居られ、幾つか問い合わせを頂いたのでカスタマイズとして記事にする事に致しました。

1. コメントエリアを二列から一列にする。
2. コメント入力欄の高さを入力内容に応じて自動的に調整する。

1 ）　コメントエリアを二列から一列にする。

コメントエリアが二列だと入力欄が小さいので一列に変更するカスタマイズです。（見本画像は youth_resp ）

↓ これを ↓ このように変更

下記をスタイルシート編集枠内の一番下に追加するだけで一列になります。

/* コメントエリア一列化 */
.form-left,.form-right {
  all: inherit;
  margin-bottom: 20px;
  padding-top: 0;
}
#tools_container {
  margin-top: 0;
}

これは、スタイルシート内に書かれている .form-left（左側のフォーム）と .form-right（右側のフォーム）のルールセットを all（全てのプロパティ）: inherit（親要素から強制的に継承）するので、それまでのスタイルをリセットしてくれます。

（ border, margin, padding, background 等、通常は継承しない親要素のプロパティも inherit を使えば強制的に継承させる事が可能になります。その後 margin と padding を補正用に追記します。）

ただ、all（全てのプロパティ）が IE（ Internet Explorer ）で使えないので、IEで閲覧される方にはカスタマイズが反映せず一列になりません。（IE11 も2022年06月15日にサポートが終了しており 起動時に MS Edge を使うよう促されるので、もうIEは考えなくても良いんじゃないかな、と思います。(^^ゞ）

2 ）　コメント入力欄の高さを入力内容に応じて自動的に調整する。

コメントを入れるテキストエリアの高さを、入力内容で自動的に調整する方法です。

↓ こちらの記事の JavaScript を使わせて頂いております。有難うございます。m(__)m

【JavaScript】textareaの入力内容で高さを自動調整する

本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 本記事で作成するもの 本記事の内容で完成

into-the-program.com

見本を作りました。下のボックスに何か文字を入れて行数を伸ばしてみて下さい。

スクロールバーが表示される行に達するとエリアの高さが下へ伸びて調整してくれるので、入力した内容がエリア外に隠れる事が無くなり スクロールせずに確認する事が出来ます。

この記事のカスタマイズは、当方の制作した共有テンプレートで使うための方法です。
他者様のテンプレートで利用する場合も似たような感じで出来ると思いますが、動作の補償は致しかねます。ご了承下さい。m(__)m

① テンプレートのコメント投稿部分を確認

対象テンプレート：当方共有化済み全テンプレート

先ず、変更するテンプレートのHTML編集枠内に有るコメント投稿部分の記述位置を探します。

キーボードCtrl＋Fキーで検索窓を出し、中に name="comment[body]" と入れて探すと1ヵ所見付かるので、 その文を含む1行が下記のようになっているかご確認下さい。

<textarea id="comment" rows="数値(テンプレートによる)" name="comment[body]" placeholder="コメントを入力して下さい"></textarea>

② HTML編集枠内下段に有る </body> の上に下記 JavaScript を追加

<!--comment_area-->
<script>
let textarea=document.getElementById('comment');let clientHeight=textarea.clientHeight;textarea.addEventListener('input',()=>{textarea.style.height=clientHeight+'px';let scrollHeight=textarea.scrollHeight;textarea.style.height=scrollHeight+'px'})
</script>
<!--/comment_area-->

HTMLとJSの青い文字のid部分が共に『 comment 』である事を確認して下さい。JavaScriptのIdと一致しない場合動作しないので、異なる場合は同じid名になるよう変更して下さい。

<script>～～</script> を挟む <!--comment_area--> と <!--/comment_area--> は、FC2ブログで使う場合のブロック変数です。これで括る事によって、個別記事でコメントを受け付けている場合にのみJSが使われます。

③ スタイルシート編集枠内最下に下記スタイルを追加（'22/08/21：23時に修正しました。）

/* コメントエリア高さ自動調整 */
#comment[name="comment[body]"] {
  min-height: 175px;
  overflow: hidden;
  resize: none;
}

最後に、スタイルシート編集枠内最下に上記を追加し更新ボタンを押して完了。

不具合が有った時に戻せるよう、テンプレートの複製を作ってから作業すると安心です。