「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:
通知
すべてクリア

購入ボタンについて

9 投稿
3 ユーザー
4 Likes
903 表示
(@としき)
Active Member
結合: 3年前
投稿: 8
Topic starter  

こんにちは。

 

購入ボタンのhtml cssについて質問です。海外のPCソフトの紹介をやっているのですが、購入ボタンを実装したいです。

 

https://www.iyagirl.com/index.php/2021/07/15/kirishimasakura-osusume/

 

こちらのサイトのfanzaで購入 XCITYで見放題みたいな感じ(ちなみにURLはアダルトサイトです。)にしたいです。

 

PCだと並んだ状態、スマホだと二列になるみたいです。

同じでなくても似たような感じにできれば大丈夫です。よろしくお願いいたします。

 


   
引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

前略、としきさん

PCだと横2列並び、スマホだと縦に並ぶ、のであれば、カラムブロック、ボタンブロック辺りを組み合わせるとか・・

 

CSSを書かなくても、それっぽいのはできそうな気もするのですが、やってみないとわからないです。

 

ブロックエディターは、CSSがわからなくても、ある程度のレイアウトは作れるように工夫されているようなので、ご自身でいろいろと試してみてください。


   
わいひら reacted
返信引用
(@としき)
Active Member
結合: 3年前
投稿: 8
Topic starter  

ブロックエディターはよくわからないので、以下のhtml cssコードでPC表示の時だけボタンを横並びにするようにする場合はどうすればいいでしょうか??

 

 

(html)

<section>
<a href="#" class="btn_06-2"><span>BUTTON</span></a>
</section>

 

(css)

section {
max-width: 300px;
margin: 0 auto;
}
a.btn_06-2 {
display: block;
color: #ffffff;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
text-decoration: none;
text-align: center;
padding: 1.3em .5em;
background: rgba(0, 0, 0, 0.2);
border: 1px solid transparent;
border-radius: 6px;
box-sizing: border-box;
max-width: 360px;
margin: 0 auto;
position: relative;
}
a.btn_06-2 span {
position: relative;
display: block;
transform: translate(-3px, -3px);
transition: 0.3s;
z-index: +1;
}
a.btn_06-2:after {
content: "";
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
background: #e1000e;
border-radius: 6px;
box-sizing: border-box;
transform: translate(-3px, -3px);
transition: 0.3s;
}
a.btn_06-2:hover span {
transform: translate(0, 0);
}
a.btn_06-2:hover:after {
transform: translate(0, 0);
}
@media all and (max-width: 1023px) {
a.btn_06-2 {
font-size: 18px;
}
}
@media all and (max-width: 767px) {
a.btn_06-2 {
font-size: 16px;
}
}

 

 

 


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

HTMLであれば、こんな感じでできるかと思います。

<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box"><!-- wp:cocoon-blocks/column-left -->
<div class="wp-block-cocoon-blocks-column-left column-left"><!-- wp:cocoon-blocks/button-1 {"size":"btn-l"} -->
<div class="wp-block-cocoon-blocks-button-1 button-block"><a href="" class="btn btn-l" target="_self" rel="noopener">ボタン</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:cocoon-blocks/column-left -->

<!-- wp:cocoon-blocks/column-right -->
<div class="wp-block-cocoon-blocks-column-right column-right"><!-- wp:cocoon-blocks/button-1 {"size":"btn-l"} -->
<div class="wp-block-cocoon-blocks-button-1 button-block"><a href="" class="btn btn-l" target="_self" rel="noopener">ボタン</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:cocoon-blocks/column-right --></div>

色などはCSSで変更してください。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

としきさん

Cocoonの場合はブロックエディターの方がやっぱり簡単そうな気がします。

 

 


   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

としきさん

試しにローカルのテストサイトでやってみた方法を記してみます。

 

1、ブロックエディターで「カラム」ブロックを選択し、更に50/50を選択。(カラムブロックにはWordPressのものと、Cocoonの2カラム、3カラムがありますが、今回はWordPressの「カラム」ブロックを使っています)

 

2,左側のカラムを選択して、Cocoonブロックのボタンブロック(ボタンブロックはWordPressのものとCocoonのものの2種類あるので注意)を選択して挿入。

 

3、ボタンブロックに任意のテキストを入力してボタンの名前をつけ、「中央寄せ」にして適当な色を設定する。

 

4、ボタンブロックに任意のリンク先のURLを入力する。

 

5、ボタンブロックのサイズを「中」に切り替え、「円形にする」と「光らせる」のスライドボタンをONにする。

 

6、ボタンブロックの下に「段落」ブロックを挿入し、価格などの文字を入力し、「テキスト中央寄せ」にする。

 

7、右のカラムを選択して、左のカラム同様に、ボタンブロックと段落ブロックを設定する。

 

8、以下のコードを編集ページのカスタムCSSの欄などにに貼り付けて、プレビューで確認して、更新する。

 

.wp-block-columns {
    background-color: #f1f9ee;
    padding: 30px;
}

.wp-block-cocoon-blocks-button-1.button-block {
    margin-bottom: 0;
}
This post was modified 3年前 2回 by リフィトリー

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

としきさん

上記では、「カラム」ブロックの背景色をCSSで指定しましたが、よく見たら、「カラム」ブロック全体の背景色や、左カラム、右カラム、も、それぞれブロックエディターで簡単に背景色が設定できるみたいです。

 

「background-color: #f1f9ee;」は、不要かもしれません。

 

This post was modified 3年前 2回 by リフィトリー

   
わいひら reacted
返信引用
(@としき)
Active Member
結合: 3年前
投稿: 8
Topic starter  

@yhira 

思ったような感じにはなりませんでした。すいません。


   
返信引用
(@としき)
Active Member
結合: 3年前
投稿: 8
Topic starter  

@leafytree 

わざわざありがとうございます。

試してみます。


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました