THE THOR の売り！といっても過言ではないパーツスタイル。
様々なパーツを自分でつくることができます。
ここでは一歩進んだパーツスタイルの使い方を紹介
THE THOR パーツスタイル を登録する パーツスタイル設定[THE]
自分で作ったパーツスタイルはパーツスタイル設定[THE]に登録ができます。
登録するとビジュアルエディタのスタイルから簡単にパーツスタイルを読み込んで記事に適用することができます。お気に入りのパーツが出来たら必ずパーツスタイル設定[THE]に登録しましょう。
パーツの作り方
ワードプレスの有料テーマ「THE THOR」を使用しています。 THE THOR とは？ 『ザ・トール レビュー』 多機能すぎて操作に戸惑っている人も多いかと思います。文字などの装飾関連の[…]
パーツスタイルの登録の仕方
パーツはビジュアルエディタのスタイルで作る
サンプルボックス
例えば↑のようなボックスを作ったらテキストエディタに切替ます。
テキストエディタで見ると作ったパーツはこのように表示されます。
このclass=” 〜 “の〜の部分をコピーします。
この場合だとep-label es-borderSolidS bgc-white brc-VLgray es-RpaddingSS es-LpaddingSS es-RmarginSS es-LmarginSSです。
※当サイトではテキストエディタにプラグイン適用しています。
これがないとツライ
ワードプレスが簡単で便利といってもテキストでコードを活用する場面ありますよね？ たまに使うテキストエディタ。 見づらい、わけわからない、コピペで真似したいコードもどこに挿入すれば良いのか探すのが大変。 このプラグインを導入[…]
カスタマイズ設定で登録します
外観 → カスタマイズ → パーツスタイル設定[THE]
パーツスタイル設定[THE]の中のラベル設定、ボタン設定、ボックス設定の好きな場所にコピーしたコードを貼り付けます。
タイトルはわかりやすいタイトルを付けましょう。スタイルにコピーしてきたコードを貼り付けます。
これで投稿画面のスタイルで簡単にパーツスタイルを読み込むことができます。
もともと入っている設定は消えてしまいます。個人的には使用するものがほとんどないのでどんどん上書きしています。気になる人はテキストファイル等にコードを保存しておきましょう。
一歩進んだパーツスタイルの活用方法
パーツスタイル設定[THE]は シンプルにいうとclassを設定する場所です。
つまり登録できるのは THE THOR の機能で作ったスタイルだけではありません。cssで作ったスタイルも登録することができます。
実験的に以下のようなcssで装飾したパーツを作りました。
実験的に作ったCAUTION的なボックス
このボックスのclassはboxYBとなっています。
これをパーツスタイル設定[THE]に登録するといつでも簡単にスタイルを適用することができます。
さらに THE THOR の機能で作ったスタイルとあわせることもできます。
組み合わせたサンプルは以下の通り。こちらも同様に登録することができます。
実験的に作ったCAUTION的なボックス
↑のコードはboxYB es-bold ftc-DPred es-size50 ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPredとなっています。
boxYBが THE THOR のコードと同じ扱いを受けていることがわかります。
THE THOR の機能だけでも様々なデザインが可能です。登録することにより簡単に利用できます。さらにオリジナルのデザインも追加して呼び出すことができます。これを使わない手はありません。じゃんじゃん活用していきましょう。
あとがき
オリジナルデザインを登録する場合はひとつだけ注意点があります。
THE THOR の機能を使ったパーツスタイルはビジュアルエディター上でプレビューされますが、cssで追加したデザインはビジュアルエディター上でプレビューされません。投稿のプレビューで確認しましょう。
