キラリと光るボタンを作成してみた【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週間程度しか感じていないと子供に話したら、 とうちゃん、おかしいよ!って馬鹿にされてしまいました。 近所の公園の早咲きの桜はもう散っていました。 梅はちょうど満開。 そうか、3月になったってことは昨日で傷病手当切れたんだ...
完全孤独な素人ブロガーがアフィリエイトで初収益!
独学アフィリエイトで稼ぐことはできるのか? アフィリエイトは独学で続けているけれど、それでいいんだろうか?と最近は考えますね。 アフィリエイトのブログを見ていると、独学は難しいと言われているみたいです。 私の場合、アフィリエイトは本やブログで勉強していますが、知らない間に間違えたことをやってしまって、それに気づくのに時間がかかっているようにも感じます。 高額な情報商材を購入したり、塾に入ったり、コ...
Wordpressセキュリティー対策|初心者にもおすすめプラグイン
Wordpressセキュリティー対策 その1 「WP doctor Malware scanner Pro」を導入 私のアフィリエイトブログにはもともとAkismet Anti-Spam (アンチスパム)が入っていました。 JetpackのダッシュボードにAkismetのサマリーみたいなのがでてくるのですが、 とあるブログに関しては 総当たり攻撃に対する保護機能 5,229 ブロックした悪意あるロ...
レントラックスからオファー|フェルマも登録|クローズドASP評判
Rentracksとfelmatの特徴と感想   ☆クローズドASPレントラックスとフェルマの実績、特徴は? ☆ レントラックスとフェルマの評判、口コミは? クローズドASPとは? ASPには大きく分けて2種類あります。通常のASP(オープンASP)の場合、希望者はだれでも登録して利用することができます。 もう一つはクローズドASPと呼ばれるもので、一般的な募集を行わずに、それぞれのASP独自の方...

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

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

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

アピールエリアとヘッダーの幅が短い|カラム幅を揃える【Cocoon備忘録】
Cocoonを使ったブログで、どのページもアピールエリアとヘッダーの長さが短くなりカラム幅がずれてしまうトラブルを修正しました。カラム全体がすっきりしました。
【Affiliate Friends】でクローズドASPの登録ができます。
これは便利!アフィリエイトフレンズの「報酬レポートまとめ機能」   アフィリエイターにとって大変便利な機能が無料で使えるAffiliate Friendsをご存知でしょうか?この記事では、Affiliate Friendsがどのようなサービスを提供しているのか詳しく解説します。   Affiliate Friendsを知るきっかけ 以前に、とある記事の問い合わせフォームにレントラックスからオファー...
Googleにインデックスされない原因と対策【Wordpress備忘録】
Googleにサイトがインデックスされない。原因と対策を考えてみた。 ちょっと前からGoogle検索で出てこないページと出てくるページがあることがちょっと気になっていました。 Google検索窓に「site:ブログのURL」を入力してインデックス(Googleに自分のブログのページを認識してもらい、Googleのデータベースにその情報を格納させること)されているか調べてみたところ、インデックスされ...
キラリと光るボタンを作成してみた【Wordpress・Cocoon備忘録】
Wordpress・Cocoonでキラリと光るボタン クリック率が上がるという噂のある「キラリと光るボタン」。 ちょっとあこがれていました。 きらりと光るボタンのサンプル リンク先のURLブロックエディタでは簡単にできるそうですが、旧エディタを使っているので、 こちらのサイトの記事を参考にCSSで簡単に作ってみました。 きらりと光るボタンの設置方法 設置の手順は簡単です。 子テーマのstyle.c...

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

XML Sitemapsの使い方と設定方法について【Wordpress備忘録】
自分のブログをしっかりgoogle検索の検索エンジンに巡回してもらうためにはサイトマップはとても重要です。新しい記事の公開や更新のたびにサイトマップを作って送信するのは大変面倒です。  XML Sitemaps(Google XML Sitemaps) は、自身のブログの記事を公開したり、更新したりすると自動的にサイトマップを生成し検索エンジンに通知してくれる大変便利なプラグインです。この XML...
TinyMCE Advancedのアンカーまでワンクリックで移動【Wordpress備忘録】
TinyMCE Advancedでリンクとアンカーの設定方法   Word Pressでページ内、または違うページのある特定の場所に移動させたい、というときの方法をまとめました。 TinyMCE Advancedを使うと1分でリンクができます。 1. テキストにリンクを設定する 2.リンク先にアンカーを設定する だけでOKです。   テキストにリンクを設定する(移動元) テキストのリンクを設定した...
Wordpressで文章や画像を横並びにしたい【Shortcodes by Angie Makes】
WordPressの記事内で段組みして、画像、文章を横並びで配置したい WordPressで本文を書いているときに、ここは文章や画像を横並びにして表示したい、と思う時があります。 Shortcodes by Angie Makesは、文章や画像を横に並べることができる便利なプラグインです。 Shortcodes by Angie Makesを有効化するとエディタに新しいボタンが追加されます。 「C...
【うつ病体験記・休職中の過ごし方】リハビリにブログ運営をはじめました!
記事の順番が前後してしまいましたが、ブログとアフィリエイトを始めたころの記事をアップします。 ブログを書いてみよう! 自分の気持ちを理解してもらいたい、という感情は強くなるのもこのうつ病の特徴だと思います。 友達や家族にはなかなか伝えにくかったり、理解してもらうことが難しいケースも多いんです。 また心療内科の先生では、時間もなくて話をすべてうけとめてもらうことも難しいです。 そこで、誰かに話をする...
 

コメント

PAGE TOP
error: Content is protected !!