MENU
カテゴリー
からあげ棒
designer
WEBデザイナー&EC運営(会社員)|元グラフィックデザイナー
ブログは「創る楽しみ」を求めて運営中!快適なガジェット環境や、車・バイクの素人DIYメンテ記録を発信しています。「手探りでも頑張ればできる!」をテーマに、失敗も楽しみながら一歩ずつ進むDIYライフを気ままに記録しています。

THE THOR ザ・トール パーツスタイル設定 活用法

当ページのリンクには広告が含まれています。
THOR パーツスタイル設定
THE THORから乗り換えるためのサポート用プラグインあり!筆者もらくらく乗り換えました。
ブロックエディタ(Gutenberg)を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ

THE THOR の売り!といっても過言ではないパーツスタイル。

様々なパーツを自分でつくることができます。

 

ここでは一歩進んだパーツスタイルの使い方を紹介

 

目次

THE THOR パーツスタイル を登録する パーツスタイル設定[THE]

 

自分で作ったパーツスタイルはパーツスタイル設定[THE]に登録ができます。

登録するとビジュアルエディタのスタイルから簡単にパーツスタイルを読み込んで記事に適用することができます。お気に入りのパーツが出来たら必ずパーツスタイル設定[THE]に登録しましょう。

 

・文字の装飾を自在にコントロール

あわせて読みたい
THE THOR ザ・トール 文字の装飾を自在にコントロール THE THOR で自在にボックスなどを作る手順。

 

パーツスタイルの登録の仕方

 

パーツはビジュアルエディタのスタイルで作る

サンプルボックス
例えば↑のようなボックスを作ったらテキストエディタに切替ます。
THOR ボックスのサンプルコード
テキストエディタで見ると作ったパーツはこのように表示されます。
このclass=” 〜 “の〜の部分をコピーします。
この場合だとep-label es-borderSolidS bgc-white brc-VLgray es-RpaddingSS es-LpaddingSS es-RmarginSS es-LmarginSSです。
※当サイトではテキストエディタにプラグイン適用しています。
あわせて読みたい
ワードプレスでテキストエディタを使うなら必須 HTML Editor Syntax Highlighter ワードプレスでテキストエディタを使うなら必須なプラグイン HTML Editor Syntax Highlighter の紹介。

カスタマイズ設定で登録します

外観 → カスタマイズ → パーツスタイル設定[THE]
パーツスタイル ボックス

パーツスタイル設定[THE]の中のラベル設定、ボタン設定、ボックス設定の好きな場所にコピーしたコードを貼り付けます。

タイトルはわかりやすいタイトルを付けましょう。スタイルにコピーしてきたコードを貼り付けます。

これで投稿画面のスタイルで簡単にパーツスタイルを読み込むことができます。

もともと入っている設定は消えてしまいます。個人的には使用するものがほとんどないのでどんどん上書きしています。気になる人はテキストファイル等にコードを保存しておきましょう。

一歩進んだパーツスタイルの活用方法

 

パーツスタイル設定[THE]は シンプルにいうとclassを設定する場所です。
つまり登録できるのは THE THOR の機能で作ったスタイルだけではありません。cssで作ったスタイルも登録することができます。

実験的に以下のようなcssで装飾したパーツを作りました。
実験的に作ったCAUTION的なボックス
このボックスのclassはboxYBとなっています。
これをパーツスタイル設定[THE]に登録するといつでも簡単にスタイルを適用することができます。
さらに THE THOR の機能で作ったスタイルとあわせることもできます。
組み合わせたサンプルは以下の通り。こちらも同様に登録することができます。
実験的に作ったCAUTION的なボックス
↑のコードはboxYB es-bold ftc-DPred es-size50 tswl-capbox bgc-white es-borderSolidM es-radius brc-DPredとなっています。
boxYBが THE THOR のコードと同じ扱いを受けていることがわかります。

 

THE THOR の機能だけでも様々なデザインが可能です。登録することにより簡単に利用できます。さらにオリジナルのデザインも追加して呼び出すことができます。これを使わない手はありません。じゃんじゃん活用していきましょう。

 

あとがき

 

オリジナルデザインを登録する場合はひとつだけ注意点があります。
THE THOR の機能を使ったパーツスタイルはビジュアルエディター上でプレビューされますが、cssで追加したデザインはビジュアルエディター上でプレビューされません。投稿のプレビューで確認しましょう。
THE THORから乗り換えるためのサポート用プラグインあり!筆者もらくらく乗り換えました。
ブロックエディタ(Gutenberg)を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ

THOR パーツスタイル設定

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログテーマ選びについて

この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。

  • THE THOR(ザ・トール)も今なお魅力的!
    洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
    THE THOR(ザ・トール)の詳細を見る
  • THE THORには最新の正統後継テーマ「GOLD BLOG」がある!
    最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG(ゴールドブログ)」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
    後継テーマ「GOLD BLOG」の詳細を見る
  • 自由な操作性や書きやすさを重視するなら「SWELL」も最高!
    興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
    圧倒的に使いやすい「SWELL」を公式サイト

この記事を書いた人

どうも、からあげ棒です。
リアルでも「からあげさん」って呼ばれてます。
呼ばれた私の名前を聞き取った居酒屋スタッフが、からあげ3皿持ってきたのは良い思い出です。
そんな感じでブログやってます。

コメント

コメントする

目次