JINカスタマイズ｜マイクロコピー付きボタン

普通のマイクロコピー付きボタン

カスタマイズが集うブログ

フォーメン

くまが運営　　無料公開中

背景色ありのマイクロコピー付きボタン

カスタマイズが集うブログ

フォーメン

くまが運営　　無料公開中

MENくん

カスタムボタン１（フラットボタン）を使っています

カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

JINに元々あるボタンにマイクロコピーをプラスします。

[toc]

Contents

カスタマイズの準備
カスタマイズのコード
まとめ

カスタマイズの準備

まずはマイクロコピーとなるテキストとボタンを作っておきます。

下の文字を2行にしたい時は、Shift＋Enterで改行してくださいね。

次にテキストエディタ画面にすると

<p>カスタマイズが集うブログ</p>
<span class="color-button01-big"><a href="#">フォーメン</a></span>
<p>くまが運営　無料公開中</p>

こんな感じで書いてあると思います。（pタグが表示されない人もいるかもです。）

ここを下のようにします。

<div class="mcbtn">
<p>カスタマイズが集うブログ</p>
<span class="color-button01-big"><a href="#">フォーメン</a></span>
<p>くまが運営　無料公開中</p>
</div>

1行目と5行目を追記します。

背景色ありを使う場合はここの mcbtn を mcbtn-waku に変更してください。

頻繁に使う場合は、プラグインのAddQuickTagを使うと簡単に挿入できます。

これで準備は完了です。

次にカスタマイズコードを記入していきます。

子テーマを使用している方は、style.cssを開いてください。追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

普通のコード

.mcbtn {
    margin-bottom: 2rem;
    text-align: center;
}
.mcbtn .color-button01-big {
    margin-bottom: 0;
}
.mcbtn .color-button01-big a {
    padding-top: 12px!important;
    padding-bottom: 15px!important;
    width: 100%!important;
}
.mcbtn p {
    padding-bottom: 0.5rem;
}
.mcbtn p:first-child {
    font-weight: 500!important;
    font-size: 1.2em;
}
.mcbtn p:last-child {
    font-size: .9em;
}

背景色ありのコード

.mcbtn-waku {
    margin-bottom: 2rem;
    background: #f4f4f5;
    text-align: center;
    padding: 20px;
}
.mcbtn-waku .color-button01-big {
    margin-bottom: 0;
}
.mcbtn-waku .color-button01-big a {
    padding-top: 12px!important;
    padding-bottom: 15px!important;
    width: 100%!important;
}
.mcbtn-waku p {
    padding-bottom: 0.5rem;
    text-align: center;
}
.mcbtn-waku p:first-child {
    font-weight: 500!important;
    font-size: 1.2em;
}
.mcbtn-waku p:last-child {
    font-size: .9em;
}

MENくん

アホほどコードが短くなった