JIN

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

マイクロコピーボタンにカスタマイズ
普通のマイクロコピー付きボタン

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

フォーメン

くまが運営  無料公開中

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

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

フォーメン

くまが運営  無料公開中

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

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

[toc]

カスタマイズの準備

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

ビジュアルエディタ

下の文字を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くん
MENくん
アホほどコードが短くなった
くま3号
くま3号
色んなこと覚えたもんな

まとめ

マイクロコピーを簡単に作成するカスタマイズをしてみました。

枠ありだとなんだかおしゃれですね(*´ω`*)

SANGOのメインカスタマイズ(?)サイトはこちら

ここにボックスタイトルを入力