前略、としきさん

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

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

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

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

(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;
}
}

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で変更してください。

としきさん

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

としきさん

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

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

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

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

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

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

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

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

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

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

.wp-block-cocoon-blocks-button-1.button-block {
    margin-bottom: 0;
}

としきさん

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

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

@yhira 

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

@leafytree 

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

試してみます。