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

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

ゴーストボタンとは？

ゴーストボタンとは、ウェブデザインの用語で、背景に溶け込み、枠線によってのみ目立つ透明なボタンのことです。

WordPressでアクションボタンを作成するのはとても簡単です。CSSやHTMLを書かずに投稿やページに追加することもできる。ゴーストボタンは新しいトレンドなので、ゴーストスタイルのボタンを作成するプラグインは特にありません。

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

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

まず、テーマまたは子テーマのスタイルシートに以下のCSSコードを追加します。

Webサーバーに接続するには、FTPクライアントが必要です。接続したら、/wp-content/themes/Your-Theme/フォルダに行き、style.cssファイルを見つけます。このファイルを開いてテキストエディターで編集し、このコードスニペットをファイルの一番下に貼り付けます。 (WordPressでウェブからコード・スニペットを貼り付ける方法についてはさらに詳しく）。

[cbk1］

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

これで、ボタンを表示したいときは、すべてclass=”ghost-button “を追加するだけでよい。

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

ダウンロード・リンクのHTMLコードを探し、次のようにCSSクラスを追加します：

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

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

この投稿がWordPressテーマにゴーストボタンを追加する方法を学ぶのにお役に立てば幸いです。ショートコードを使わずにWordPressにボタンを追加する方法については、こちらもご参照ください。

この投稿が気に入ったら、WordPress動画チュートリアルのYouTubeチャンネルに登録してください。Twitterや Facebookでも私たちを見つけることができます。