ペライチではCSSの埋め込む方法は２つあります。

• HTMLブロックを利用する
• タグ埋め込みを利用する

ここでは、タグ埋め込みの方法を使って
「ペライチのリンクボタンの背景色を変更する」手順を追いかけてみます。

HTMLブロックを利用する方法は、ペライチ社のヘルプを確認してみてください。

理解しておきたいCSSのセレクタについて（参考情報）

※IDの場合
section="△△"はCSSで指定するときに、あたまに#をつける
　→#△△{ ~~~~~~~ }

※CLASSの場合
class="〇〇"はCSSで指定するときに、あたまに.をつける
　→.〇〇{ ~~~~~~~ }


理解しておきたいセレクタの区切り方について（参考情報）

・スペース区切り
この区切り方は、子孫セレクタとも呼ばれます。適用対象を絞り込むときに利用します。HTMLとCSSを合わせて読むと理解がすすみますので、参考情報のリンク先をご一読したりしておさらいしましょう。

例）
#section-31 .c-btn a

・カンマ区切り
複数のセレクタを一度に指定ができます。
例）
.c-btn a, 
.c-btn input,
.c-btn button 

ボタンは<a>タグで記述されています。デペロッパーツールを使って、該当の<a>タグのコードを探してみます。

ペライチで作った公開中のページをGoogleのデベロッパーツールで確認してみてください。

[Section-xx]というID名を確認しておきます。
ここでは、ボタンを含んでいるブロックを選択し ブロックのIDを調べます。

id=section-31

という設定値を探せれば、Goalです。
ペライチでは、それぞれのブロックごとに違うIDが設定されています。

ここで、そもそもIDってなに？と思った方は、
わかりやすいフリーランスの方のまとめサイトがあります。
下記のボタンにリンクを貼り付けておきますので、読んでみてくださいね。

<a>タグに適用されているbackground-colorを探します。
下の画像を確認してみてください。

.theme-elegant .c-btn a, 
.theme-elegant .c-btn input,
.theme-elegant .c-btn button {
background-color: #6e062d;
}

という設定値が見つかりました！
これをコピペしておきます。
（他に打ち消されている箇所も見つかりますが、１箇所だけでOK）

ペライチでは
.theme-elegant
というCLASS名（.theme-xxxxx）が登場します
これは、省いて以下のように整理していきます。


.c-btn a, 
.c-btn input,
.c-btn button {
background-color: #6e062d;
}


このままのセレクタの状態でも適用は可能です。

しかしこのままだと、
ペライチのページの中に含まれる全てのリンクボタンの色が変わってしまいますので
セレクタを修正して、適用対象を絞り込んでみます。


ここでは
ID [section-31番]の<aタグ> (class名 .c-btn)  に対して
背景色を適用するbackground-colorプロパティで、色の指定（#3cefd6b5）と設定してみる記述にしてみます

#section-31 .c-btn a {
background-color: #3cefd6b5;
}

貼り付ける場所は
ペライチのタグの埋め込み - [head]タグ内の埋め込み欄です


<style>

#section-31 .c-btn a {
background-color: #3cefd6b5!important;
}

</style>


<style>タグは必ず必要になります。
※!important　は、CSS設定を強制的に上書きする記述です。必須ではありません。

<style>
/* 背景色を 変えてみよう */
body {
background: #F2F0E9!important;
}


/* テキストの枠を広げてみよう */
.c-wrapper--sm {
max-width: 960px;
}

/* ペライチリンクボタンの色を変えて丸みを適用します */
.c-btn a {
background-color: #37517F!important;
border-radius: 5px;
}

/* ペライチリンクボタンの上にマウスカーソルを置くと下に動きます */
.c-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
/*影を小さく*/
border-bottom: none;
}


/* ペライチリンクボタンの位置を左寄せ（PC表示のみ）変えてみます */
#section-59 .c-btn,#section-74 .c-btn{
text-align:right;
}


@media screen and (max-width: 960px) {
#section-59 .c-btn a,#section-74 .c-btn a {
font-size:1.4rem!important;
}
#section-59 .c-btn,#section-74 .c-btn {
text-align:center;
}
}

/* 見出し　ｈ２　に対して目立つように装飾してみます */
/* 見出し　#C3B68F */
#section-59 .c-heading h2,
#section-76 .c-heading h2
{
position: relative;
top: -40px;
background: #C3B68F;
color: #fff;
padding: 3px 15px;
display: inline-block;
border-radius: 5px;
}

/* 見出し　#ffffff */
#section-58 .c-heading h2,
#section-60 .c-heading h2,
#section-68 .c-heading h2,
#section-74 .c-heading h2
{
position: relative;
top: -40px;
background: #333;
color: #fff;
padding: 3px 15px;
display: inline-block;
border-radius: 5px;
}


</style>