WordPress ブログにボタンを追加したい場合は、ブロックエディタのボタンブロックを使用すると、さまざまなスタイルのボタンを簡単に追加できます。この記事では、次のようなグラデーションボタンを作成し、パターン化して活用する方法について説明します。
WordPress グラデーションボタンの作成
WordPress ブロックエディタ(Gutenberg)からブロックを挿入したい場合 /ボタンのようにブロック名を入力してブロックを選択できます。 ブロックエディタのキーボードショートカットを活用すると、マウスの使用を最小限に抑えながらすばやく書き込みが可能です。また、手首トンネル症候群などの症状も軽減するのに役立ちます。
ボタンブロック設定で スタイルタブ（①）»背景（②）»グラデーション（③）をクリックして、 기본で事前定義されたグラデーション背景のボタンを選択できます。
たとえば、上の図で最初に定義されたスタイルを選択すると、次のボタンが作成されます。
ボタンを作成したら、後で再利用できるようにパターンで作成できます。パターン作成画面で「同期化」は無効にします。
詳細な方法は、次のYouTubeのビデオで確認できます。
ちなみに、マウスをボタンに置くと、色が黒く表示され、ボタンの背景色に合わないことがあります。 hover時の色の変更は 基本的なCSSで可能です。
1、2回作成すると、簡単に好きなスタイルのボタンを作成できます。より洗練されたボタンを作成したい場合は、次の記事を参照してください。
参照された記事にhoverカラー設定について簡単に言及しました。少し余裕があれば、ボタンブロックの高度でCSSクラスを指定できます。 CSSクラスを指定し（例：b-hover）、次のCSSコード 外観 » カスタム » 追加 CSSに追加すると、マオスオーバー時に色を制御できます。
.b-hover a:hover {
color: white;
}ティーストーリーを利用する場合には、ボタンを HTML/CSS にしてから、書式で保存して活用できます。 WordPressに比べて複雑で書式を呼んで活用するのも少し面倒かもしれません。
AdSense 収益を上げたい場合は、ボタンを使用してユーザーの行動を促すことができます。現在のウィンドウでリンクを開くと、フロント広告が表示される可能性が高くなります。ただし、この場合、離脱率が増加して SEO 面では不利かもしれません。
別の方法として、内部リンクを現在のウィンドウ/タブで開くようにし、外部リンクを新しいウィンドウ/タブで開くようにすることも検討できます。
コメントを残す