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

テキストエディタでボタンをいじってみた

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

「自己責任」の意味がわからない方はこちら

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


この記事では
ボタンを簡単にカスタマイズする方法を説明。
CUSTOM POINT
CSSではなく、テキストエディタに記入するだけで簡単に変更できる方法でカスタマイズしていきます。

こんな感じで変更

Before

普通のボタン

このボタンの基本情報

普通のボタンの基本情報

MENくん

SANGOのボタンにはもともとこんな感じに余白が設定されています。

MENくん

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


このサイトの環境

テーマ
子テーマ
プラグイン

ボタンのカスタマイズ準備

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

手順
WordPress投稿記事を選択ボタン作成テキストエディタ表示に切り替え

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

テキストエディタに切り替えるにはこちらをクリックしてください。

テキストエディタの切り替え

MENくん

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

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

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

例(ビジュアルエディタのとき) EXAMPLE リンク先:https://for-men.jp/

テキストエディタでは

3つの色に分けて説明していきますね。

 <a></a> 
aタグといいます。こちらはリンクを設定するときに使うやつです。今回は文字(EXAMPLE)をaタグで囲むことでリンクにしているのがわかりますね。

 class=”~” 
classはこのaタグの装飾(見栄え)を決めています。服みたいなイメージです。このaタグにどんな服(class)を着せるのかを決めています。

classは何個でも選ぶことができます。その際は半角スペースをいれます。

クラス名

クラスが4つ書いてるのがわかりますね。これはもともとSANGOに設定してあるクラスです。

それぞれ、btn(ボタンの装飾)、raised(浮き上がる装飾)、main-bc(背景色がメインカラーの装飾)、strong(太文字の装飾)です。

 href=”~”
これはリンク先の設定です。「~」の部分がリンク先になっています。

MENくん

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

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

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

入力する場所は
記入するのはこんな感じ

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

注意
style=”〇〇”の前には必ず半角スペースを入れてください
メモ
ボタンは中央揃えになるように[ center ][ /center ]で囲んであります。※全角スペースは消してください。

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

MENくん

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

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

MENくん

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

丸ボタンのコード

MENくん

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

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

MENくん

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

くま3号

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

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • ビジュアルエディタでボタンを作る
  • テキストエディタでコードを記入
MENくん

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

くま3号

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