ワードプレス テーマ THE THORスタイル、プリセットパーツ、共通パーツの例

スタイル

投稿画面の「スタイル」にはマーカー、ラベル、ボタンなど色々な機能がありますが、
実際に使うとどんな風になるのかやってみます。

プリセットのものを並べていますが、

変更するには、ほとんどの場合、

「外観」→「カスタマイズ」→「パーツスタイル設定」で変更できます。

自分のホームページに合ったものを変更しておくと、作業の際に使いやすいです。

ボタンなどはあまりいろいろ使わないで、決めておく方が見やすページになります。

マーカー

マーカー(太)

ああああああああああああ(レッド)

いいいいいいいいいいいい(ブルー)

ううううううううううううう(イエロー)

ええええええええええええ(ピンク)

おおおおおおおおおおおおお(グリーン)

かかかかかかかかかかかか(グレー)

マーカー(中)

あああああああああああ

マーカー(小)

ああああああああああああ

ラベル

丸角レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

ブルーボーダーラウンドラベル

丸アイコンオレンジラベル

ピンクアイコンラベル

四角アイコンラベル

破線ボーダーアイコンラベル

ビッグ右ラウンドブルーラベル

ターコイズグラデ右寄せラベル

アイコンを変えるには

「アイコンオプション」の中から好きなのを選び、アイコン横の文字をコピーし、

テキストで下記のようにicon-の赤字のところに張り付けると変わります。

<span class="ep-label icon-music es-LiconCircle es-LroundL bgc-VPorange ftc-Borange es-RpaddingSS">アイコン</span>

アイコン

ボタン

ボタンは作ったら、ボタン内にカーソルを置き、リンクをクリックして、リンク設定する。

リンクマーク

オレンジ100%ボタン

グリーンシャドー100%ボタン

ブルーボーダーボタン

ピンクアイコンボタン

ピンクグラデアイコンボタン

グリーン立体アイコンボタン

グレーラウンドアイコンボタン

ークルアイコンボタン

ボックスアイコンボタン

 

ボックス

サブタイトルボックス

サブタイトルボックスのサブタイトルを入れるには

ボックス内にカーソルを置き、「サブタイトル編集」をクリックして入力します。

ビッグ括弧ボックス
方眼ペーパーボックス
はてなボックス
ビックリボックス
Qボックス
Aボックス
シンプルアイコンボックス
背景アイコンボックス
帯アイコンボックス

赤枠のボックスだけ囲いたい場合

テキストで
<div class="ep-box es-borderSolidS brc-DPred bgc-white es-radius">
囲いたい文章など
</div>
と記入する。

スタイルセット、カラーセット

スタイルセット、カラーセットはそれぞれその下にある
デフォルトパーツの変更に使います。
デフォルトパーツでラベルなり、ボタンなりを作成すると
灰色のシンプルなものが出来上がります。
で、そこにカーソルをあてたまま、スタイルセットやカラーセットで色や形を指定してやると
変えることができます。
サンプル

デフォルトパーツで作ったボックスを保存したいとき

エディダーをビジュアルモードからテキストモードに切り替える、ボックスの所を見てみると↓。
ザ・トール ボックス コード
この赤いアンダーラインの入った所がコードこの部分をコピーしておく。

カスタマイズでボックスを登録する

外観→カスタマイズ→パーツスタイル設定[THE]→ボックス設定
使わないボックスを選びタイトルを入力今回は「オレンジボックス」と入力。
そしてスタイルも削除後、先程のコードを貼り付けます。
ザ・トール ボックス コード貼り付け
貼り付けが終わったら「公開」をクリックしてください。

いいいいい

プリセットパーツ

区切り線

実線

破線

点線

吹き出し

左画像(背景スタイル)

Name
コメント
左画像(ボーダースタイル)
Name
コメント
右画像(背景スタイル)
Name
コメント
右画像(ボーダースタイル)
Name
コメント

スコアボックス

最終行(レッド)

項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
総合 [star-list number=3.5] 3.5
最終行(ブルー)
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
総合 [star-list number=3.5] 3.5
最終行(イエロー)
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
総合 [star-list number=3.5] 3.5
最終行(ピンク)
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
総合 [star-list number=3.5] 3.5
最終行(グリーン)
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
総合 [star-list number=3.5] 3.5
最終行(グレー)
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
項目名 [star-list number=3.5] 3.5
総合 [star-list number=3.5] 3.5
口コミボックス

背景(レッド)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(ブルー)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(イエロー)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(ピンク)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(グリーン)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(グレー)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(レッド)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(ブルー)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(イエロー)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(ピンク)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(グリーン)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(グレー)

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

レビューボックス

背景スタイル

このエリアにレビュータイトルを記入します。
N.Sさん

評価:[star-list number=3.5] 3.5このエリアにレビュー本文を記入します。

ボーダースタイル

このエリアにレビュータイトルを記入します。
N.Sさん

評価:[star-list number=3.5] 3.5このエリアにレビュー本文を記入します。

アコーデオンボックス

背景スタイル

タイトル
Hこのエリアにレビュー本文を記入します。

ボーダースタイル

タイトル
Hこのエリアにレビュー本文を記入します。

共通ボタン

プライマリーボタン

中央

セカンダリボタン

中央

ノーマルボタン

おすすめの記事