ライティングスキル

【WordPress】初心者必見!JINテーマの簡単オリジナルボタン作成法

こんにちは🌞ちーちゃんです♪

WordPressで記事を書いている際、どこかのサイトへ飛ばしたい時ってありますよね!その時に活躍するのが、ボタン♪

ボタンがあるとないとでは、全然違って見た目も可愛い♪

こちらから読めます♪

よりも、断然こっちのが素敵!!↓

 

〝でも、難しいんでしょ。。????〟

〝コードとか入れて色々どうのこうのやらなきゃいけないんでしょ。。??〟

って思ったPCが苦手なあなたに必見な内容になっております♪

JINのテーマには、ショートコードが組み込まれているのです!!!拍手!!!

もうコードは出来上がっておりますので、あとは色と形のコードを変えるだけ!!!!

で、出来ちゃうんですーーーーーーーー泣♪

とその前に、ボタンのラインナップをお見せ致しましょうーーー!!

レッツゴー!!!

ボタンの種類

ショートコードに組み込まれているボタンの種類は、全部で9パターン♪

もともと組み込まれているボタンと
私のオリジナルのボタンとあり、それぞれ載せてみました。

私だったらこんな色がいいなー♡
僕だったらこんな組み合わせにしようかな!

なんて、

ボタン種類を見ながらご自分の好みの色も探してみてくださいね♪

1、シンプルイズベスト!フラットボタン

2、綺麗なグラデーションボタン

3、ピカリと輝く光るボタン

4、なんだか気になるふわふわボタン

5、躍動感溢れるバウンドボタン

6、横並びフラットボタン

7、横並び光るボタン

8、横並びグラデーションボタン

9、横並び光るボタン

いかがでしたか??

好みのボタンは見つかりましたか?
こんなにあるなんて驚きですよね♪

用途や気分に合わせて
カスタマイズできるのが嬉しいです♪

次は、いよいよボタンの作成方法にいきます。

ボタンの作り方の流れ

STEP1、お好みのテンプレートを選ぶ

  1. ショートコード▲をクリック。
  2. ボタンをクリック。
  3. ▶︎を押し、好きなボタンを選択。

※ショートコードが出ない場合は、
「TinyMCE Advanced」をプラグイン、
あとは、ここをクリックしてツールバーを出すようにしてください。

STEP2、コードをコピペして貼り付ける

さきほどの、お好みのボタンをクリックすると、
勝手にコードがビジュアル画面に現れます!!!

(※今回は、グラデーションボタンを選択しました♪色は、水色、形は丸いボタンがテンプレートのボタンですね♪)

STEP3、色や形をカスタマイズしてみる

このコードの意味はこんな感じ!!

①枠のカーブ:丸っこい枠と角ばっている枠と変えることができます♪

50pxは、丸い。◯
10pxは、四角。⬜︎

なので、
50PXに近いほど丸っこくなるし、
10PXに近づくほど、四角っぽくなります!

ちなみに今回は、四角にしたかったので、10pxにしてみました!!

②左側の枠のカラーを決める

好きな色をチェックして、カラーコードをコピー!!

カラーの参考チャートはこちら♪

https://html-color-codes.info/japanese/

③右側の枠のカラーを決める

※ちなみにここでは、文字のカラーは変えられないようです。。

カラーの参考チャートはこちら♪

https://html-color-codes.info/japanese/

 

④ボタン内の文章を変える

今回は、〝オリジナルボタンの作り方〟

にしました♪

①〜④までのコードを変えるとこんな感じ♪

うーーん♡可愛い♪

こんなに簡単に作れちゃうんなんて!!!

ぜひ、オリジナルのボタンを作って、素敵なサイトのお助けマンにしてくださいね♪

ではまたー♪