実践記録◆超便利！WordPressで簡単に「リンクボタンを作成する」方法・プラグイン

 日々の実践記録               　　

実践記録◆超便利！Wordpressで簡単に「リンクボタンを作成する」方法・プラグイン

WordPressの記事作成時に関連記事の紹介時やランキング情報の紹介時に「詳細はこちら」とか「もっと詳しく見る」などリンクボタンを設置したい場合がよくあります。
そこで、WordPressのプラグインのAddQuickTagを使用して、その設定画面より各種のリンクボタン用タグを設置して簡単に「リンク付ボタンを作成する」方法を解説します。

このボタンにより飛ばしたいリンク先ページの簡単なタイトルをボタンに表示しておけば読者に見た目でわかりやすく関連ページへの誘導が可能になります。

・・・例えば、ほかのページからこのページに飛ばしたい場合は「AddQuickTagの設定方法」とか「AddQuickTagでのリンクボタン作成方法」などのリンク付ボタンを設置しておけば簡単にこのページに誘導することが可能になります。

ここでは、すでにプラグインのAddQuickTagがインストールが完了していることを前提に解説します。
インストールがまだ未完了の場合は下記を参考にプラグインのAddQuickTagのインストールを完了させてください。

AddQuickTagのインストール
（↑こんな感じのボタンになります。↑）

１．AddQuickTagの設定方法

設定するボタンの種類は全部で５種で「もっと見る」ボタンのほか４種の横長のテキストリンク付ボタンでボタンの横幅はテキストの長さに合わせて自動的に変化されます。
（使用時の実施例も表記しました。）

それでは、プラグインのAddQuickTagの設定方法（上記の５種類）を解説します。

ダッシュボード＞フラグイン＞インストール済みプラグインからAddQuicktagの設定をクリックします。

次にAddQuicktagの「クイックタグの追加と削除」画面より設定を行います。

1-1) ボタン（もっと見る）・・・AddQuicktagの設定項目の説明

設定項目は下記の５項目です。

１ボタン名、２開始タグ、３終了タグ、４並び順、５チェックの５項目です。

具体的に説明しますと,下記のように設定します。（青字のみを設定）

実際の設定は下記のようにします。

これで、１セットの設定は完了です。

最後に右下の「変更を保存」ボタンをクリックします。

実施例　 もっと見る▶

このページの目次へ戻る▲

1-2) ★ボタン 橙（上下）・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
（設定方法の全容は、「1-1 ボタン（もっと見る）」の場合と同様です。

具体的に説明しますと,下記のように設定します。（青字のみを設定）

CSSを使用しています。　（Class=”btn01″）
テーマファイルのstyle.cssに下記CSSを設置します。

実施例　ボタン 橙（上下）

このページの目次へ戻る▲

1-3) ★ボタン 桃（色変）・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
（設定方法の全容は、「1-1 ボタン（もっと見る）」の場合と同様です。

具体的に説明しますと,下記のように設定します。（青字のみを設定）

CSSを使用しています。　（Class=”btn04″）
テーマファイルのstyle.cssに下記CSSを設置します。

実施例　ボタン 桃（色変）

このページの目次へ戻る▲

1-4) ★ボタン 青（色変）・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
（設定方法の全容は、「1-1 ボタン（もっと見る）」の場合と同様です。

具体的に説明しますと,下記のように設定します。（青字のみを設定）

CSSを使用しています。　（Class=”btn02″）
テーマファイルのstyle.cssに下記CSSを設置します。

実施例　ボタン 青（色変）

このページの目次へ戻る▲

1-5) ★ボタン 橙（色変）・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
（設定方法の全容は、「1-1 ボタン（もっと見る）」の場合と同様です。

具体的に説明しますと,下記のように設定します。（青字のみを設定）

CSSを使用しています。　（Class=”btn03″）
テーマファイルのstyle.cssに下記CSSを設置します。

実施例　ボタン 橙（色変）

このページの目次へ戻る▲

２．AddQuicktagの使い方

それでは、ここからは実際の記事作成時における登録したAddQuicktagの使い方について説明します。

2-1) ボタンを設置したい箇所にカーソルを移動

ボタンを設置したい箇所の先頭にカーソルを移動します。

2-2) ビジュアルエディタの「Quicktags▼」をクリック

WordPressでは本文を編集する場合に使用するビジュアルエディタにQuicktagsと言うプルダウンメニューができていると思います。

「＠Quicktags▼」をクリックします。

2-3) プルダウンメニューの「★ボタン 橙（上下）」をクリック

次に、そのプルダウンメニューに今登録したボタン名の、★ボタン 橙（上下）がありますので、ボタンを設置したい箇所にカーソルを移動したあと「★ボタン 橙（上下）」のメニューをクリックします。

すると、「ボタン 橙（上下）」のように、カーソルの位置にボタンを設置することができます。

このページの目次へ戻る▲

３．まとめ

今回は、AddQuicktagでの「リンクボタンの作成方法」の設定を解説しましたが、AddQuicktagではよく使うタグを設定しておくだけで簡単に文字装飾などのデザインの作成など複数個の設定が可能です。

自分が良く使う記事の装飾を一度登録しておけば、使いたいデザインを使いた時にすぐに使用できますので大変便利です。

今後、徐々に私が現在使用している装飾タグの設定を紹介していきたいと思っています。

次回は、文章を囲む方法について説明したいと思います。

参考・・・

今日は、ここまでです。

このページの目次へ戻る▲

➤ next　実践記録 063◆Wordpressのプラグインで簡単に「文章を囲む」設定方法

====================

初心者はネットで稼ぐために何をすべきか。

➤ 「ブログの概要」へ戻る

====================