キラリと光るボタンを作成してみた【WordPress・Cocoon備忘録】

初心者ブロガーのアフィリエイトの記録

WordPress・Cocoonでキラリと光るボタン

クリック率が上がるという噂のある「キラリと光るボタン」。
ちょっとあこがれていました。

きらりと光るボタンのサンプル

リンク先のURLブロックエディタでは簡単にできるそうですが、旧エディタを使っているので、
こちらのサイトの記事を参考にCSSで簡単に作ってみました。

きらりと光るボタンの設置方法

設置の手順は簡単です。

  1. 子テーマのstyle.cssにCSSを追加
  2. 設置したい場所にコードを記載する

だけです。

子テーマのstyle.cssにCSSを追加

本来なら、Wordpressの外観→テーマ編集・テーマエディターでできるのですが、私のwordpressではテーマ編集・テーマエディターがでてきません。
そこで、プラグインのExUnit(VK All in One Expansion Unit)のCSSカスタマイズを使いました。
Wordpressの上のほうにExunitとあるので、そこからCSSカスタマイズを指定します。
そして以下をコピぺします(下記リンク先からコピペできます)。

.shiny-btn2 {
display: block;
position: relative;
width: 95%;/*ボタンの幅*/
padding: 10px 0;
margin: 30px auto;
background-color: #0099cc;/*ボタンの色*/
box-shadow: 0 3px 0 0 #005BAC;/*影の色(rgbaの値を変更)*/
border-radius: 5px;
font-weight: bold;
font-size: 16px;
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; }
}
これで基本設定は終了です。Boldのところはお好みで変えてみてください。

ボタンの設置

あとは本文のボタンを設置したい場所に、テキストで、

<a href=リンク先のURL class=shiny-btn2>きらりと光るボタンのサンプル</a>
 
を挿入します。すると、
 
 

きらりと光るボタンのサンプル

こんな感じでボタンを作ることができます。
色、フォントサイズなどはcssカスタマイズ側で変更できます。

サイドバーにボタンを設置したい場合も、ウイジェットの「カスタムHTML」に<a href~を入力するだけで利用できます。

きらりと光るボタンのまとめ

思ったより簡単にできました。
全部のブログのボタンをキラリ、とさせたいところですが、一週間くらいはかかりそうなので、
主だった記事だけを変更して様子をみようと思います。

果たしてクリック率upの噂は本当でしょうか?

追伸
すみません。こちらのブログはWP Content Copy Protection & No Right Clickというプラグインが入っていて、
記事や画像のコピぺができなくなっています。
Noteに同じものををはりましたので、こちらからコピペしてください。

アフィリエイト関連記事 #1

【うつ病体験記・休職中の過ごし方】リハビリにブログ運営をはじめました!
記事の順番が前後してしまいましたが、ブログとアフィリエイトを始めたころの記事をアップします。 ブログを書いてみよう! 自分の気持ちを理解してもらいたい、という感情は強くなるのもこのうつ病の特徴だと思います。 友達や家族にはなかなか伝え...
うつ病主夫が独学でアフィリエイト!目指せ初収益!
アフィリエイト初収益を目指して!長年うつ病を患っているの私がリハビリを兼ねて独学でブログアフィリエイトを始めました。初心者向けアフィリエイト・ブログのノウハウや、SEOやwordpressに悪戦苦闘する様子をブログにしました。
無料でブログPVを増やす対策【独習独学アフィリエイターの備忘録】
気がつけばもう春、うつ病主夫の独学独習アフィリエイト ついこの前2月1日を迎えたと感じていたのが、気が付いたら3月1日。 2月は日数が少ないとは言え、ちょっと早すぎ。 感覚的には1週間程度しか感じていないと子供に話したら、 とうちゃ...
完全孤独な素人ブロガーがアフィリエイトで初収益!
独学アフィリエイトで稼ぐことはできるのか? アフィリエイトは独学で続けているけれど、それでいいんだろうか?と最近は考えますね。 アフィリエイトのブログを見ていると、独学は難しいと言われているみたいです。 私の場合、アフィリエイトは本や...
Wordpressセキュリティー対策|初心者にもおすすめプラグイン
Wordpressセキュリティー対策 その1 「WP doctor Malware scanner Pro」を導入 私のアフィリエイトブログにはもともとAkismet Anti-Spam (アンチスパム)が入っていました。 Jetp...
レントラックスからオファー|フェルマも登録|クローズドASP評判
Rentracksとfelmatの特徴と感想   ☆クローズドASPレントラックスとフェルマの実績、特徴は? ☆ レントラックスとフェルマの評判、口コミは? クローズドASPとは? ASPには大きく分けて2種類あります。通常の...

