クリック率が上がると評判のキラリ！っと光るボタンをCSSだけで設置する方法について覚書。
キラリと光るボタンを設置する方法、大きさや色などのカスタマイズ方法について記載しています。
設置やカスタマイズは、子テーマを持つテーマを使っているのであればどのテーマを使っているにしても設置方法は変わらないと思います。
この記事では、Cocoon、Luxeritas(ルクセリタス)を主に説明しています。
CSSやhtmlがわからない方でも、とっても簡単に設置できますので試してみてください。
キラリと光るボタンのサンプル
まずはここで紹介するボタンのサンプルを紹介しておきます。
ちなみに上のボタンをクリックするとイラストやのサイトが開きます。
キラリと光るボタンの設置方法概要
設置方法は至って簡単です。
- 子テーマのstyle.cssにCSSを追記する
- 設置したい場所にhtmlコードを記載する
この2つだけです、簡単でしょ？
あとはいちいちhtmlコードをベタ打ちするのが面倒であればショートコードを設定しておくくらいですね。
ショートコードの登録についても後ほど記載します。
キラリと光るボタンの設置方法
では具体的な設置方法について記載します。
子テーマのスタイルシートにCSSを追記
ボタンのCSSを子テーマのスタイルシートに追記しますが、使用するCSSは以下のサイトで紹介CSSをそのまま流用させてもらいます。
色々なボタンを探しましたが、ここのが種類もあってデザイン的にもシンプルだったのでこちらのサイトのCSSを使います。
「でざなり」さんのページから設置したいタイプのCSSを見つけて、CSSをそのままコピーします。
今回は、「マウスホバーで凹むボタン」を例にとって説明します。
「でざなり」さんに記載されているCSSを以下に転載します。
.shiny-btn2 {
display: block;
position: relative;
width: 80%;/*ボタンの幅*/
padding: 10px 0;
margin: 30px auto;
background-color: #ed4545;/*ボタンの色*/
box-shadow: 0 3px 0 0 rgba(198, 39, 39, 1);/*影の色(rgbaの値を変更)*/
border-radius: 5px;
font-weight: bold;
font-size: 18px;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
}
.shiny-btn2:hover {
text-decoration: none;
color: #fff;
box-shadow: none;
-webkit-transform: translateY(3px);
}
.shiny-btn2::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
transition: 0.2s;
animation: shiny-btn2 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn2 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}ちょっと注意してほしいのですが、「でざなり」さんのページの「マウスホバーで凹むボタン」のCSSで一箇所";"が抜けているところがあって、そのまま貼り付けるとボタンが光りません。
上記のCSSはその部分が修正されていますので、「マウスホバーで凹むボタン」を使用するときは上記のCSSをコピーして使ってください。
ちなみに";"が抜けている箇所は、"transition: 0.2s;"のところです。
・「でざなり」さんのページのCSS
background-color: #fff;
transition: 0.2s
animation: shiny-btn2 3s ease-in-out infinite;・修正版
background-color: #fff;
transition: 0.2s;
animation: shiny-btn2 3s ease-in-out infinite;コピーしたら子テーマのスタイルシートに追記します。
子テーマへのCSSの貼り付け
CocoonもLuxeritasも操作手順は一緒です。
WordPressのダッシュボードから[外観] > [テーマエディター]をクリックします。
[編集するテーマを選択]ボックスに"Luxeritas Child Theme"が選択されていること、テーマファイルに"スタイルシート(syle.css)"が選択されていることを確認して、コピーしたCSSの内容を貼り付けます。
貼り付けたら[ファイルを更新]ボタンをクリックして「ファイルの編集に成功しました。」と表示されればOKです。
ボタンの設置
ボタンの設置については、以下のhtmlをボタンを表示したい場所に記載するだけです。
<a href="リンク先のURL" class="shiny-btn2">ここにテキスト</a>注意する点として、上記htmlの「class="shiny-btn2"」が貼り付けたCSSの「.shiny-btn2」と同じ名前になることに気をつけてください。
コピー元である「でざなり」さんのサイトには各ボタンのCSSとボタンを貼り付けるhtmlの両方が記載されているので、両方コピーすればよいだけです。
ボタンが押されたときに表示するページ(URL)は、「href="xxx"」のXXXに表示したいページのURLを記載してください。
例えば、ボタンがクリックした際に「yahoo.co.jp」を表示したければ以下のようになります。
<a href="https://www.yahoo.co.jp/" class="shiny-btn2">ここにテキスト</a>また、クリックした際に表示するページを別のウィンドウ(タブ)に表示したい場合は、「target="_blank"」をhtmlに追加します。
<a href="https://www.yahoo.co.jp/" class="shiny-btn2" target="_blank">ここにテキスト</a>ボタンに表示する文字列は、「ここにテキスト」と記載された部分に文字列を記載してください。
例えば、htmlを以下のように記載すると、
<a href="https://www.yahoo.co.jp/" class="shiny-btn2" target="_blank">Yahooを開く</a>
以下のようなボタンになります。
Yahooを開く
クリックするとYahoo Japanのホーム画面が別ウィンドウで表示されます。
htmlを記載するだけでサイドバーのウイジェットとかにも同じ様にボタンを設置できます。
サイドバーのウイジェットに光るボタンを設置する例
WordPressの管理画面の[外観] > [ウイジェット]をクリックします。
サイドバーに「カスタムHTML」をドラッグ&ドロップします。
「カスタムHTML」ウイジェットの[内容]欄にhtmlを記載して[保存]ボタンをクリックすればOKです。
こんな感じにサイドバーにボタンが表示されます。
光るボタンのカスタマイズ
CSSを少し変更して色や大きさのカスタマイズ方法について説明します。
光るボタンの大きさを変更する
大きさについては、貼り付けたCSSの「width」の値を変更します。
貼り付けたCSSでは、「width: 80%」が指定されています。
.shiny-btn2 {
display: block;
position: relative;
width: 80%;/*ボタンの幅*/
padding: 10px 0;
margin: 30px auto;これは、コンテンツ幅(表示領域)の80%の大きさという意味になります。
例えば、WordPressの記事の画面表示幅が、700pxだとすると560pxの幅でボタンが表示されることを意味しています。
「width」の指定は、%でもpxで指定して固定幅にすることもできます。
光るボタンの色を変更する
色については、CSSの以下の2行の値を変更します。
.shiny-btn2 {
display: block;
position: relative;
width: 80%;/*ボタンの幅*/
padding: 10px 0;
margin: 30px auto;
background-color: #ed4545;/*ボタンの色*/
box-shadow: 0 3px 0 0 rgba(198, 39, 39, 1);/*影の色(rgbaの値を変更)*/
border-radius: 5px;「background-color」はボタンのメイン(表面)の色をしているCSSです。
「box-shadow」は、ボタンを立体的に見せる"影"の太さと色を指定しています。
青いボタンに変更してみる
試しにボタンを青いボタンに変更してみます。
ボタン表面の色を"#0099ff"、影の色を"#003366"(rgba指定だと"rgba(0,51,102)"に変更、ついでに大きさも300pxで少し小さく、大きさ固定してみます。
変更したCSSは、こんな感じです。
.shiny-btn2 {
display: block;
position: relative;
width: 300px;/*ボタンの幅*/
padding: 10px 0;
margin: 30px auto;
background-color: #0099ff;/*ボタンの色*/
box-shadow: 0 3px 0 0 rgba(0,51,102,1);/*影の色(rgbaの値を変更)*/
border-radius: 5px;このCSSの実際のボタンはこんな感じになります。
Yahooを開く
色の指定については、以下のような色見本のWebサイトを参考にすれば設定する値を簡単に見つけられると思います。
まとめ
クリック率が高くなるという噂のキラリと光るボタンをCSSだけで作成、実際にボタンを設置する方法について記載しました。
CSSやhtmlに詳しくなくても基本コピペでできるので初心者の方でも簡単に設置できるかと思います。
光るボタンをCSSだけで作る方法は、ちょっとググればたくさん公開されていますし、設置の方法は基本ここで紹介した方法と同じですので色々試してみてください。
もしもCSSとかhtmlとかよくわからない、WordPressのテーマのカスタマイズもよくわからないし、めんどくさいというのであれば、有料ではありますがそういった機能を最初から豊富にそろえてあるテーマもあります。
光るボタンやランキング表示なども簡単に作れてアフィリエイトに特化したテーマになっているので、そういうテーマを使ってみても良いかもしれないです。
以上、最後まで読んでくれてありがとうございました！
コメント