補足です。iPhone７ですと添付画像のように細い白い線で囲まれた感じになってしまいます。

PCでの表示ほどエラーではないですが、こちらも解決したいです。

画像のアイコンが出ているのは、inputフォームにtype="image"が入っていて、画像ボタンになっているからだと思います。
とりあえずこれは削除する必要があるかと。
iPhoneについては、まずは上記の修正をしてからまた確認してみてください。
おそらく同じ原因ではないかと思います。

通常だったらtype="submit"かtype="button"を利用するのが一般的かと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/submit
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/button

お返事ありがとうございます。それぞれ試しましたが、解決しませんでした。

①type="image"を消す⇒クリック/タップしても反応しなくなる

②type="submit"にする⇒テキストが消えてボタンデザインも消えた

③type="button"にする⇒クリック/タップしても反応しなくなる

上記の結果となりました。

前略、@smさん

私はフォームは詳しくありませんが、②type="submit"にする ですと、消えたのではなく、見えないだけのような気がします。

リフィトリーさん

反応はあります。テキストと（元々のコクーンの）ボタンデザインが消えた、という意味です。

ご指摘のように、特殊処理をしたら見えるようになる、とかはあるかも知れません。

一般ユーザーは特殊処理をしないので、サブミットではダメかなと。

@sm さん

それと、以下のページに移動するだけでしたら、フォームボタンではなく、普通のリンクボタンでも良いような気がしますが、他に理由がある場合はご容赦ください。

 https://cococafe3.com/cart/?st=billing_information_input 

リフィトリーさん

回答ありがとうございます。

普通のリンクボタンですと、商品ごとのカート画面にならないかと存じます。

また、特定のページに飛ばす、というよりかは、商品をサイト内のカートに入れる、という行動ですので、リンクボタンではなくフォームになるのではと。

説明が難しいですが。

@sm さん

投稿者:: @sm

普通のリンクボタンですと、商品ごとのカート画面にならないかと存じます。

また、特定のページに飛ばす、というよりかは、商品をサイト内のカートに入れる、という行動ですので、リンクボタンではなくフォームになるのではと。

説明が難しいですが。

なるほど、最初のボタンをクリックすると、既にご紹介いただいたページに変遷するのではなく、「商品ごとのカートの画面」に変遷するのですね。

となると私には、ちょっと難くてよくわかりません。

@sm さん

投稿者:: @sm

ご指摘のように、特殊処理をしたら見えるようになる、とかはあるかも知れません。

 

一般ユーザーは特殊処理をしないので、サブミットではダメかなと。

②type="submit"にする⇒以下のコードを追加CSSか子テーマのstyle.cssファイルに記述する、だとどうでしょう？

.nsa_product_detail input[type="submit"] {
    background-color: #333;
    width: auto;
    padding: 14px 45px;
    font-size: 16px;
    border: 2px solid transparent;
}

リフィトリーさん

すごいです！変なエラーが消えました！ありがとうございます！

背景色を指定していただいているので、１ページごとのカスタムCSSに頂いたコードを入力するとすると、１ページにつきフォームボタンの色が１個だけ指定できる形でしょうか。

１ページに商品が複数ある場合はボタンの色を商品毎に変えたい、といったこともあるのですが、これだけでも大変ありがたいです。

@sm さん

上記コードでスマホでボタンが大きすぎる、という場合は以下を先のコードより下の行に追記してみてください。

@media screen and (max-width:480px) { 
    .nsa_product_detail input[type="submit"] {
        font-size: 14px;
        padding: 10px 25px;
    }
}

リフィトリーさん

ありがとうございます！小さくなりました。

こちらはボタンテキストが長い場合、画面をハミ出してしまうのですが、折り返し表示にするのはまた別途コードが必要でしょうか？

@sm さん

私もあまりよくわかっていませんが、

投稿者:: @sm

背景色を指定していただいているので、１ページごとのカスタムCSSに頂いたコードを入力するとすると、１ページにつきフォームボタンの色が１個だけ指定できる形でしょうか。

１ページに商品が複数ある場合はボタンの色を商品毎に変えたい、といったこともあるのですが、これだけでも大変ありがたいです。

いちいちボタンの色だけのためにclassを追加するのも面倒？なときは、直接htmlタグにCSSを書いちゃうというのは横着かもしれません。

<input class="product_cart product_id26 btn btn-black btn-m" type="submit" value="⇒商品を購入する" style="background-color:#0000ff">

リフィトリーさん

教えていただいたコードのおかげで、

ボタンの画像アイコン混入エラー、背景色の複数指定問題、文字テキストの改行問題、

これら全て解決しました！

本当にありがとうございましたm(_ _)m