アフィリエイト関連記事 #2

初心者でもできるアフィリエイトブログの成約率アップの対策【備忘録】
ブログのPVは増えてきているんだけれど成約率が上がらない。 最近ほぼ毎日、各記事のPV数はチェックするのが日課になりました。スマホでもWordpressが使えるので、暇があると記事を書いてみたり、PVを確認しています。 今は、ブログ...
EWWW Image Optimizerで画像をWebPへ変換【備忘録】
 EWWW Image OptimizerでWebPに変換!ブログの高速化! 「EWWW Image Optimizer」は 「表示速度」を改善したい 「画像ファイルが多くなってきたので圧縮したい」 「次世代画像形式のWe...
Cocoonトップページを固定ページなしで簡単【サイト型風】に
Cocoonのトップページをサイト型風(?)に改良したい Cocoonはトップページを固定ページで作らずに簡単設定 Cocoonは2020.5 Ver.2.1.6.xからトップページの記事一覧をカテゴリー別に横並びやタブメニューで表示す...
初心者でもCocoonでブログ運営|簡単に見出しをカスタマイズ
ブログ初心者の私も使っているWordpressテーマのCocoon。その人気と使うメリットをご紹介します。 ブログ初心者に人気のCocoonとは 私は無料のワードプレスのテーマの「Cocoon」をしています。初心者でも自分好みのサイ...
Search Console「送信された URL に noindex タグが追加されています」とエラーの対処【備忘録】
「送信された URL に noindex タグが追加されています」「X-Robots-Tag' http ヘッダーで 'noindex' が検出されました」とのエラーに対処法をご紹介します。

アフィリエイト関連記事 #3

アピールエリアとヘッダーの幅が短い|カラム幅を揃える【Cocoon備忘録】
Cocoonを使ったブログで、どのページもアピールエリアとヘッダーの長さが短くなりカラム幅がずれてしまうトラブルを修正しました。カラム全体がすっきりしました。
【Affiliate Friends】でクローズドASPの登録ができます。
これは便利!アフィリエイトフレンズの「報酬レポートまとめ機能」   アフィリエイターにとって大変便利な機能が無料で使えるAffiliate Friendsをご存知でしょうか?この記事では、Affiliate Friendsがどのようなサ...
Googleにインデックスされない原因と対策【Wordpress備忘録】
Googleにサイトがインデックスされない。原因と対策を考えてみた。 ちょっと前からGoogle検索で出てこないページと出てくるページがあることがちょっと気になっていました。 Google検索窓に「site:ブログのURL」を入力してイ...
キラリと光るボタンを作成してみた【Wordpress・Cocoon備忘録】
Wordpress・Cocoonでキラリと光るボタン クリック率が上がるという噂のある「キラリと光るボタン」。 ちょっとあこがれていました。 きらりと光るボタンのサンプル リンク先のURLブロックエディタでは簡単にできるそうですが、...

アフィリエイト関連記事 #4

XML Sitemapsの使い方と設定方法について【Wordpress備忘録】
自分のブログをしっかりgoogle検索の検索エンジンに巡回してもらうためにはサイトマップはとても重要です。新しい記事の公開や更新のたびにサイトマップを作って送信するのは大変面倒です。  XML Sitemaps(Google XML Si...
TinyMCE Advancedのアンカーまでワンクリックで移動【Wordpress備忘録】
TinyMCE Advancedでリンクとアンカーの設定方法   Word Pressでページ内、または違うページのある特定の場所に移動させたい、というときの方法をまとめました。 TinyMCE Advancedを使うと1分でリン...
Wordpressで文章や画像を横並びにしたい【Shortcodes by Angie Makes】
WordPressの記事内で段組みして、画像、文章を横並びで配置したい WordPressで本文を書いているときに、ここは文章や画像を横並びにして表示したい、と思う時があります。 Shortcodes by Angie Makesは、文...
【うつ病体験記・休職中の過ごし方】リハビリにブログ運営をはじめました!
記事の順番が前後してしまいましたが、ブログとアフィリエイトを始めたころの記事をアップします。 ブログを書いてみよう! 自分の気持ちを理解してもらいたい、という感情は強くなるのもこのうつ病の特徴だと思います。 友達や家族にはなかなか伝え...
 

コメント

PAGE TOP
error:Content is protected !!
タイトルとURLをコピーしました