>>0 センター配置にしたテキストエリア（コメント入力欄〔##mailbox_message##〕）が、
>> 文字を入力しようとしたときだけ、左配置に戻ってしまう
原因は、スタイルシート（CSS） or HTMLの書き方、あるいはその両方です。
……なので、スタイルシートやHTML（メールボックス設定TOPの【ページ編集】の中身）を見ないことには正確なことは言えませんが……
たぶん、ALICE+のデフォルトCSSが〔有効化〕になっているせいで起こっているのではないか、と思われます。
でなければ現在お使いの（ご自身で制作されたかテンプレをご使用中かは分かりませんが）スタイルシートやHTMLに問題があるかと。
対処方法は複数あります。
>🟦1️⃣デフォルトCSSを〔無効化〕する。
（【head情報】＞【デフォルトCSS設定】から無効にできます）
おそらくこれで解消されます。
***デフォルトCSSを無効にしても解消しないなら、お使いのCSS（スタイルシート）やHTMLに問題があります。
***その場合でも以下の2️⃣の対処を試しに行ってみてください。
***デフォルトCSSと同じ理由で問題が起こっているなら、2️⃣で解決する可能性があります。
※今までデフォルトCSS有効状態でサイトを構築していた場合、デフォルトCSSを無効にした途端デザインが崩れるおそれがあります。
自身でそれを補うCSSを書ければ問題ないのですが、書き換え・書き足しはそこそこ面倒かもしれないです。
書き換え・書き足しはしたくない、ということなら↓。
>🟦2️⃣原因となっているスタイルシートの記述を打ち消す、またはそれに対応するソースを書く
まずなぜ入力しようとしたときだけ配置が左に戻ってしまうのかというと、
「textarea:focus（選択中のテキストエリア）の表示形式が、親要素のセンター配置を反映しないものになっている」
せいです。
スマホ用デフォルトCSSでは
━━━━━━━━━━
textarea:focus{
width:96%;
min-height:260px;
display:block;
}
━━━━━━━━━━
となっています（2021/10/26時点）。
で、原因となっているのは最後の「display:block;」です。
この表示形式（block〔ブロック〕）だと、センター配置にするタグなどでテキストエリアを囲むだけでは、センターにはなりません。
センターにしたければ、
🅰️表示形式を変えるソースを書き足し、センター配置が効くようにする
🅱️この表示形式でもセンター配置になるよう、ソースを書き足す
のどちらかを行います。
▼参考
CSSで要素を中央寄せにする方法を徹底解説 | 侍エンジニアブログ
……というわけで、以下どちらかのソースを、お使いのスタイルシートに書き足してください。
#🅰️表示形式を変えるソース
━━━━━━━━━━
textarea,textarea:focus{
display:inline-block;
}
━━━━━━━━━━
または
#🅱️表示形式は変えずにセンター配置にするソース
━━━━━━━━━━
textarea,textarea:focus{
margin:auto;
}
━━━━━━━━━━
※非選択時（textarea）・選択時（textarea:focus）で表示形式等を別々にする必要性はおそらくないので、ついでに「textarea（非選択時）」にも同スタイルを指定しています。
とりあえずどちらかを使ってみて、
それでセンタリングできなかったり他の場所のデザインが崩れたりしたら、もう一方に書き換えてみてください。
これらを試みてまだ解決しなければ、原因はデフォルトCSSではなく、
お使いのスタイルシート（CSS）かHTMLに何か原因がある……と考えられます。
*🟩ソースをどこへ書き込むか分からない場合🟩*
どこでどのようにデザインされているかによりますが……、
>🔵【メールボックス設定】＞【HEAD間編集】の<style>〜</style>間
例）━━━━━━━━
<style>
textarea,textarea:focus{
display:inline-block;
}
</style>
━━━━━━━━━━
>🔵【head情報】＞【CSSファイル編集】の編集欄（［スマホ用］［PC用］ともに入れる）
※一番上の〔□CSS適用〕欄が『CSSを適用する』になっているのを確認してください。なっていなかったら適用する、に変更。
>🔵【共通head間編集】の<style>〜</style>間
※【共通head間編集】のみを使ってメールボックスのデザインをしている場合に限る。
おそらく上２つのどちらかでいいと思います。
解決策ソースは、すでに書かれているスタイルシートソースの“ なるべく下側に書き足し ”てください。
（スタイルシートは、あとに記述された指示のほうが優先されるため）
全然どこに書いたらいいか分からない！ という場合は【CSSファイル編集】に入れればいいかと。
ただしここに入れると、メールボックス以外のページ（トップページ・トップページと同じCSSファイルを使う設定のページ）にも「テキストエリアへのスタイル指示」が同じく反映されます。
ので、別のページのデザインが意図せず変わるおそれもあります。
>> 文字を入力しようとしたときだけ、左配置に戻ってしまう
原因は、スタイルシート（CSS） or HTMLの書き方、あるいはその両方です。
……なので、スタイルシートやHTML（メールボックス設定TOPの【ページ編集】の中身）を見ないことには正確なことは言えませんが……
たぶん、ALICE+のデフォルトCSSが〔有効化〕になっているせいで起こっているのではないか、と思われます。
でなければ現在お使いの（ご自身で制作されたかテンプレをご使用中かは分かりませんが）スタイルシートやHTMLに問題があるかと。
対処方法は複数あります。
>🟦1️⃣デフォルトCSSを〔無効化〕する。
（【head情報】＞【デフォルトCSS設定】から無効にできます）
おそらくこれで解消されます。
***デフォルトCSSを無効にしても解消しないなら、お使いのCSS（スタイルシート）やHTMLに問題があります。
***その場合でも以下の2️⃣の対処を試しに行ってみてください。
***デフォルトCSSと同じ理由で問題が起こっているなら、2️⃣で解決する可能性があります。
※今までデフォルトCSS有効状態でサイトを構築していた場合、デフォルトCSSを無効にした途端デザインが崩れるおそれがあります。
自身でそれを補うCSSを書ければ問題ないのですが、書き換え・書き足しはそこそこ面倒かもしれないです。
書き換え・書き足しはしたくない、ということなら↓。
>🟦2️⃣原因となっているスタイルシートの記述を打ち消す、またはそれに対応するソースを書く
まずなぜ入力しようとしたときだけ配置が左に戻ってしまうのかというと、
「textarea:focus（選択中のテキストエリア）の表示形式が、親要素のセンター配置を反映しないものになっている」
せいです。
スマホ用デフォルトCSSでは
━━━━━━━━━━
textarea:focus{
width:96%;
min-height:260px;
display:block;
}
━━━━━━━━━━
となっています（2021/10/26時点）。
で、原因となっているのは最後の「display:block;」です。
この表示形式（block〔ブロック〕）だと、センター配置にするタグなどでテキストエリアを囲むだけでは、センターにはなりません。
センターにしたければ、
🅰️表示形式を変えるソースを書き足し、センター配置が効くようにする
🅱️この表示形式でもセンター配置になるよう、ソースを書き足す
のどちらかを行います。
▼参考
CSSで要素を中央寄せにする方法を徹底解説 | 侍エンジニアブログ
CSSで要素を中央寄せにする方法を徹底解説 | 侍エンジニアブログ
この記事では「 CSSで要素を中央寄せにする方法を徹底解説 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。
www.sejuku.net……というわけで、以下どちらかのソースを、お使いのスタイルシートに書き足してください。
#🅰️表示形式を変えるソース
━━━━━━━━━━
textarea,textarea:focus{
display:inline-block;
}
━━━━━━━━━━
または
#🅱️表示形式は変えずにセンター配置にするソース
━━━━━━━━━━
textarea,textarea:focus{
margin:auto;
}
━━━━━━━━━━
※非選択時（textarea）・選択時（textarea:focus）で表示形式等を別々にする必要性はおそらくないので、ついでに「textarea（非選択時）」にも同スタイルを指定しています。
とりあえずどちらかを使ってみて、
それでセンタリングできなかったり他の場所のデザインが崩れたりしたら、もう一方に書き換えてみてください。
これらを試みてまだ解決しなければ、原因はデフォルトCSSではなく、
お使いのスタイルシート（CSS）かHTMLに何か原因がある……と考えられます。
*🟩ソースをどこへ書き込むか分からない場合🟩*
どこでどのようにデザインされているかによりますが……、
>🔵【メールボックス設定】＞【HEAD間編集】の<style>〜</style>間
例）━━━━━━━━
<style>
textarea,textarea:focus{
display:inline-block;
}
</style>
━━━━━━━━━━
>🔵【head情報】＞【CSSファイル編集】の編集欄（［スマホ用］［PC用］ともに入れる）
※一番上の〔□CSS適用〕欄が『CSSを適用する』になっているのを確認してください。なっていなかったら適用する、に変更。
>🔵【共通head間編集】の<style>〜</style>間
※【共通head間編集】のみを使ってメールボックスのデザインをしている場合に限る。
おそらく上２つのどちらかでいいと思います。
解決策ソースは、すでに書かれているスタイルシートソースの“ なるべく下側に書き足し ”てください。
（スタイルシートは、あとに記述された指示のほうが優先されるため）
全然どこに書いたらいいか分からない！ という場合は【CSSファイル編集】に入れればいいかと。
ただしここに入れると、メールボックス以外のページ（トップページ・トップページと同じCSSファイルを使う設定のページ）にも「テキストエリアへのスタイル指示」が同じく反映されます。
ので、別のページのデザインが意図せず変わるおそれもあります。
10/28 10:01
1ページ中1ページ目
513 view
残り書き込み 9998 件
人気スレ