以下で改行・・と思ったらすでに解決していました。 ? 

white-space: normal;

リフィトリーさんのコードでかなり問題解決が進んだのですが、

こちらですと、１点だけ問題がありました。

パソコンで表示しようとすると、ボタンの幅が横いっぱいになってしまい、ボタンと認識されづらくなってしまいます（見出しみたいになる）。

ボタンテキストの量に合わせた横幅になるようにしたいです。

リフィトリーさんに最初教わった、

.nsa_product_detail input[type="submit"] {
    width: auto;
    padding: 14px 45px;
    font-size: 16px;
    border: 2px solid transparent;
}

というコードをカスタムCSSに付与するとボタンテキストの量に合わせた横幅のボタンになります。

しかし、上記コードをカスタムCSSに付与すると、ボタンテキストの折り返しが無くなり、画面をハミ出してしまいます。

何度も申し訳ないですが、こちらどう改善すれば不具合が直るか、お手数ですが教えて頂きたいです。

ご配慮いただいたように、なるべくカスタムCSSではなく記事中のコードだけで解決したいです。

>>リフィトリーさんからの返信

先ほどのトピックにも書いたのですが、以下のプロパティと値を追加で、

white-space: normal;

以下のようにすると、どうでしょうか？

実際のスマホで確認していないので、ちょっと確かめないとわかりませんが。

.nsa_product_detail input[type="submit"] {
    background-color: #333;
    width: auto;
    padding: 14px 45px;
    font-size: 16px;
    border: 2px solid transparent;
    white-space: normal;
}

@media screen and (max-width:480px) { 
    .nsa_product_detail input[type="submit"] {
        font-size: 14px;
        padding: 10px 25px;
    }
}

こちら試してみます。

ちなみに小さく表示するコードはよく意味が分かりませんでした。

小さい文字は読みづらいので、それは使わないことにしました。

カスタムCSSで付与すると、文字幅に沿ったボタンが生成されますね！ありがとうございます。

やはり記事内だけのコードで完結は難しいのですね。

カスタムCSSを毎度設置する形になりますね。

わいひらさん

添付画像のようになります。

リフィトリーさんのCSSを「カスタムCSS」「追加CSS」もしくは「子テーマのstyle.css」に貼り付けておけば、毎回設定が必要な部分なので、毎度設定する必要がなくなります。
なので、「カスタムCSS」を利用しているのであれば、そこに貼り付けておいた方が良いと思います。

色とかを個別に変更するのであれば、すでにリフィトリーさんが以下で書かれていますが、インラインスタイルで別途変更部分をスタイリングすればよいかと思います。
https://wp-cocoon.com/community/postid/55187/

style="background-color:#0000ff"

投稿者:: @sm

添付画像のようになります。

リフィトリーさんのコードに添付画像のようなmax-widthを指定してやれば最大幅を設定できるかと思います。

@sm さん

「カスタムCSS」というのは、記事の編集ページの下の方にあるもので、そのページだけに適用するために使用します。

「追加CSS」というのはダッシュボートの「外観」→「カスタママイズ」→「追加CSS」とたどると開けます。変更を保存するときは、すぐ上にある「公開」ボタンで確定します。（ここに記述したものは、全てのページに反映されます）

子テーマのCSSに書くときは、「外観」→「テーマエディター」とたどります。（ここに記述したものは、全てのページに反映されます）

値は好みで変更してください。

@sm さん

ついでに文字を左寄せにするときは、以下を加えます。

text-align: start;

投稿者:: @leafytree

「カスタムCSS」というのは、記事の編集ページの下の方にあるもので、そのページだけに適用するために使用します。

 

「追加CSS」というのはダッシュボートの「外観」→「カスタママイズ」→「追加CSS」とたどると開けます。変更を保存するときは、すぐ上にある「公開」ボタンで確定します。

自分の以下の書き込みは、「カスタムCSS」と「追加CSS」がごっちゃになってました。

投稿者:: @yhira

リフィトリーさんのCSSを「カスタムCSS」もしくは「子テーマのstyle.css」に貼り付けておけば、毎回設定が必要な部分なので、毎度設定する必要がなくなります。

僕の書きたかったことは、リフィトリーさんのコードを「追加CSS」もしくは「子テーマのstyle.css」に書いて問題ないということでした（他のパーツに適用される部分でもないので）。

その上で、個別にボタンの色（その他）を変更する必要があれば、インラインスタイルで変更すればいいのではないかということでした。

わいひらさん、リフィトリーさん

全て実施させて頂きました。

無事全てのトラブルが解決しました！

重ね重ねの質問にもお答え頂きまして本当にありがとうございます。

今度こそ解決です。解決済みボタンを押させていただきます。

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