【WordPress】CSSだけで動きのあるボタンを設置してみた

公開日:2019年4月3日 Wordpress



またまたWordpressネタ。私にはそれしかないのか??と自問自答してます(汗)。 WordPressのテーマは大きく分けると有料のものと無料のものがあります(おおざっぱすぎ??)。この2つの大きな違いは

  1. デザイン(色味や隙間)の違い
  2. テーマカスタマイザーという画面上でテーマ内の変更ができる機能でどこまでできるかの違い
  3. 投稿や固定ページを作るときに便利な効果がどれくらい備わっているかの違い

位で、出来上がったページのコードを見る限りでは「SEOに有利」というのは個人的にどう?というところがあります。そもそもSEOってどんなコンテンツがあるページなのか(何が書かれているのか?)が大事なので・・・。

今回はその中で3にあたるものの1つ、リンクなどのボタンを美しく表示する方法になります。 これも特に有料テーマだからできることではなく、テーマを購入すれば何もしなくてもその準備ができているという違いだけです。

今見ていただいているサイトは「White Tiger」という無料のテーマを使っていますが、設定さえすればこれから紹介するようなボタンは簡単に設置できますから頑張って設定してみましょう。

と偉そうなことを言ってますけど実はこのボタンデザイン、いろいろなところでコピペ記事??のように紹介されていて、CSSの内容もページの構成もほぼ一緒(笑)。いったい誰が最初に掲載したのかが全く分からない状態です。

かくいう私もコピペして実装したのでコードの紹介なんかしません、というかできません(笑)から詳しく書かれているサイトを紹介させていただきますね。

独断と偏見ではありますが、私自身はキラッと光る(白い帯が時折移動して光るように見える)ボタン以外の効果にも言及されている [blogcard link=”https://thesaibase.com/design/css-cv-buttons#CSS”] を参考にさせていただきました。

CSSだけで動きのあるボタンの実装サンプル

百聞は一見に如かずということで、早速どんなボタンが出来上がるのか、サンプル表示しておきます。
※多分このボタンデザインを削除することはないと思いますが、もしも表示されてなかったらごめんなさい・・・。

ボタン全体が時折プルプル+アイコンがプルプル+キラリ

アイコンがプルプル+キラリ

予測のつかない動きをする感じ

※バウンドのCSSクラス設定で「is-」の抜けている箇所があったので修正しました(そのままだとボタンが極限まで縮小・拡大されます)

率直な感想いやあすごいですね~~、CSSだけでこんな風にできるんですね!!

個人的にはボヨヨーーーンボタンが好きなんですけど、作者も仰ってるように実装して効果があるのかなぁ?という気はします。

ここへコードを記述すると私もコピペ軍団の一人になってしまいますので、詳しくは

をご覧ください。

せっかくWordpress使ってるんだから編集画面でボタン化しよう!

WordPressの投稿エディタは最新のGutenbergというブロックエディタと、従来のテキストエディタ、ビジュアルエディタと実に3種類あります。

各エディタにはボタンクリックで決められたコンテンツが挿入できるようになっています。有料テーマではいろいろな表現が既にボタンになっていますから「わぁ💛使いやすい」となることでしょう。でもこれらのボタンを追加できるって知ってました??別に難しくないんですよ。今回紹介した動きのあるボタンデザインも、いちいちどこかに保存しておいてコピペなんてすることなくボタン一発でコンテンツが作れるようになります。

※私の場合まだGutenbergに慣れていない・・というか今のところ使うつもりがないので、今回はビジュアルエディタとテキストエディタでのボタン化の方法を紹介しておきます。

WordPressお得意のプラグインを使おう

エディタの本文上にボタンを追加・管理できる便利なプラグインがあります。それは

です。本当に便利なプラグインで私は必ず使っています。一度登録したボタンはエクスポート/インポート機能を使って他のサイトにも移植できるので本当に使い勝手がいいですよ!

プラグインを有効化したら「設定」→「AddQuicktag」をクリックして画面を開きましょう。

すると、ボタンに表示するタイトルとボタンをクリックしたときに追加されるコード、どの投稿タイプ(投稿?固定ページ?)で使うのかの選択が出てきます。

ボタン名は適当にして(エディタに表示されます)、コードは参考サイトのhtmlコードを入れ、投稿で使うなら投稿にチェック、固定ページで使うなら固定ページにチェックを入れるだけ。本当に簡単です(多分管理画面の画像なんかいらないと思うので割愛します)。

これで記事を書きながら簡単にボタンの設置かできますね。




コメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)