JIN

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

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

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

フォーメン

くまが運営  無料公開中

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

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

フォーメン

くまが運営  無料公開中

MENくん
MENくん
カスタムボタン1(フラットボタン)を使っています

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

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

カスタマイズの準備

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

ビジュアルエディタ

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

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

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

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

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

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

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

これで準備は完了です。

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

子テーマを使用している方は、style.cssを開いてください。

追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

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

普通のコード

背景色ありのコード

MENくん
MENくん
アホほどコードが短くなった
くま3号
くま3号
色んなこと覚えたもんな

まとめ

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

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

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

data-matched-content-ui-type="text_card" data-matched-content-rows-num="3" data-matched-content-columns-num="3"