WordPress(ワードプレス)の扱いにだんだん慣れてくると、もっと記事をオシャレに装飾したいなぁーなんて思ってきますよね。
アフィリエイトやブログを運営する上で、アフィリエイトリンクや誘導したいリンクがある場合、特にボタンはユーザーにリンクを踏んでもらうためにとっても重要なものであり、いかに目立たせられるかが勝負です。
しかし、ユーザーの目に止まるようなオシャレなボタンを作ろうと思うと、CSSを何やかんや弄り倒さないといけないわけです。そして、初心者さんは一旦諦めてしまったり…。
私が使っているテーマ『JIN』には、ボタンデザインは何種類か標準装備されていますが、欲を言うと動くボタンが作りたい…!
ということで、見つけたのが『CLICKLIS(クリックリス)』というプラグインです。
このプラグインを使うことで、何よりもライバルサイトとの差別化が簡単にできるというのがクリックリスのいいところ!
もちろん、良い記事を書くことでライバルと差をつけるのが1番の目標ですが、まずは見た目を整えて自分のモチベーションを上げていくのも、楽しくブログを続けるためには必要ですよね。
Contents
CLICKLIS(クリックリス)は動くボタンを簡単に作れるプラグイン
『CLICKLIS(クリックリス)』は、ボタンデザイン・色・テキスト・URL等の簡単な詳細を設定するだけで自動でボタンコードを生成してくれる、WordPressのプラグインです。
できあがったコードを、記事のボタンを置きたい箇所にコピペするだけで、簡単にオシャレな動くボタンや動く画像を作ることができます。
- ボタンをクリックしてもらえない
- 記事全体のインパクトがない
- アフィリエイトが上手くいかない
- ブログへのモチベーションが下がってきた
こんなにたくさんの種類のアニメーションボタンが簡単に作れる
作れるアニメーションボタンは全部で8種類!
カラーは上記の4色以外にも『ユーザーカラー』で好きな色を設定することができるので、ご自身のブログのイメージカラーに合わせてボタンカラーを設定することが可能です。
横並びボタンも作れる
このような2つ横並びのリンクボタンも簡単に作れてしまいます。
なかなか使える配置ですね。
画像もブルブル動かせる
広告バナー(画像)も簡単にブルブル動かすことができます。
うん、とにかく目立つわ。
CLICKLISで動くボタンの簡単な作り方
ダウンロード方法
まずはこちらからCLICKLISの購入手続きをしてください。購入手続きができましたら、『infotop』にログインします。
IDとパスワードを入力しログインできたら、『注文履歴』をクリックし『購入履歴一覧』のページへ飛びます。

『購入履歴一覧』の中からCLICKLISのファイルをダウンロードします。
『ダウンロード』をクリックします。確認画面が出てきたら、迷わずダウンロードボタンをポチッとしてください。

すると、検索窓の右端に下向きの矢印マークがあり、そこをクリックしてみるとダウンロードしたCLICKLISのファイル名が確認できます。(環境:iPhone7/iOS 13.2.2)
ファイル名をクリックしてみると、『iCloud Drive』の中の『ダウンロード』フォルダの中に、CLICKLISのzip形式のファイルが保存されているのがわかります。

これでファイルのダウンロードは完了です。次はワードプレスで使えるようにインストールをします。
インストール方法
ワードプレスのメニューから『プラグイン』>『新規追加』と進み、『プラグインのアップロード』をクリックします。

『ファイルを選択』のボタンが出てくるのでクリック。『ブラウズ』>『iCloud Drive』>『ダウンロード』と進み、先程保存したzipファイルをクリックします。


『今すぐインストール』をクリック、その後『有効化』して完了です!

使い方
CLICKLISのプラグインをインストールし有効化すると、ワードプレスのメニュー一覧にかわいいリスのアイコンと共にCLICKLISの項目が現れます!

CLICKLISの詳細設定をしていきます。
まずは『ユーザーカラー』ということで、お好みでカラーコードを入力しておくと、そのカラーのボタンを作ることができます。

ボタンコードを生成していきます。
『ボタンタイプ』からお好きなアニメーションを1つ選択します。

次はボタンの色です。
カラーは4色と、先程設定したユーザーカラーの中から選択できますので1つ選んでください。
『ボタンテキスト』の欄に、ボタンに表示したい文字を入力します。

『ボタンリンクURL』に誘導したいリンクのURLを入力します。

『その他設定』は適宜選択してください。
自分のページに戻ってきてもらいやすくするため、設定しておくことをオススメします。
外部リンクであれば、基本は設定しておけば大丈夫です。nofollowを設定することで検索エンジンに「このリンクをたどらない」という指示を伝える事ができます。nofollowを設定しない場合、リンク先のページの評価を上げたり、場合によっては自分のページの評価を下げてしまうことに繋がります。
すべて選択・入力し終わったら『ボタンコード生成』をクリックし、下の枠に出てきたコードをコピーして、ボタンを設置したい場所にペーストすれば、かわいいアニメーションボタンのできあがりです!
CLICKLISで得られる効果は?動くボタンを作るメリット・デメリット
メリット
- ライバルとの差別化ができる
- 見てもらいたいところの明確化ができる
- 自分のモチベーションをアップできる
ライバルとの差別化ができる
もちろん記事の内容が重要なのは大前提です。
その上で、どこが重要かわからないような味気ない記事か、適度に装飾された見やすい記事、どちらの記事をまず読みたいでしょうか?
私だったら、後者です。
『あれ、この人の方が詳しそうだな』って思わせられたら勝ちですよ。
見てもらいたいところを明確化できる
私自身がそうですが、読者さんは結構記事を流し読みします。
激しく画面をスクロールしていく中で、なにやら動いているモノが表れるとそこで目を止めますよね。
その前後の文章って読んでもらいやすいですし、読者さんにとっても『あーここを見ればいいのね!』ってわかりやすいです。
自分のモチベーションをアップできる
冒頭でも触れましたが、こんなにオシャレなアニメーションボタンは到底自分の技術では作れません。
それが、このプラグイン1つでしかも簡単操作で作れてしまう。
憧れのアニメーションを記事に含めることで、記事を書くのも楽しくなります。
デメリット
- 使い方を間違えると読みづらい
- なんだか怪しい?
使い方を間違えると読みづらい
読者さん目線で考えてみてください。
あまりにアニメーションを乱用すると記事がゴチャゴチャして見づらく、ただただうっとーしくてリンクを踏んでもらうどころか、早期にページを離れてしまう可能性があります。
それではせっかくのオシャレなボタンが逆効果になってしまいます。
なんだか怪しい?
あまりにも動きまくるボタン…あなたはクリックしますか?
個人の好みとか感覚の違いですが、私だったらなんとなく怪しくて、たぶんクリックはしないような…。
まとめ
- ボタンをクリックしてもらいたい
- 記事全体のインパクトを足したい
- アフィリエイトで成功したい
- ブログへのモチベーションを上げたい
私自身、CLICKLISを見つけてすぐに購入を決めました。
そのぐらい、私にとっては魅力的なプラグインでしたし、実際に使ってみても本当に使い勝手がよく、神プラグインの1つだと思ったので、今回ご紹介させてもらいました。