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

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

ゴーストボタンとは？

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

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

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

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

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

ウェブサーバーに接続するには、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でもフォローできます。