サポート » プラグイン » SiteGuard WP Pluginの文字表示位置について

  • 解決済 hmy

    (@hmy)


    お世話になります。

    下記の環境下で使用しています。

    Wordpress 5.4.1
    SiteGuard WP Plugin 1.5.0 (ひらがなの設定で使用)
    テーマ  Luxeritas バージョン: 3.7.3(子テーマ作成して使用)

    【質問】
     コメント欄(返信欄も同様)には、下記のようなレイアウトで表示されてしまいます。

    —————————————————————————-
    ”ひらがな4文字” 上に表示された文字を入力してください。 「コメントを送信」ボタン
            [ひらがな入力エリア]
    —————————————————————————-
    期待としては、
    —————————————————————————-
    ”ひらがな4文字”
    上に表示された文字を入力してください。
    [ひらがな入力エリア]  「コメントを送信」ボタン
    —————————————————————————-
    という感じだったのですが、スタイルシートなど、どこかを変更しないといけませんでしょうか?
    あまり詳しくないので、詳細に教えていただけますと助かります。
    よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • 下記 CSS ではどうでしょう?

    カスタマイズの [追加 CSS] などに、

    #commentform .comment-form-cookies-consent + p {
    	width: 100%;
    }
    #commentform .comment-form-cookies-consent + p + p {
    	flex: 0 1 50%;  
    }
    #commentform .form-submit {
    	flex: 1 0 50%;
    	padding-left: 10px;
    	margin-bottom: 18px;
    	margin-top: auto;
    }

    ※ Luxeritas テーマのバージョンによっては、コメントの HTML+CSS が異なり、レイアウトが崩れる場合があります。

    トピック投稿者 hmy

    (@hmy)

    お忙しいところありがとうございます。

    教えていただいたコードを子テーマのstyle.cssに記述したところ、
    レイアウトの大きな崩れはなく、下記のようになりました。
    ——————————————————————————————————————————————————
    ”ひらがな4文字”上に表示された文字を入力してください。
    [ひらがな入力エリア]  「コメントを送信」ボタン
    ——————————————————————————————————————————————————
    (「コメントを送信」ボタンは入力エリアの右隣りにはきましたが、”上に~”の文字列の
     位置は変わらなかったという状況です)

    何かお気づきの点はございますでしょうか?

    ※ちなみに、コメントの「返信」の部分でのレイアウトでは、
     上記コードの記述前後とも、下記のようになっておりました。
    ——————————————————————————————————————————————————
    ”ひらがな4文字”上に表示された文字を入力してください。
                              「コメントを送信」ボタン
    [ひらがな入力エリア]
    ——————————————————————————————————————————————————
    (うまく表現できませんが、「コメントを送信」ボタンの行が、上下の行に
     半分ずつぐらいかぶっている縦位置に出ています)

    すみませんが、状況がわかりません。
    状況を確認できるページの URL を教えてください。

    トピック投稿者 hmy

    (@hmy)

    お忙しいところありがとうございます。
    大変失礼しました。

    下記URLのところがわかりやすいかと思います。
    ご確認いただけますでしょうか?
    (同じページの返信ボタンを押したときには先に記載しました「返信」部分の状況がご確認いただけるかと思います)

    http://diary.manase-manase.com/?p=131

    • この返信は3年、 10ヶ月前にhmyが編集しました。

    下記 CSS ではどうでしょう?
    なお、キャプチャとメッセージ(「上に表示された文字を入力してください。」)を、特定するクラスなどがないので、ウェブサイト欄(.comment-form-url)を基準(隣接セレクタ)にしています。ウェブサイト欄を削除したら、CSS も変更する必要があります。

    #commentform .comment-form-url + p {
    	width: 100%;
    }
    #commentform .comment-form-url + p + p {
    	flex: 0 1 50%;  
    }
    #commentform .form-submit {
    	flex: 1 0 50%;
    	padding-left: 10px;
    	margin-bottom: 18px;
    	margin-top: auto;
    }
    トピック投稿者 hmy

    (@hmy)

    ご返信ありがとうございます。

    教えていたコードで思うように出力されました。
    大変助かりました。
    ありがとうございます。

    ウェブサイト欄を削除したらCSSも変更する必要があるとのこと、
    ご注意いただき重ねてお礼申し上げます。

    こういうことが自身で解決できるよう少しずつ勉強していきたいと思います。
    この度はお時間をいただき感謝いたします。
    ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「SiteGuard WP Pluginの文字表示位置について」には新たに返信することはできません。