WordPressで画像の上にボタンを追加する方法

多くのWordPress愛好家にとって、画像の上にボタンを追加する機能は、コンテンツをよりインタラクティブで魅力的なものにするために不可欠です。その動機は、ユーザーとのインタラクションを豊かにしたい、WordPressの機能を活用したい、テーマやプラグインの制約に対処したい、といったところからきているかもしれません。ユーザーのナビゲーションを改善するためであれ、レイアウトの課題を克服するためであれ、あるいは単にモダンなウェブデザインのトレンドを取り入れるためであれ、この機能はユーザーが高度なスキルを必要とせずにレイアウトの課題に取り組んだり、モダンなデザインのトレンドを取り入れたりするのに役立つかもしれません。

幸いなことに、WordPressのビルトインCoverブロックは、そのプロセスを簡単かつ利用しやすくしてくれます。このガイドでは、その方法を順を追って説明します。


ステップ1:カバーブロックを追加する

はじめに、ボタン付きのお好みの画像を配置したいページまたは投稿を開きます。WordPressエディターで "+"ボタンをクリックしてブロックを追加し、"Cover "を検索します。見つけたら、Coverブロックを選択します。 

カバーブロックを追加する

ステップ2:画像の挿入

ブロックを追加したら、次のようにします。 アップロード を選択するか、または Media Library.この画像がデザインの背景となります。

画像の挿入

ステップ3:画像にタイトルを追加する(オプション)

カバーブロックを配置すると、画像内に「タイトルを記入...」というプレースホルダーテキストが表示されます。このテキストをクリックして、画像の上に表示したいタイトルや見出しを入力してください。 

画像にタイトルを追加する

ステップ4: 画像の上にボタンを追加する

カバーブロックの準備ができたら、画像をクリックするとブロックインサータが表示されます。ここで「+」記号をクリックし、「ボタン」を検索してブロックを追加します。

画像の上にボタンを追加する

ステップ5:デザインのカスタマイズ

細部まで微調整するために、このセクションを3つのパートに分けました。まずタイトルから始め、次にボタン、そして最後に全体のカバーブロックを作り、プロフェッショナルな外観に仕上げます。  

5.1 タイトルテキストをカスタマイズする

表紙ブロック内のタイトルとして配置したテキストをクリックして選択します。ブロックツールバーを使用して、テキストのスタイル(太字、斜体、配置)を調整します。さらにカスタマイズしたい場合は、右側のサイドバーにあるブロック設定でフォントサイズ、色、タイポグラフィを変更します。 

タイトルテキストのカスタマイズ

5.2 ボタンのカスタマイズ

ボタンブロックを選択し、表示したいテキストを入力し、チェーンアイコンをクリックして関連ページまたはURLにリンクします。 (1) をツールバーに追加します。ブロック・ツールバーを使ってボタンの位置を合わせ、スタイルを調整する。

ツールバーを使ってボタンをカスタマイズする

次に、右側のブロック設定パネルに移動する。右側の 一般タブ (1)では、コンテナに対するボタンの幅を調整できます。 スタイルタブ (3)では、ボタンのスタイル、色、タイポグラフィ、寸法、ボーダーをカスタマイズできます。 

ブロック設定を使ってボタンをカスタマイズする

5.3 カバーブロック全体をカスタマイズする

カバーブロックをクリックすると、そのブロックの設定にアクセスできます。 一般タブ.を調整する。 レイアウト設定 ネストしたブロックを拘束するには 固定された背景 で背景を固定したままスクロールするか 繰り返される背景 画像がブロックより小さく、スペースを埋めるためにタイル状にする必要がある場合は フォーカルポイント 画像の重要な部分が見えるようにする。

全般タブを使用して全体的なカバーブロックをカスタマイズします。

次に スタイルタブ.そこから、全体の色、不透明度、タイポグラフィ、寸法、縦横比、ボーダーなどを調整できる。 

スタイルタブを使用して全体的なカバーブロックをカスタマイズします。

ステップ6:プレビューと公開

ページ全体をもう一度確認し、ボタンと画像が意図したとおりに表示されることを確認する。すべてが正しく表示されたら、コンテンツを公開または更新して本番稼動させます。

最終デモ

結論

WordPressの画像上にボタンを追加する機能は、コンテンツをよりインタラクティブで視覚的に魅力的なものにするクリエイティブな可能性を広げます。WordPressのCoverブロックでは、画像上にボタンをオーバーレイすることができ、余分なツールやコーディングを必要とせずに、インタラクティブで視覚的に魅力的なデザインを作成することができます。タイトル、ボタン、レイアウトの詳細を柔軟にカスタマイズできるため、コンテンツを最新のデザイントレンドに簡単に合わせることができます。このガイドに従うことで、ウェブサイトのデザインと機能の両方を向上させるプロフェッショナルな結果を得ることができます。このガイドに従うことで、より良いナビゲーションと洗練された仕上がりで、サイトのデザインを際立たせることができます。



テーブルバーグ・チーム