本ブログのWord Pressテーマは「THE THOR」を使用しています。
ボタン形式のリンクを設置する方法について解説します。
なんでこんなことを書いているかといえば、自身が「THE THOR」を導入時に一つ一つの機能について検索しながら、設定していたのでその大変さがわかるからです。
一つの機能について長々とではなく、ピンポイントで説明してくれていたら便利なので、自身が設定していって気づいたことも盛り込んで初めて利用する人がすんなり使えるようになればいいなと思って記述しています。
Word Pressテーマ「THE THOR」は有料ですが、スタートから導入していくことをおすすめします。
メリットしては以下の項目があります。
・2つのアカウントで利用できる。
・秀逸なデザインを設定できる。
・SEO対策実装済み。
・殆どのプラグインが不要（実装済み）。
・表示速度が向上します。
など非常に秀逸なテーマです。
当ブログでも使用しています。
早速ですが「THE THOR」に実装している機能、本題のリンクボタンについて説明します。
「THE THOR」は3種類のボタンを設置することができます。
上記のようなボタンです。
ボタンは背景色や文字の色も変更することができます。
ボタン形式のリンクの作り方
「THE THOR」でボタン形式のリンクを設置する方法ですが、クラシック版の段落では、「共通ボタン」をクリックします。
クリックすると以下のメニューがでてきます。
■プライマリボタン
■セカンダリボタン
■ノーマルボタン
以上の3種類となっています。
プライマリボタンについて
プライマリボタンにカーソルを合わせるとさらに配置を3つ選択できるようになっています。
・右
・中央
・左
上から右・中央・左となっており、それを実際に作成すると順に以下のようになります。
セカンダリボタンについて
セカンダリボタンも以下のように選択できます。
・右
・中央
・左
配置については概出しておりますので、中央の配置で大きさのみ例として作成すると以下の通りになります。
ノーマルボタンについて
ノーマルボタンも以下のように選択できます。
・右
・中央
・左
配置については概出しておりますので、中央の配置で大きさのみ例として作成すると以下の通りになります。
ボタンのリンク挿入の仕方について
実際にこのボタンにリンクを挿入する方法について記述します。
「共通ボタン」→採用したいサイズのボタンを選択します。
編集をクリックすると下記画像のように編集できる画面になります。
ここでリンク設定をクリックし「リンクの挿入／編集」を行います。
・「URL」は誘導したいURLを貼り付けます。
・「リンクテキスト」は冒頭の例では「THE THOR」としていますが、例のように記入したい文言を記述します。
・「リンクを新しいタブで開く」は重要でボタンを押すと一度サイトから離脱してしまうためユーザーの使い勝手も悪くなるため別のタブを開いて表示するようにします。
これで右下の「更新」をクリックすると完了します。
共有ボタンのカラー設定
この「共有ボタン」の色は、自由に設定が可能です。
この記事の例では背景は「赤」・テキストは「白抜き」にしています。
「共有ボタン」の設定方法について順に説明します。
外観→カスタマイズ→パーツスタイル設定
WordPressの編集画面「ダッシュボード」の左のメニューから、
「外観」→「カスタマイズ」を選択しクリックします。
ここからが「THE THOR」独自の設定画面です。
実に様々な設定画面がありますが下にスクロールすると「パーツスタイル設定[THE]」というメニューがあります。
「パーツスタイル設定[THE]」をクリックします。
こちらも下にスクロールすると「共通ボタン（全ページ用）」というメニューがあるので、こちらをクリックします。
「パーツスタイル設定[THE]」→「共通ボタン（全ページ用）」内で共通ボタンのカラーを設定できるようになります。
設定は「プライマリーボタン」・「セカンダリーボタン」・「ノーマルボタン」ごとに設定することになります。
■文字色を指定をクリックするとかなり細かくカラーを調整できるようになっているのがわかります。
#ffffffとなっているところも、カラーコードを記入することでダイレクトにカラーを指定できますので、すでにカラーナンバーが判明している場合は作業が早いです。
一番右の「Clear」で現在設定しているカラーを消すことが可能です。
このメニューで「文字色」・「背景色」を決定したら、「共有ボタン」設定を押せば完了です。
実際に投稿画面でプレビューで確認すると「プライマリーボタン」で、
「文字色」を#ffffff
「背景色」を#ffa500
で設定すると以下のようになります。
以上でボタン形式のリンク設置は完了です。
まとめ
ボタンの設置は動線に誘導するのにも有効ですので、テキストリンク、バナーと使い分けて設置すると良いと思います。
このように有料テーマではプラグイン導入などで設置が可能となる機能がすでに実装されていますのでスタートから機能が充実したプラグインを導入しておくと便利です。
Word Pressテーマ「THE THOR」は有料ですが、
・2つのアカウントで利用できる。
・秀逸なデザインを設定できる。
・SEO対策実装済み。
・殆どのプラグインが不要（実装済み）。
・表示速度が向上します。
など非常に秀逸なテーマです。
当ブログでも使用しています。
