【THE THOR共通ボタン】アイキャッチなどに使われているボタンのカスタマイズ

 

Chiharu
Chiharu

今回は、WordPressテーマ「THE THOR」の共通ボタンについてお伝えします。

共通ボタンとは、全ページで共通して使えるボタンのことです。

TOPページのアイキャッチや、お問い合わせページの送信ボタンに使われています。

 

THE THOR共通ボタン以外のボタンについては下記のページで詳しくお伝えしています。

パーツカスタマイズ

初心者さん・THE THORを使っておしゃれなブログを作りたい。・THE THORのボタン・ボックス・見出しの色を変えたい・THE THORの記事装飾パーツは、どんなデザイン?&nbs[…]

パーツカスタマイズまとめ

 

THE THORの共通ボタンについて

 

THE THORの共通ボタンとは、全ページ共通で使えるボタンのことです。種類は、プライマリボタン・セカンダリボタン・ノーマルボタンの3つ。

 

プライマリボタンとセカンダリボタンは、ボタン色・文字色それぞれ色の指定ができます。ノーマルボタンは、色の指定ができます。

 

ボタン色・文字色
それぞれの色の指定ができる
色の指定ができる

 

Chiharu
Chiharu

プライマリボタンは、存在感がありすぎて当ブログでは使っていません。

形を変えようとも考えたのですが全ページ共通して使われるので、不具合の原因になることを考慮して、色の変更だけに留めました。

 

THE THORの共通ボタンが反映されるところ

 

THE THOR共通ボタンが反映されるところは下記の9つ。画像を作成したので、位置と見え方を参考になさってください。青 色のボタンです。

 

・TOPページ サブメニュー(DOWNLOAD)
・TOPページ メインビジュアル
・TOPページ 記事一覧「続きを読む」
・TOPページ カスタム投稿タイプ「お知らせ一覧へ」
・フッターCTA
・メニューパネル サブメニュー(DOWNLOAD)
・お問い合わせページ 「送信する」
・投稿 「投稿一覧へ」
・カスタム投稿タイプ詳細ページ 「前のページへ戻る」

 

thethor 共通ボタンTOPページ メインビジュアル
thethor 共通ボタンフッターCTA
thethor 共通ボタンお問い合わせページ
「送信する」
thethor 共通ボタンカスタム投稿 詳細ページ
「前のページへ戻る」
thethor 共通ボタンカスタム投稿 詳細ページ
「前のページへ戻る」

 

thethor 共通ボタン投稿 「投稿一覧へ」

 

thethor 共通ボタンTOPページ サブメニュー
(DOWNLOAD)
thethor 共通ボタンTOPページ 記事一覧
「続きを読む」
thethor 共通ボタンTOPページ カスタム投稿
「お知らせ一覧へ」
thethor 共通ボタンメニューパネル サブメニュー(DOWNLOAD)

 

THE THOR共通ボタンのカスタマイズ方法

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー 共通ボタンパーツスタイル設定>共通ボタン設定>プライマリー・セカンダリー・ノーマルボタンの設定

 

カラーパネル

色の指定をしてカスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力する

 

THE THOR共通ボタンもカスタマイズできます

 

THE THORの共通ボタンは、全ページ共通してカスタマイズが反映されますが、ページごとにCSSで色をカスタマイズすることもできます。文字色・ボタン色それぞれ色の変更が可能です。気になる方はお問い合わせください。

 

thethor 共通ボタンTOPページ メインビジュアル
thethor 共通ボタンフッターCTA

 

thethor 共通ボタンお問い合わせページ
「送信する」

 


 

おつかれさまでした。

 

以上、【THE THOR共通ボタン】アイキャッチなどに使われているボタンのカスタマイズでした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu

Chiharu

この記事を書いたのは

元歯科衛生士のWebデザイナー。素の自分を出せるようにブログをはじめました。お伝えしているのは、ブログのはじめ方と毎日を楽しく過ごすコツについて。