JIN

【WordPress初心者講座-JIN-】JINのボタン

【初心者講座第10回】JINのボタン

今回の記事は有料テーマ「JIN」をお使いの方専用です

JINをご検討の方やJIN専用のブロックを知りたい方もどうぞ

前回の記事と同様の内容になりますが、今回はJIN専用のボタンの解説になります。

JINではGutenberg(グーテンベルク)よりボタンの種類が増えています。これらを効果的に使うことでリンク先へ誘導することや視覚的効果に変化をもたらすことが可能です

迷える羊くん

なんかJINではさらにワンランク上のボタンがあると聞いたんですけど、、

イキガネシニガネくん

そうなんだ、JINではさらにボタンの種類があるから是非とも使うべきだよ

参考になる記事

今回はこの2つの記事を見てもらうとリンクとボタンの使い方が分かります

【WordPress初心者講座】記事にリンクを入れてみよう 【初心者講座第5回】WordPressの記事にリンクを入れよう 記事にリンクを貼ることで、自分が紹介したいとこへ訪問者を案内する...
【WordPress初心者講座】ボタンの使い方WordPressでのボタンの使い方をまとめました。リンクをボタンのデザインに出来るのでリンク先へ誘導し易く、サイトのデザイン性も高まります。今回は初心者の方でも簡単に出来るよう画像付きで解説しています...

今回の講座でこれが出来る!使える!

JINには3つのパターンのボタンが用意されています

パターン1

シンプルボタン

パターン2

パターン3

ボタンの使い方

パターン1の方法

やり方

左上の「+:ブロックの追加」→JINブロックの「シンプルボタン」を選択

選択するとこのような緑色のボタンが表示されます

右上の歯車のアイコンで細かい設定が出来ます

細かい設定

ボタンの種類

ここで4つある種類から選べます

*色は変更出来ません

シンプルボタン

シンプルボタン

シンプルボタン

シンプルボタン

ボタンテキスト

ここではボタンのテキストを変更出来ます

初期の段階では「シンプルボタン」というテキストになっています

リンク先URL

そのままの通りです。リンク先のURLを入力できます

アフェリエイトコードのimgタグ

そのままの通りです。アフェリエイト先で得たコードを入力出来ます

パターン2の方法

やり方

左上の「+:ブロックの追加」→JINブロックの「リッチボタン」を選択

選択すると青色の「リッチボタン」と書かれたボタンが表示されます

右上の歯車のアイコンで細かい設定が出来ます

細かい設定

ボタンの種類

4種類の中から選択できます

ボタンの色

ボタンの色の配色を選ぶことが出来ます

単色やグラデーションも可能です

ボタンのホバーアクション

ボタンを選択した時のボタンの動きを3種類の中から選べます

ボタンの丸み

ボタンの丸みを選べます(数値が小さいほど四角になります)

ボタンテキスト、リンク先URL、アフェリエイトコードのimgタグは先ほどと共通のため省略します

パターン3の方法

やり方

左上の「+:ブロックの追加」→JINブロックの「横並びボタン」を選択

選択すると緑色と赤色のボタンが横並びに表示されます(モバイルの場合は縦表示)

右上の歯車のアイコンで細かい設定が出来ます

細かい設定

こちらは「パターン1:シンプルボタン」と同じになります

ボタンの種類、ボタンテキスト、リンク先URL、アフェリエイトコードのimgタグの4種類になります

まとめ

JINのボタンとは
  • ボタンの種類が多い
  • 視覚効果の高い設定が出来る
イケてる羊くん

JINの専用のボタンは確かに初期のと違い、ワンランク上の記事に出来るな

イキガネシニガネくん

すごいよね、これでブログのレベルをあげてみよう

-Fin-


にほんブログ村へ参加中