こんにちは、テンテンです。
今回は、THE THOR（ザ・トール）でボタンのリンクを設置する方法とボタンの色変更の方法について解説します。
THE THOR（ザ・トール）では、主に3種類の共通ボタンを設置をすることができます。
※一例として、1種類のみ表示させています。
当ブログでは、ボタンの背景色だけ変更しています。最後にはボタンの色を変更する方法について解説させていただきます。
THE THOR（ザ・トール）の共通ボタンの種類
THE THOR（ザ・トール）でリンクをボタン化する方法は、「共通ボタン」を使います。
上記の画像のように、ビジュアルエディタのツールバーが表示されない場合は下記の記事をご参考にください。
→THE THORのビジュアルエディタからツールバーが消えてしまった件について〜3秒で解決できます〜
【THE THOR（ザ・トール）の共通ボタンは3種類】
・プライマリボタン
・セカンダリボタン
・ノーマルボタン
【各種共通ボタンの一覧】
下記には、各種共通ボタン一覧を表示させておきます。
THE THOR（ザ・トール）の共通ボタンの使い方について
ここからは、THE THOR（ザ・トール）の共通ボタンの使い方について解説します。
すでに、「リンクの挿入や編集」の使い方を知っている方は、読み飛ばしていただいて問題ありません。
まだ、「リンクの挿入や編集」の方法を知らない方向けの内容となります。
①共通ボタンを設置しよう！
共通ボタンの設置方法については、さきほど説明していますので、ここでは割愛します。
②「リンクテキスト」をクリックして、「編集」に進もう。
③「リンク設定」に進みます。
④「リンクの編集」をします。
【入力箇所】
①リンク先のURL
②リンク文字列
例）リンクテキスト
③必要に応じて、「リンクを新しいタブを開く」にチェック
①と②の説明はするまでもないので割愛しますが、③だけ簡単に解説を挟んでおきます。
基本的に、外部リンクを設置する場合は、離脱率を下げる為に「リンクを新しいタブで開く」にチェックを入れておくのが良いでしょう。
一方で内部リンクを設置する場合は、必要に応じてチェックを入れるのかどうか判断しましょう。
共通ボタンの色と文字色を変更する方法について
当ブログは若干ですが、共通ボタンの背景色をカスタマイズしています。一応、コピペできるようにコードを載せておきます。
共通ボタンの背景色や文字色を変更したい方もいるでしょう。
ここでは、共通ボタンの背景色と文字色の変更方法について解説します。プログラミングができない方でも簡単な作業なので、ご安心ください。
まずは、下記のプラグラミングコードを確認してください。下記のプログラミングコードは、上からプライマリボタン、セカンダリボタン、ノーマルボタンのプグラミングコードにしています。
背景色を変更したい場合は、background-color: #カラーコード; を変更しましょう。
一方で、文字色を変更したい場合は、color: #カラーコード; を変更しましょう。
CSSのカラーコードは、原色大辞典をご参考にください。あくまもで、参考なので他のサイトからでも問題ありません。
基本的に、カスタマイズしたプログラミングコードは、「追加 CSS」に追加していきますが、やり方がわからない方はこちらの記事で画像付きで解説していますのでご覧ください。
→THE THOR（ザ・トール）でサイトカード・ブログカードの使い方〜カスタマイズもしてみました〜
最後に、「共通ボタン」の色が変更できているか確認してみてくださいね！
おわりに
今回は、「共通ボタン」の使い方と若干のカスタマイズ方法について解説しましたが、いかがだったでしょうか？
初心者の方は、少し戸惑ったところもあるかもしれませんが、基本的には簡単な作業だったのではないかと思います。
THE THOR（ザ・トール）は細かい設定できる分、いろいろと大変な部分はありますが、慣れてくるとだんだんと楽しくなってきます。
最後まで読んでいただき、ありがとうございました。