【THE THOR 】サブタイトルボーダーボックス の使い方&カスタム方法

  • 2021年2月21日
  • THE THOR
  • 186View
  • 0件

有料ワードプレステーマ【THE THOR】を使用しているレイカです。

この記事では【THE THOR】の「サブタイトルボーダーボックス」について

 
Rei
使い方とカスタム方法を紹介します。

サブタイトルボーダーボックスについて(ザ・トール)

「サブタイトルボーダーボックス」とは画像のようなボックスです。(デフォルト)

「サブタイトルボーダーボックス」があると、文章が読みやすい効果があります。

 
Eika
読者の視線も目に入りやすいですよね♪

サブタイトルボーダーボックスの使い方【THE THOR】

これから「サブタイトルボーダーボックス」の使い方について説明します。

 
Rei
ブロックエディタでのやり方で紹介します。

ブロックエディタの「+」をクリックし、「クラシック」を選択します。

「スタイル」→「ボックス」→「サブタイトルボーダーボックス」をクリック

 
Rei
これで形になりましたが、タイトルのつけ方について説明します。

「サブタイトル編集」をクリックし、タイトルを入力して「OK」ボタンをクリック

以上で完成です。

 
Eika
使い方はわかりましたでしょうか?

サブタイトルボーダーボックスのカスタム【THE THOR】

 
Rei
これからサブタイトルボーダーボックスのカスタム方法について説明します。

デフォルトの「サブタイトルボーダーボックス」は赤色のボックスとなります。

サイトデザインによっては、色や形を変えたいのではないかと思います。

そこでボックスの変更方法について説明していきます。

私はこんな感じに作りました。

まず「クラシック」を開きます。

「スタイル」→「デフォルトパーツ」→「ボックス」をクリック

下のような図のボックスが出ていると思います。

ボックスに文字はなんでもいいので、適当に入れておきます。ここでは「テスト」と記入しています。

文字を選択して「青い選択モード」にしておきます。

ここから好みのデザインにカスタムしてください。

基本的には「スタイル」→「スタイルセット」や「カラーセット、「デフォルトパーツ」を使用してカスタムできます。

私が作ったボックスについては下記の手順で作りました。

参考にしてください。

●ボックス周りの線
「スタイルセット」→「ボーダー系」→「オール破線(中)」

●ボックス周りの線の色
「カラーセット」→「ボーダー色」→「モノトーン」→「グレー」

●ボックス内の背景
「カラーセット」→「背景色」→「モノトーン」→「ベリーライトグレー」

 
Rei
これが基本的なボックスのカスタム方法です。
 
Eika
次にカスタムしたボックスを保存していきます!

カスタムしたボックスの保存方法【THE THOR】

カスタムしたボックスは何回も使うことがあるので保存しておき、簡単に出せるようにしておきましょう。

では早速紹介していきます。

作成したボックスを選択し、上にある「ブロックへ変換」をクリック

すると、文字がかかれたコードが表示されます。

そして青い部分を「選択 & コピー」しておきましょう。

ワードプレス画面から【外観】→【カスタマイズ】→【パーツスタイル設定】をクリック

【ボックス設定】をクリック

ボックス① ~ ボックス⑩ までの設定がありますが、今回はボックス⑩の設定を選択しています。

 
Rei
使わなそうなボックスを選んで、カスタムしたボックスと交換してくださいね。

【タイトル】に好きな名前を
【スタイル】にコピーしたコードを貼付けます。 

最後に「公開ボタン」をクリックで保存が完了です。

 
Rei
一度テストをしてみて、カスタムされたボックスが出たら大丈夫です。
 

【注意!】サブタイトルボーダーボックスのタイトルのカスタムは別になる

 
Rei
注意があります!

サブタイトルボーダーボックスのタイトル部分は別の箇所でのカスタムとなります。

「背景色」 「文字色」 「線色」 のカスタムが可能です。

【外観】→【カスタマイズ】→【パーツスタイル設定】→【その他エディタ用パーツ設定】をクリック

【サブタイトルボックスのカラー】の項目でカスタムが可能です。

 
Rei
できましたでしょうか?

【ザ・トール】サブタイトルボーダーボックス の使い方&カスタム方法 最後に

サブタイトルボーダーボックス の使い方&カスタム方法について紹介していきました。

あなたのサイトに合わせてカスタムしてください。

 
Rei
【THE THOR】を使用したほかのカスタムについてはこちらで紹介しています。
関連記事

【THE THOR】を使用しているレイカです。今回はグローバルメニューにアイコンを入れてみました。 Reiグローバルメニューとはヘッダーにあるところです。アイコン結果は下記の通[…]

関連記事

【THE THOR】を使用しているレイカです。今回の記事では【THE THOR】のリスト で標準でつく、先頭の〇を 好きなアイコンに変更する方法を説明いたします。 Eika〇じゃなく[…]

では、また。

NO IMAGE

Reika Blog

『暮らしが楽になる便利グッズ』『ブログ運営』