超簡単!ワードプレスのプラグインで記事内のボタンを動かす方法【ストークカスタマイズ】

sponsored links



こんにちは。理学療法士のfumiya(@fumiya0508_m)です。

ここ最近、理学療法士・作業療法士のブロガーが少しずつ増えてきているのを実感しています。

療法士の知識を全力で世に発信する良い傾向であるのとともに・・・

fumiya
やべーーー!\(゜ロ\)(/ロ゜)/

み、みんな、なんてオシャンティーなブログなんだ・・・(知識で負けるのは仕方ないとして…デザインではトントンじゃ…いや…か、勝たなければ!)

 

理学療法士・作業療法士でPCスキルのある人は多くないと思うので、みなさん結構有料テーマを使用しているな!っていう印象です。

有料テーマの良いところは、PCスキル(CSS・HTML)に詳しくなくても、ワード感覚でブログを書けるというのが非常に魅力なところです。

書くだけなら誰でもできますもんね。

↓個人的にはこの2つが好みです↓


 

コンテンツの内容で差別化できればいいのですが・・・

いかんせん私にはそのようなハイパーな頭脳がございませんので・・・(ToT)/~~~

違う方法で目立ってやろうという魂胆です(フッフッフ・・・!)

 

ということで、今回はブログ記事内にあるボタンをカスタマイズしていきたいと思います。

 

ブログ記事内のボタンって

ボタンとはこういうやつです。↓

PCからだとマウスを合わせると、ボタンが動いてくれるので「ボタンだ!」って分かりやすいのですが、スマホからでは分かりにくいとの意見もありました。

私の友人ではこれをボタンという認識さえなかったとのこと・・・。

そのため、ボタンに少し動きを加えてやろうと思います。

プラグインでサクッとね(●^o^●)

 

ワードプレスプラグイン【Shortcords Ultimate】

  • ワードプレス管理画面→【プラグイン】→【新規追加】→検索【Shortcodes Ultimate】と入力します。
  • インストール→有効化でOK。

 

このプラグインを使用すると、下のようなボタンが簡単に作成できます。

 

fumiya
こんな感じに新しいデザインのボタンも作成可能だし、このテーマ【ストーク】の既存のボタンにも応用可能です!

動きを加えて「ボタンですよ」って教えてやりましょう。

 

【Shortcodes Ultimate】を使用してボタンを簡単に作成する方法

【Shortcodes Ultimate】をインストール→有効化すると、

この上の画像のように「ショートコードを挿入」という項目が追加されます。

これをクリックして、まずはボタンを作成します。

 

「♡ボタン」を選択して、自分好みのボタンを作成しましょう。

 

  • 【リンク】:リンク先のURLを入力します。
  • 【ターゲット】:ボタンを押したときに同じタグで開くか新しいタグで開くかを決めることができます
  • 【スタイル】:好みのボタンのデザインを決めることができます。
  • 【背景】:ボタンの色を決めることができます。

 

  • 【テキストの色】:テキストの色を決めることができます。
  • 【サイズ】:ボタンのサイズを決めることができます。(さっきのボタンは15です)
  • 【可変】:文字数によってボタンの大きさを変更するかどうか?を決めることができます。
  • 【中央】:ボタンの配置する場所が左側なのか?中央なのか?を決めることができます。

 

  • 【半径】:ボタンの角をデザインを決めることができます。
  • 【アイコン】:ボタンテキストに前にくるアイコンを選択することができます。
  • 【アイコンの色】:アイコンの色を決めることができます。
  • 【テキストの影】:テキストの影、色などを決めることができます。

 

  • 【説明】:ここに文字を入力すると、小さい文字で説明文が記載されます。
  • 【on click】【rel属性】【title属性】:空白で問題なし。

 

  • 【コンテンツ】:ボタン内のコメントを入力することができます。

設定方法は以上です。

さいごに、プレビューで確認して【ショートコードを挿入】→納得のいくボタンが作成できたら【プリセット】で保存して終了です。

一応この設定の通りにすると、

このような仕上がりです。

では、次にこのボタンにアニメーションをつける方法をお伝えします。

↓こんなイメージです↓

 

記事内のボタンに動きを加えて、ボタンだと認知させる方法

まずは、どのように動かすか?という設定をします。

先ほどと同じように、【ショートコード挿入】から、

【アニメーション】を選択します。

  • 【アニメーション】:自分好みのアニメーションを選択してください。(めちゃくちゃあります…)
  • 【持続時間】:お好みで調整しましょう。
  • 【遅延】:お好みで調整しましょう。
  • 【インライン】:「いいえ」のままでOK。

 

  • 【別のCSSクラス】:空白でOK。
  • 【コンテンツ】:ここでテキストを入力できます。(ボタンのアニメーションを作成するのであれば、空白でOK

設定は以上です。

同じように、プレビューで確認し【プリセット】で保存してください。

fumiya
これで、ボタンをどのように動かすか?という設定は完了です。

次は、このショートコードを用いてボタンに新たな命を授けましょう!

 

ボタンに動きを加えるためには

先ほどの【ショートコードを挿入】とすると、

 

このように現れるはずです。

このアニメーションのショートコードで、ボタンのショートコードを挟み込むように設定します。

ボタンのショートコード(例)

[su_buton style=”stroked” background=”#96ef2d” size=”15″ center=”yes” icon=”icon: hand-o-right” icon_color=”#ffffff”]こんな仕上がりです[/su_buton]

ボタンのショートコードは、アニメーションのショートコードで挟まれる形になります

イメージとしては、以下のような感じです。

イメージです

[su_animat type=”bounce”][su_buton style=”stroked” background=”#96ef2d” size=”15″ center=”yes” icon=”icon: hand-o-right” icon_color=”#ffffff”]こんな仕上がりです[/su_buton][/su_animat]

*上記のショートコードは少しいじってあるので、コピペしてもボタンになりませんのでご注意を!

完成すると、一応こんな形になります。

 

fumiya
ストークの既存ボタンでも同様に、アニメーションのショートコードで挟み込むとバウンドするように動いてくれるので良かったらお試しあれ。

 

応用編として

 

以上、理学療法士のfumiya(@fumiya0508_m)でした。

 

sponsored links



ABOUTこの記事をかいた人

はじめまして、理学療法士のfumiyaです。1986年生まれ/妻と子供2人の4人家族。ブログ【PUSH】を運営しています。30代のただのサラリーマンが、行動することでどのように変化していくのか、変化できるのか。向かったベクトルがあちこち進んで迷走中ですが、できるだけ暖かい目で見守ってほしいです。