1. HOME
  2. ブログ
  3. 技術
  4. WordPress Button Plugin MaxButtons の使い方

BLOG

ブログ

技術

WordPress Button Plugin MaxButtons の使い方

プラグイン概要

WordPress のプラグイン MaxButtons は、色やテキストのフォント、グラデーションなどさまざまな指定ができるボタン作成用のプラグインです。WordPressのサイトから商品のページやどこか他のサイトなどにリンクを貼ろうとしたとき、テキストのみのリンクではすこし寂しい感じのときがあります。そんなときはリンクをボタンにするとユーザに認識されやすくなりクリック率も上がるはずです。MaxButtons はプレビューを見ながら手軽にいろいろなボタンが作成できるのでサクッとボタンを試してみたい方には良いプラグインだと思います。

このページでは WordPress Button Plugin MaxButtons の基本的な使い方を紹介します。


インストール方法

まず、WordPress のダッシュボード画面を開きます。

ダッシュボード画面
  1. ダッシュボード左側のメニューから「プラグイン」を選択します
  2. 表示されたメニューから「新規追加」を選択します
プラグイン検索画面
  1. 表示された検索画面のキーワード欄に「WordPress Button Plugin MaxButtons」と入力します
  2. 表示された検索結果の WordPress Button Plugin MaxButtons の情報を確認します
  3. 「今すぐインストール」ボタンをクリックします
プラグインインストール画面
  1. プラグインのインストールが完了すると「有効化」ボタンが表示されるので、このボタンをクリックします
プラグイン一覧画面
  1. 有効化が完了するとプラグイン一覧が表示されるので「Buttons」をクリックします
WordPress Button Plugin MaxButtons 設定画面

以上で WordPress Button Plugin MaxButtons のインストールが完了し、設定画面が表示されます


日本語化

WordPress Button Plugin MaxButtons は日本語化されていませんので、インストールしただけでは上記のように英語のメニューになっています。
英語での使用に違和感の無い方はこのまま使用しても問題無いと思います。

日本語で使用したい方は、日本語データを販売していますのでこちらを適用してからご使用ください。

日本語化ファイルを適用すると以下のように日本語メニューで設定等が行えるようになります

WordPress Button Plugin MaxButtons 設定画面

これ以降は日本語化後のメニューを使って WordPress Button Plugin MaxButtons の使い方説明を行っていきます。


WordPress Button Plugin MaxButtons の使い方

まずは基本的なボタンを作成してページに表示してみます

WordPress Button Plugin MaxButtons設定画面
  1. ダッシュボード左側メニューの「MaxButtons」を選択します
  2. 「最初のボタンを作成します」をクリックします

ボタンの設定画面が表示されます

WordPress Button Plugin MaxButtonsボタン設定画面

この画面でボタンの基本設定をしてみます

  1. ボタン名を入力します。いろいろなところで使われるので日本語ではなくアルファベットで名前をつけておいたほうがよさそうです
  2. ボタンがクリックされたときにリンクする先のURLを入力します
  3. リンク先を新しいウィンドウで開きたい場合は「新しいウィンドウで開きます」にチェックをつけます
  4. ボタンのツールチップはボタンにマウスポインタを重ねた時に表示されるテキストを入力します
  5. テキストはボタンに表示される文字です
  6. プレビュー欄にボタンの見た目が表示されているので見た目を確認します

「保存」をクリックしてボタンデータを保存します

保存をするとボタンを使用するためのショートコードが生成されます

WordPress Button Plugin MaxButtonsボタン設定画面
  1. 表示されたショートコードをコピーしておきます。このコードを投稿ページに貼り付けるとボタンが表示されます
  2. ショートコードは属性値という値を指定することによってカスタマイズできます。idの代わりにnameを指定すると番号でなく設定した名前で貼り付けが可能です。
  3. url属性を指定するとリンク先のアドレスを変更できます
  4. text属性を指定するとボタンのテキストを変更できます
  5. このように属性値を指定することによってボタンの色などの基本的な設定は変更せずにテキストなどを変更したボタンが貼り付け可能です

ショートコードを決めたら投稿画面で貼り付けてみます

新しく記事の投稿を作成してボタンを貼り付けます

WordPress Button Plugin MaxButtons記事投稿画面
  1. 記事中に先ほど決めたショートコードを貼り付けます
  2. プレビューをクリックして投稿ページを表示してみます

表示されたプレビューページを確認してみます

WordPress Button Plugin MaxButtons投稿プレビュー画面
  1. 貼り付けたボタンが表示されていることを確認します

基本のボタンが表示できました。簡単ですね。

ボタンをカスタマイズしてみます

WordPress Button Plugin MaxButtonsボタン画面
  1. ダッシュボードで「MaxButtons」をクリックしてボタン一覧を表示します
  2. 「新しく追加する」ボタンをクリックしてボタンを追加します

この操作で新しくボタンが追加されます

WordPress Button Plugin MaxButtonsボタン設定画面

ボタンの背景にグラデーションを付けてみます

  1. バックグラウンド内の「グラデーションを使用する」をONにします
  2. 「開始」をクリックしてボタン上部の色を指定します
  3. 「終わり」をクリックしてボタン下部の色を指定します
  4. プレビューを確認してグラデーションがかかっていることを確認します。上部の色から下部の色へ徐々に変化していくグラデーションが確認できるはずです。

設定できたら「保存」をクリックしてボタンを保存します

先ほどの投稿編集画面を開きます

WordPress Button Plugin MaxButtons投稿編集画面
  1. 新しく作ったボタンのショートコードを貼り付けます
  2. プレビューをクリックして投稿ページを表示してみます
WordPress Button Plugin MaxButtons投稿プレビュー画面
  1. グラデーションのついたボタンが表示されていることを確認します

このような形でいろいろな種類のボタンを作りページに貼り付けることができます

WordPress Button Plugin MaxButtons設定画面

その他にもいろいろな設定ができます

  1. 「基本」項目ではボタンの大きさやテキストの大きさや色・フォントなどが指定できます
  2. 「境界」の項目では、ボタンの境界の設定ができます。角丸の半径、線の幅、境界色、シャドウは影を設定できます
  3. 「バックグラウンド」はボタンの背景色を指定できます。
  4. 「テキストシャドウ」は文字に影をつける設定ができます。

これらの設定の組み合わせによって様々な見た目のボタンが作成できますので是非チャレンジしてみてください

以上で WordPress Button Plugin MaxButtons の使い方の解説は終了です。
WordPress Button Plugin MaxButtons の日本語化はこちらをご確認ください。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事