特典機能について

購入ボタンについて | Cocoonテーマに関する質問 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
共有:
通知
すべてクリア

購入ボタンについて


としき
 としき
(@としき)
ゲスト
結合: 10か月前
投稿: 8
Topic starter  

こんにちは。

 

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

 

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

 

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

 

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

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

 


引用解決済
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

前略、としきさん

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

 

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

 

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


わいひら 件のいいね!
返信引用
としき
 としき
(@としき)
ゲスト
結合: 10か月前
投稿: 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-2after {
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)
メンバーサイト Admin
結合: 4年前
投稿: 13359
わいひら - Facebookわいひら - Twitter
 

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)
メンバー Moderator
結合: 3年前
投稿: 6735
 

としきさん

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

 

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

としきさん

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

 

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 10か月前 2回 by リフィトリー

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6735
 

としきさん

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

 

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

 

This post was modified 10か月前 2回 by リフィトリー

わいひら 件のいいね!
返信引用
としき
 としき
(@としき)
ゲスト
結合: 10か月前
投稿: 8
Topic starter  

@yhira 

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


返信引用
としき
 としき
(@としき)
ゲスト
結合: 10か月前
投稿: 8
Topic starter  

@leafytree 

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

試してみます。


返信引用
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

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