当サイトではワードプレスのテーマ THE THOR を使用中です。
THE THOR が気になっている人はこちらをどうぞ↓
公式サイトTHE THOR の魅力
機能が豊富な THE THOR は使いこなせば素晴らしいテーマです。今回は THE THOR 導入当初に使い方のわかりにくかった サブタイトルボーダーボックス の使い方。
THE THOR
サブタイトルボーダーボックスとは
サブタイトルボーダーボックスとはこんな感じのボックスです↓
初期設定では文字は入っていません↓こんな感じ
これのサブタイトル部分に文字を入れたいのですが皆さんどうします？
僕の直感では赤い部分にカーソルを持っていって文字打ちします。でもそれでは文字が打てませんでした。
サブタイトルボーダーボックス の使い方
- スタイル → サブタイトルボーダーボックスでボックスを表示
- ボックス内にカーソルを置いたままサブタイトル編集 → タイトルを入力
- ボックス内に本文打ち込む
画像の下にあるボックスは色々試して苦労している図です。でも試行錯誤の末、使う手順がわかりました。
サブタイトルボーダーボックスの色を変更
↑ここまで準備してください。この状態を基本にいじっていきます。
ボーダーの色を変更
- 文字を選択（文字がないと変更ができません）
- スタイル → カラーセット → ボーダー色 で変更したい色を選択
- もともと選ばれているカラー（この場合はディープレッド）を選択解除
同じような手順で背景色も変更が可能です。
背景色を変更
- 文字を選択（文字がないと変更ができません）
- スタイル → カラーセット → 背景色 で変更したい色を選択
- もともと選ばれているカラー（この場合はホワイト）を選択解除
サブタイトル部分のカラー変更のやり方
サブタイトル部分の変更は特殊です。
外観 → カスタマイズ → パーツスタイル設定[THE] → その他エディタ用パーツ設定 → サブタイトルのボックスカラー
上記の設定場所でサブタイトル部分の 文字色 / 背景色 / 線色 の変更ができます。
設定を変更するとサイト内のサブタイトルボーダーボックス全てに適用されます。
余談：THE THOR の設定選択の特徴
THE THOR の設定選択は操作が独特です。
設定選択をするたびに項目が追加されていきます。例えば、レッドのあとにブラックを選んだらレッドとブラックの両方が選択された状態になります。
実際に表示されるのは内部的に優先順位の高いほうです。優先順位は選択項目の後半になればなるほど優先となります。
上記の例でいうと、レッドのあとにブラックを選んだ場合はブラックが表示されます。逆にブラックのあとにレッドを選んでもブラックのほうが優先順位が高いためブラックのままとなります。レッドを表示するにはブラックの選択を解除しなければなりません。（もう一度選択すると解除される）
設定を変更するときは前の設定を解除するクセをつけましょう。慣れてしまえば特に苦労することなく操作ができます。
あとがき
サブタイトルボーダーボックスは頻繁に使うボックスです。
サイトに合わせた配色を決定して統一感のあるサイトデザインを目指しましょう。
コメント
コメント一覧 （14件）
ザトールを使用しています。
サブタイトルですが、スマホだと画面が小さく、サブタイトルから文字がはみ出した分が2行目に表示されるのですが、ボックスの枠は1行分から変わりません。はみ出した分の文字が凄く見えにくいです。はみ出さずボックスも2行枠自動で作られるようにする方法はないでしょうか？ または、枠内に入るように文字の大きさを自動調整させるとか。
ご教示お願い致します。
クロラさん、コメントありがとうございます。
全てを自動で行うことは難しいですが個別対応すればある程度は可能です。
しかしとても手間がかかるのでサブタイトルの文字数を調整するほうが現実的かと思います。
はじめまして。からあげ棒さんの、THE THOR ザ･トール
サブタイトルボーダーボックス の使い方を拝見して、やってみたのですが、
サブタイトル部分に文字を入力するための、サブタイトル編集ボタンが、「メニュー」に存在しません・・・（ToT) クラシックエディターでも、ブロックエディターでも同じです。エディターの拡張プラグインのAdvanced Editor Tools (previously TinyMCE Advanced)を導入し、「スタイル」まではメニューに入れ込むことが出来たのですが、「サブタイトル編集」がなく、苦戦しております・・。教えていただけるとありがたいです。
おきゃのさん、はじめまして。
画面を見てみないとなんとも言えませんが、
投稿画面のメニュー左上から「段落」「B」「I」とならんでいると思います。
その右側に「ツールバー切り替え」というボタン(四角に点々が入っているアイコン)があるので押して見てください。
THE THOR のメニューが表示されると思います。
ご確認ください。
こんばんは！
サブタイトルボーダーボックスの中に、「カスタムTHML」を使ってgoogle mapを貼り付けたいのですが、クラシックのツールバーの中に「カスタムTHML」が探せません。
どうすればできるのか、ご教授いただけると幸いです。宜しくお願いいたします。
こんばんは。
カスタムHTMLはウィジェトなのでここでは使用できません。
Googleマップのコードをテキストエディタで挿入、またはクラシックエディタにある ＜＞ を使用して
HTMLを挿入すればできるかと思います。
ご確認ください。
始めまして。
質問宜しくお願いします。
トールのボックスの中にリストを追加したいのですが改行しようとすると次の枠が出来てしまいます。
１つの枠の中に
最安値の〇〇
・〇〇月額費用
・〇〇無料
・〇〇無料
・配送料無料
このようにしたいのですが設定方法おわかりでしたら教えてください。
宜しくお願いします。
かぷーのさん、はじめまして。
枠の外でリストを作成してから
枠の中にコピペするとできます。
ご確認ください。
からあげ棒さん
別でｈｔｍｌで作成しコピペし貼り付けたらイメージ通りに作成することが出来ました。
ありがとうございました！
良かったです。HTMLじゃなくても枠外でいけますよー。
初めまして^^
先日、このテーマをダウンロードしたものの、ボックスのカラーだけが変更できず困っています。
サブタイトルのボックスカラーでカラー変更をしても、一向に変わりません。背景も、枠も、サブタイトルも同様です。
また、他のボックスのカラーも変わりません。
他のパーツ（見出しなど）はカラー変更できるのですが…なぜなんでしょうか？
わくわくさん、初めまして！コメントありがとうございます。
カラーの変更方法は、スタイルのカラーセットから行います。
標準で用意されているサブタイトルボーダーボックスの色を変更するには最初にセットされているカラーを解除する必要があります。
（最初はボーダーにディープレッド、背景色にホワイトが選択されています。）
それぞれ変更したいカラーを選択したあとに、もともと選択されているカラーを再選択して解除します。
サブタイトル部分のカラーは現状ではこの記事にあるとおりカスタマイズからしか変更ができないようです。
https://karaagebow.com/archives/4791
↑こちらも参考になるかと思います。
文字だとわかりずらくてスイマセン。不明点あればどうぞ〜
返信ありがとうございます。
からあげ棒さんの記事を読んでやってみた結果、サブタイトル以外のカラー・デザインは変えることができました。
カスタマイズのところでサブタイトルの背景カラーを何に変更してもレッド系の色のままで、サブタイトルの文字も同様に何色に変えても黒のまま変わりません。
カスタマイズ→その他エディタ用パーツ設定→サブタイトルのボックスカラー
ここを変更するだけで本来は変わるんですよね？
もう１つ疑問点があって、カスタマイズ→ボックス設定→タイトル名を変えても、投稿画面で確認すると何も変わっていないのですが、そういうものなのでしょうか？
記事を更新しました。参考にしてみてください。
カスタマイズ画面でプレビューも変化がありませんか？
タイトルの変更を試してみました。
問題無くできました。
http://bit.ly/2SFVevR
実際に見てみないとなんとも言えないですが、設定の保存ができていないかキャッシュの問題か・・・
お役に立てずすいません。