【SANGOカスタマイズしてみた】ボタンをテキストエディタでいじくってみた

こんな感じで変更

BEFORE

AFTER

これはすべてWordPressのテキストエディタで簡単に設定できちゃいます！

カスタマイズは自己責任でやろう

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

テキストエディタ画面にします

ボタン作成は文字にリンクを付けて＞スタイル＞ボタン＞浮き出し（メインカラー）を使用しました。

テキストエディタ画面では、ビジュアルエディタと違って文字ばかりになるからびっくりするね！

テキストエディタ画面のボタンのコード

テキストエディタでボタンはこんな風に表示されます。

例（ビジュアルエディタのとき）　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=”~”
これはリンク先の設定です。「～」の部分がリンク先になっています。

ははは、これで呪文のようには見えないだろう♪

ボタンのカスタマイズコードを記入する

テキストエディタ画面でコードを入力していきます。

<a class="～" href="～" ここだよ(*´ᗜ`*)ｴﾍﾍ>EXAMPLE</a>

<a class="～" href="～" style="〇〇">EXAMPLE</a>

この style=”〇〇”の「〇〇」に色々なコードを入れることで、簡単にボタンをカスタマイズできます。

横幅が長いボタンのコード

<a class="～" href="～" style="width: 100%; margin-right: 0;">横幅の広いボタン</a>

横幅をMAXにして、いらない右側の余白を0にしたよ

縦幅が高いボタンのコード

[center]
<a class="～" href="～" style="line-height: 44px;">横幅の広いボタン</a>
[/center]

縦幅を44pxにしたよ。ただのheightではなくて、行間のline-heightを指定してあげると文字が真ん中にくるよ

丸ボタンのコード

<a class="～" href="～" style="border-radius: 50%; line-height: 100px; width: 100px; padding: 0;">横幅の広いボタン</a>

丸いボタンは高さと幅を同じにするよ。内側の余白が邪魔するから0にするといいよ。

色を変えたボタンのコード

<a class="～" href="～" style="background: #f9f9f9; color: #111111;">横幅の広いボタン</a>

backgroundは背景色、colorは文字の色だよ！これで好きな色のボタンが簡単にできるね！　色を変えたボタン　←こんな見ているだけで気分が悪くなる色のボタンもすぐにできちゃうよ！

配色のセンスがなさすぎるやろ！

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください。

カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～

まとめ

いちいちCSSをいじるのがめんどくさい人はこれでOKだね！

あんまり長いコードはおすすめしないゾ！