【デザイン一覧表】THE THOR共通ボタン編(プライマリ・セカンダリ・ノーマルボタン)

いっぬ
THE THORの「共通ボタン」はどんな装飾ができるの?
よわこ
(マーケ・販促歴7年)
THE THORデフォルトのボタンデザインだね。
全デザインを一覧表にしてみるね!

 

今日はTHE THORの記事内装飾「共通ボタン」のデザインを一覧表で紹介します。

全項目の全パターンまとめているので記事作成の際にご活用ください!

  プライマリボタン
(右・中央・左)
  セカンダリボタン
(右・中央・左)
  ノーマルボタン
(右・中央・左)

59_001_プリセットパーツとは

 

 

THE THOR共通ボタンのデザイン一覧表

共通ボタンには「プライマリボタン」「セカンダリボタン」「ノーマルボタン」と3種類あります。

違いとしては、大きさと色合い。場面に応じて使い分けできます♩

プライマリボタン

中央

 

セカンダリボタン

 

ノーマルボタン

中央

THE THOR共通ボタンの背景・文字色をカスタマイズする方法

共通ボタン3種類の「背景色」「文字色」は、WordPressの外観カスタマイズから簡単に変更することができます。

 背景・文字色を変更する方法

1WordPressダッシュボードの「外観>カスタマイズ>パーツスタイル設定>共通ボタン設定(全ページ用)」をクリック

60_002_外観カスタマイズ
60_003_パーツスタイル設定
60_004_共通ボタン設定

2プライマリボタン、セカンダリボタン、ノーマルボタンそれぞれ変更したいカラーに選択する

60_005_プライマリボタン変更
60_006_セカンダリ・ノーマルボタン変更

 

色以外のカスタマイズには追加CSSを利用しましょう。

 追加CSSを編集する方法

1WordPressダッシュボードで「外観>カスタマイズ>追加CSS」へ移動

2開いた編集欄でCSSを記述をする

60_007_追加CSS
60_008_追加CSS編集

 

追加CSSでカスタマイズしなくてもTHE THORの設定で十分活用できますよ!

参考になればうれしいです

 

この記事を見ている人におすすめの本

Sponsored Link

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!

CTR IMG