ブログでオリジナルのボタンって使える？
できるなら作り方も知りたいな。
できるなら作り方も知りたいな。
本記事ではブログテーマのザ・トールを使ったオリジナルボタンの作成方法を紹介します。
THE THORを使ってオリジナルのボタンを作ろう
本記事では、WordPressのテーマ「THE THOR」を使った、オリジナルのボタンの作り方を紹介します。
本記事を読めば、上記のようなオリジナルのボタンを、誰でも簡単に作成することができますよ。
オリジナルボタンの作成手順を紹介
それではさっそく作っていきましょう。
テキストを入力する
「Gutenberg（グーテンベルク）」をお使いの方は、まずクラシックブロックを選択してください。
「ClassicEditor（クラシックエディタ）」をお使いの方は、そのままテキストを入力しましょう。
本記事では、グーテンベルクを使用して解説をしていますが、クラシックエディタでもほとんど同じ手順で作成することができます。
「ClassicEditor（クラシックエディタ）」をお使いの方は、そのままテキストを入力しましょう。
本記事では、グーテンベルクを使用して解説をしていますが、クラシックエディタでもほとんど同じ手順で作成することができます。
今回は「オリジナルボタンの作り方」をボタン化してみます。
テキストを入力したら、ボタン化する部分を選択しましょう。
テキストを入力したら、ボタン化する部分を選択しましょう。
テキストをボタン化する
テキストを選択した状態で、スタイル～デフォルトパーツ～ボタンを選択します。
これでボタン化することができました。
続いてボタンを装飾していきましょう。
スタイルを編集する場合は、テキスト部分の選択を忘れないようにしましょう。
続いてボタンを装飾していきましょう。
スタイルを編集する場合は、テキスト部分の選択を忘れないようにしましょう。
ボタンにアイコン挿入する
ボタンにアイコンを挿入していきます。
テキストを選択した状態で、「アイコン挿入」をクリック。
別タブで「アイコンを入力」画面が出てきます
別タブで「アイコンを入力」画面が出てきます
アイコン一覧から好きなアイコンを選んで、コードをコピーしましょう。
今回はAmazonのアイコンを挿入してみます。先ほどの「アイコンを入力」画面へコードを張り付けて、「OK」をクリック。
今回はAmazonのアイコンを挿入してみます。先ほどの「アイコンを入力」画面へコードを張り付けて、「OK」をクリック。
クラシックエディタの場合、「アイコン一覧」はエディタ画面から選択することができますが、グーテンベルクだと「アイコン一覧」を見つけることができません。
一度ダッシュボード画面に戻って、外観～カスタマイズ～TOPページ設定～ピックアップ3記事設定…から「アイコン一覧」を選んで、お気に入りへ保存しておきましょう。
一度ダッシュボード画面に戻って、外観～カスタマイズ～TOPページ設定～ピックアップ3記事設定…から「アイコン一覧」を選んで、お気に入りへ保存しておきましょう。
アイコンを挿入できました。（見やすくするためにフォントサイズを拡大しています。）
ボタンの立体化
次にボタンを立体化してみましょう。
スタイル～スタイルセット～ボタンパーツ専用～立体をクリック。
スタイル～スタイルセット～ボタンパーツ専用～立体をクリック。
のっぺりとしたボタンに陰影ができました。
アイコンを編集する
スタイル～スタイルセット～ボタンパーツ専用～アイコン…を選択することで、アイコンの装飾ができます。
アイコン（ボックス）だと上のような感じになります。
ダッシュボード画面～外観～カスタマイズ～パーツスタイル設定～その他エディタ用パーツ設定…から「アイコンの色」を編集することで、アイコンの背景色を変更することができます。
今回はアイコン（ボーダー）を選びます。
ボタンの色を変更する
スタイル～カラーセット～背景色～…からボタンの色を変更できます。
今回はヴィヴィッドトーン～スカイを選んでみました。
テキスト色を変更する
次にテキスト色を変更していきます。
テキストを選択してテキスト色を選びましょう。
テキストを選択してテキスト色を選びましょう。
今回はホワイトにしてみます。
ボタンらしくなってきましたね。
テキストをすべて選択してから色を変更すれば、アイコンのテキスト色も変わります。
ボタンらしくなってきましたね。
テキストをすべて選択してから色を変更すれば、アイコンのテキスト色も変わります。
アイコンとテキストの色を分けたい場合は、まず上記の方法で色（アイコンの色）を変更します。
その後、テキストを新しく入力して選択、任意の色（テキストの色）へ変更します。
要らないテキストを削除すれば、アイコンとテキストの色分けが完成です。
ボタンの形を変更する
スタイル～スタイルセット～角丸系～角丸（10px）
ここまで来たら、ほぼ完成です。
テキストの余白を変更する
すこしボタンが窮屈な感じがするので、余白を入れてみます。
スタイル～スタイルセット～内側余白系～ライト（大）
スタイル～スタイルセット～内側余白系～ライト（大）
ライト（右）に余白ができました。
上側に余白を設けたい場合はトップ、左がレフト、下ならボトムを選ぶようにしましょう。
上側に余白を設けたい場合はトップ、左がレフト、下ならボトムを選ぶようにしましょう。
ボタンのフォントを変更する
最後にテキストのフォントを変更して完成です。
＼ お疲れ様でした！ ／
ボタンにリンクを張り付ける
ボタンが完成したら、リンクを設定しましょう。
ボタンのテキストを選択して、リンクボタンをクリック。
URL入力画面が開きます。
URL入力画面が開きます。
リンク欄に、目的のURLを入力して「適用」をクリック。
以上でオリジナルボタンへのリンクの設定は完了です。
以上でオリジナルボタンへのリンクの設定は完了です。
THE THORのオリジナルボタン・まとめ
いかがだったでしょうか？
THE THORを使ったオリジナルボタンの作り方を紹介しました。
是非この機会にオリジナルボタンを導入してみましょう。
今回使用したWordPressのテーマ「THE THOR」はこちらからチェックできます。