WordPressテーマにCSSゴーストボタンを追加する方法

最近、読者の一人から、WordPressテーマにCSSゴーストボタンを追加する方法についてのチュートリアルを求められました。ゴーストボタンとは、最近非常に人気のある、透明なコールトゥアクションボタンのことです。この記事では、わずかなCSSとHTMLを使用して、WordPressテーマにCSSゴーストボタンを簡単に追加する方法をご紹介します。

ゴーストボタンとは？

ゴーストボタンとは、背景に溶け込み、境界線によってのみ認識される透明なボタンを指すWebデザイン用語です。

WordPressで通常のコールトゥアクションボタンを作成するのは非常に簡単です。CSSやHTMLを記述しなくても、投稿やページに追加できます。ゴーストボタンは新しいトレンドなので、ゴーストスタイルのボタンだけを作成するための特定のプラグインはありません。

WordPressにゴーストボタンを追加する

前述のように、WordPressテーマにゴーストボタンを追加するには、わずかなCSSとHTMLを使用する必要があります。

まず、以下のCSSコードをテーマまたは子テーマのスタイルシートに追加する必要があります。

Webサーバーに接続するには、FTPクライアントが必要です。接続したら、/wp-content/themes/Your-Theme/フォルダに移動し、style.cssファイルを見つけます。これをテキストエディタで開いて編集し、ファイルの末尾にこのコードスニペットを貼り付けます。（WordPressでWebからコードスニペットを貼り付ける方法の詳細をご覧ください）。

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

変更を保存し、ファイルをサーバーにアップロードし直します。

これで、ボタンを表示したいときはいつでも、class=”ghost-button”を追加するだけで済みます。

たとえば、ダウンロードリンクを追加したい場合は、通常どおりダウンロードリンクを作成します。次に、テキストエディタに切り替えて、HTMLフォーマットを確認します。

ダウンロードリンクのHTMLコードを見つけて、次のようにCSSクラスを追加します。

<a href="http://example.com/downloads/" class="ghost-button">今すぐダウンロード</a>

投稿を保存または更新してからプレビューしてください。プレーンな古いリンクの代わりに、美しいゴーストボタンが表示されます。

この記事が、WordPressテーマにゴーストボタンを追加する方法を学ぶのに役立ったことを願っています。ショートコードを使用せずにWordPressにボタンを追加する方法に関するガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。また、TwitterやFacebookでもフォローできます。