こんな感じで変更
BEFORE
AFTER
[kjk_balloon id=”1″]これはすべてWordPressのテキストエディタで簡単に設定できちゃいます！[/kjk_balloon]
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
カスタマイズは自己責任。ぼくはこんな風に思っています。
[toc]
カスタマイズするための
準備
テキストエディタ画面にします
WordPress投稿記事を選択ボタン作成テキストエディタ表示に切り替え
ボタン作成は文字にリンクを付けて＞スタイル＞ボタン＞浮き出し（メインカラー）を使用しました。
[kjk_balloon id=”8″]テキストエディタ画面では、ビジュアルエディタと違って文字ばかりになるからびっくりするね！[/kjk_balloon]
テキストエディタ画面のボタンのコード
テキストエディタでボタンはこんな風に表示されます。
例（ビジュアルエディタのとき） EXAMPLE リンク先：https://for-men.jp/
<a class="btn raised main-bc strong" href="https://for-men.jp/">EXAMPLE</a>
3つの色に分けて説明していきますね。
<a></a>
aタグといいます。こちらはリンクを設定するときに使うやつです。今回は文字（EXAMPLE）をaタグで囲むことでリンクにしているのがわかりますね。
class=”~”
classはこのaタグの装飾（見栄え）を決めています。服みたいなイメージです。このaタグにどんな服（class）を着せるのかを決めています。
クラスが4つ書いてるのがわかりますね。これはもともとSANGOに設定してあるクラスです。
それぞれ、btn（ボタンの装飾）、raised（浮き上がる装飾）、main-bc（背景色がメインカラーの装飾）、strong（太文字の装飾）です。
href=”~”
これはリンク先の設定です。「～」の部分がリンク先になっています。
[kjk_balloon id=”4″]ははは、これで呪文のようには見えないだろう♪[/kjk_balloon]
ボタンのカスタマイズコードを記入する
テキストエディタ画面でコードを入力していきます。
<a class="～" href="～" ここだよ(*´ᗜ`*)ｴﾍﾍ>EXAMPLE</a><a class="～" href="～" style="〇〇">EXAMPLE</a>この style=”〇〇”の「〇〇」に色々なコードを入れることで、簡単にボタンをカスタマイズできます。
横幅が長いボタンのコード
<a class="～" href="～" style="width: 100%; margin-right: 0;">横幅の広いボタン</a>
[kjk_balloon id=”1″]横幅をMAXにして、いらない右側の余白を0にしたよ[/kjk_balloon]
縦幅が高いボタンのコード
[center]
<a class="～" href="～" style="line-height: 44px;">横幅の広いボタン</a>
[/center][kjk_balloon id=”1″]縦幅を44pxにしたよ。ただのheightではなくて、行間のline-heightを指定してあげると文字が真ん中にくるよ[/kjk_balloon]
丸ボタンのコード
<a class="～" href="～" style="border-radius: 50%; line-height: 100px; width: 100px; padding: 0;">横幅の広いボタン</a>
[kjk_balloon id=”1″]丸いボタンは高さと幅を同じにするよ。内側の余白が邪魔するから0にするといいよ。[/kjk_balloon]
色を変えたボタンのコード
<a class="～" href="～" style="background: #f9f9f9; color: #111111;">横幅の広いボタン</a>
[kjk_balloon id=”13″]配色のセンスがなさすぎるやろ！[/kjk_balloon]
うまくできたか
確認
確認する際は必ずキャッシュを削除してから見てください。
| 確認方法 |
|---|
| 「Ctrl」+「F5」（キャッシュ削除） |
カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
カスタマイズはキャッシュ削除をマスターしてからです
くまからのお礼
本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）
もっとカスタマイズしたい人はこちらの記事を見てください。
【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～
[kjk_ab id="4"]まとめ
[kjk_balloon id=”4″]いちいちCSSをいじるのがめんどくさい人はこれでOKだね！[/kjk_balloon]
[kjk_balloon id=”13″]あんまり長いコードはおすすめしないゾ！[/kjk_balloon]
[kjk_temp id=”3171″]
