パーツスタイル一覧

THE THOR(ザ・トール)のパーツスタイルの使い方と一覧を作ってみたよ!

今回はコンテンツ作成に欠かせないTHE THOR(ザ・トール)のパーツスタイルの使い方と一覧を説明していきます。

THE THOR(ザ・トール)は様々な機能が豊富で、どこで何をやるのか私でも混乱することもしばしば。

忘備録的な感じで書いていきますので、記事をどんどん更新していきます。

結構なボリュームの記事になってますが、目次などで必要な箇所を選んで読んでくださいね。

目次

スタイル

パーツスタイル「スタイル」は投稿編集画面のツールバーから選択できます。

スタイル

マーカー

ゆず
マーカーはデフォルトで「太さ3種、カラー6種」から選ぶことができます。

マーカー(太)レッド  マーカー(中)レッド  マーカー(細)レッド

マーカー(太)ブルー  マーカー(中)ブルー  マーカー(細)ブルー

マーカー(太)イエロー  マーカー(中)イエロー  マーカー(細)イエロー

マーカー(太)ピンク  マーカー(中)ピンク  マーカー(細)ピンク

マーカー(太)グリーン  マーカー(中)グリーン  マーカー(細)グリーン

マーカー(太)グレー  マーカー(中)グレー  マーカー(細)グレー

よく使うマーカーを登録

ゆず
よく使うマーカーを1つ登録して簡単に使用することができます。

設定はカスタマイザー「パーツスタイル設定[THE]」⇒「マーカー設定」で変更できます。

マーカー設定

ラベル

ゆず
ラベルはデフォルトでは10種用意されています。

角丸レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

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

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

ピンクアイコンラベル

四角アイコンラベル

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

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

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

ボタン

ゆず
ボタンはデフォルトで10種用意されています。

オレンジ100%ボタン

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

ブルーボーダーボタン

ブルーグラデボタン

ピンクアイコンボタン

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

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

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

サークルアイコンボタン

ボックスアイコンボタン

ボックス

ゆず
ボックスはデフォルトで10種用意されています。
サブタイトルボーダーボックス
BIG括弧ボックス
方眼ペーパーボックス
はてなボックス
ビックリボックス
Qボックス
Aボックス
シンプルアイコンボックス
背景アイコンボックス
帯アイコンボックス

ボックス内ボックス

ゆず
ボックス内ボックスはデフォルトで10種用意されています。
外ボックス
内ボックス「ターコイズグラデタイトル」
外ボックス
外ボックス
内ボックス「アイコンボーダータイトル」
外ボックス
外ボックス
内ボックス「ブルーシャドウタイトル」
外ボックス
外ボックス
内ボックス「サブタイトルボーダータイトル」
外ボックス
外ボックス
内ボックス「BIG括弧ボックス」
外ボックス
外ボックス
内ボックス「方眼ペーパーボックス」
外ボックス
外ボックス
はてなボックス
外ボックス
外ボックス
内ボックス「ビックリボックス」
外ボックス
外ボックス
内ボックス「Qボックス」
外ボックス
外ボックス
内ボックス「Aボックス」
外ボックス

プリセットパーツ

ネコ先生
ネコ先生
パーツスタイル「プリセットパーツ」は投稿編集画面のツールバーから選択できます。

プリセットパーツ

区切り線

ゆず
区切り線を表示させます。

「実線」


区切り線「破線」


区切り線「点線」


吹き出し

吹き出しを挿入することができます。

この吹き出し画像はカスタマイザーから変更することができます。

ちなみに下の「ボーダースタイル」はカスタマイザーで変更させました。

関連記事

THE THOR(ザ・トール)にはデフォルトで会話風の吹き出し機能が備わっています。しかし、2019年3月現在では吹き出し画像と画像の名前を設定で変更することができません。 バージョン1.4.0より画像の変更が可能になりまし[…]

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

スコアボックス

ネコ先生
ネコ先生

デフォルトで6色のスコアボックスを挿入することができます。

最終行の「総合」のみ色が変更になっています。

最終行(レッド)

項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

最終行( ブルー)

項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

 最終行(イエロー)

項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

最終行(ピンク)

項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

最終行(グリーン)

項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

最終行(グレー)

項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

口コミボックス

ゆず
背景とボーダーの2種とカラー6色の口コミボックスを挿入することができます。

背景(レッド)

口コミ

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


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

背景(ブルー)

口コミ

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


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

背景(イエロー)

口コミ

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


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

背景(ピンク)

口コミ

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


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

背景(グリーン)

口コミ

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


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

背景(グレー)

口コミ

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


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

ボーダー(レッド)

口コミ

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


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

ボーダー(ブルー)

口コミ

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


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

ボーダー(イエロー)

口コミ

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


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

ボーダー(ピンク)

口コミ

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


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

ボーダー(グリーン)

口コミ

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


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

ボーダー(グレー)

口コミ

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


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

レビューボックス

ゆず
背景スタイルとボーダースタイルの2種のレビューボックスが挿入できます。

背景スタイル

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

評価: 3.5このエリアにレビュー本文を記入します。

ボーダースタイル

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

評価: 3.5このエリアにレビュー本文を記入します。

アコーディオンボックス

ゆず
背景スタイルとボーダースタイルの2種のアコーディオンボックスが挿入できます。

背景スタイル

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

ボーダースタイル

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

共通ボタン

ネコ先生
ネコ先生
パーツスタイル「共通ボタン」は投稿編集画面のツールバーから選択できます。

共通ボタン

プライマリボタン

中央

セカンダリボタン

中央

ノーマルボタン

中央

共通ボタンのカスタマイズ

ネコ先生
ネコ先生
共通ボタンはカスタマイザーの「パーツスタイル設定[THE]」⇒「共通ボタン設定(全ページ用)」で文字色と背景色が変更できます。
共通ボタン設定で文字色と背景色を変更

カラム

ゆず
パーツスタイル「カラム」は投稿編集画面のツールバーから選択できます。

カラム

2カラム1:1(PC+スマホ)(PC)

2カラム1:1(PC+スマホ)(PC)
2カラム1:1(PC+スマホ)(PC)

2カラム3:7(PC+スマホ)(PC)

2カラム3:7(PC+スマホ)(PC)
2カラム3:7(PC+スマホ)(PC)

2カラム7:3(PC+スマホ)(PC)

2カラム7:3(PC+スマホ)(PC)
2カラム7:3(PC+スマホ)(PC)

3カラム(PC)

3カラム(PC)
3カラム(PC)
3カラム(PC)

4カラム(PC)

4カラム(PC)
4カラム(PC)
4カラム(PC)
4カラム(PC)
ネコ先生
ネコ先生
ちょっと雰囲気が分からないかもしれませんね。
投稿編集画面の方がまだ分かりやすいかも。
カラム投稿編集画面

ショートコード

ゆず
パーツスタイル「ショートコード」は投稿編集画面のツールバーから選択できます。

ショートコード

目次

ネコ先生
ネコ先生

任意の箇所に以下のショートコードを入力すると目次を表示させることができます。

そのまま表記すると目次が表示されるので全角で書いています、実際に入力する際は半角英数で入力してくださいね。

[outline]
目次

記事内広告

ネコ先生
ネコ先生

カスタマイザーの「広告設定[THE]」で設定したアドセンス広告を任意の箇所に挿入することができます。

そのまま表記すると広告が表示されるので全角で書いています、実際に入力する際は半角英数で入力してくださいね。

[adcode]

カテゴリ指定記事一覧(新着順)

ゆず
カテゴリIDと表示記事数を指定して新着順で表示させます。
[archivelist(半角スペース)cat=3(半角スペース)num=3]
「cat=3」の数字部分がカテゴリIDで「num=3」の数字部分が表示させる記事数になります。
プロフィールの設置・設定

今回はTHE THOR(ザ・トール)のプロフィールの設定・設置方法を解説します。 THE THOR(ザ・トール)でのプロフィールとは「著作者情報」という言葉になっていますが、要はプロフィールのことなので気にしないでくださいね。 プロフィールはアフィリ […]

アイキャッチ画像

ゆず ザ・トールをWordPressにインストールできました! 次は何をしたら良いの? ネコ先生 次はザ・トールの設定の前にWordPressの初期設定をしましょう。 目次 1 WordPress初期設定【一般】2 WordPress初期設定【投稿設 […]

WordPressテーマ【THE THOR(ザ・トール)】には、カスタマイズや設定できる項目が数多くあります。 全ての項目を設定しようと思ったら、あまりの設定項目の多さに目が回ってしまって、記事作成する前に力尽きてしまいかねません。 そこで、最初に設 […]

カテゴリ指定記事一覧(ランダム順)

ゆず
カテゴリIDと表示記事数を指定してランダムで表示させます。
[randlist(半角スペース)cat=3(半角スペース)num=3]
アイキャッチ画像

WordPressテーマ【THE THOR(ザ・トール)】では、テーマのバージョンアップをするための「更新用ユーザーID」と、会員フォーラムで質問等するための「会員フォーラムのアカウント」を発行してもらわなければいけません。 その際の発行手順は、購入 […]

WordPressテーマ【THE THOR(ザ・トール)】には、カスタマイズや設定できる項目が数多くあります。 全ての項目を設定しようと思ったら、あまりの設定項目の多さに目が回ってしまって、記事作成する前に力尽きてしまいかねません。 そこで、最初に設 […]

アイキャッチ画像

ゆず ザ・トールをWordPressにインストールできました! 次は何をしたら良いの? ネコ先生 次はザ・トールの設定の前にWordPressの初期設定をしましょう。 目次 1 WordPress初期設定【一般】2 WordPress初期設定【投稿設 […]

カテゴリ指定記事一覧(ランク順)

ゆず
カテゴリIDと表示記事数を指定して記事ランク順で表示させます。
[ranklist(半角スペース)cat=3(半角スペース)num=3]
プロフィールの設置・設定

今回はTHE THOR(ザ・トール)のプロフィールの設定・設置方法を解説します。 THE THOR(ザ・トール)でのプロフィールとは「著作者情報」という言葉になっていますが、要はプロフィールのことなので気にしないでくださいね。 プロフィールはアフィリ […]

WordPressテーマ【THE THOR(ザ・トール)】には、カスタマイズや設定できる項目が数多くあります。 全ての項目を設定しようと思ったら、あまりの設定項目の多さに目が回ってしまって、記事作成する前に力尽きてしまいかねません。 そこで、最初に設 […]

アイキャッチ画像

WordPressテーマ【THE THOR(ザ・トール)】では、テーマのバージョンアップをするための「更新用ユーザーID」と、会員フォーラムで質問等するための「会員フォーラムのアカウント」を発行してもらわなければいけません。 その際の発行手順は、購入 […]

ブログカード(外部サイトリンク)

ゆず
外部サイト用のブログカードを設置します。
[blogcard(半角スペース)url=外部サイトのURL]
TAKE-PRESS

ブログサイトにソースコードを表示させるWordPressプラグイン「WP Code Highlight.js」のインスト…

ブログカード(内部記事リンク)

ゆず
内部記事リンク用のブログカードを設置します。
[sitecard(半角スペース)subtitle=関連記事(半角スペース)url=内部記事URL]
関連記事

THE THOR(ザ・トール)にはデフォルトで会話風の吹き出し機能が備わっています。しかし、2019年3月現在では吹き出し画像と画像の名前を設定で変更することができません。 バージョン1.4.0より画像の変更が可能になりまし[…]

カスタムメニュー

ゆず
ダッシュボード「外観」⇒「メニュー」で設定したカスタムメニューを表示させます。
[customenu(半角スペース)menu=”メニュー名”]
下のカスタムメニューは私がフッターに設定したメニュー名「フッターメニュー」です。

年指定、月指定、日指定

ネコ先生
ネコ先生

これはちょっと使い道が分かりません。

どうやらそれぞれ現在の年月日が表示されるようで、「number=0」の数字部分を変更するとその数字分が加算されるようです。

[date-year(半角スペース)number=0]⇒年指定

[date-month(半角スペース)number=0]⇒月指定

[date-day(半角スペース)number=0]⇒日指定

2019
08
23
ゆず
何に使うんでしょうね?
よく分かりませんが、分かりしだい報告します。

スターリスト

ネコ先生
ネコ先生

商品やサービスなどの評価をつけるのに分かりやすい星マークを挿入できます。

数字部分を変更すると表示が変わります。5点満点で0.5刻みで評価できます。

[star-list(半角スペース)number=3.5]
ゆず
こちらは評価3.5点
ゆず
こちらは評価4.5点
ネコ先生
ネコ先生
色々使えそうですね。

サブタイトル編集

ゆず
サブタイトル系のボックスにタイトルを挿入することができます。

サブタイトル編集

ネコ先生
ネコ先生
ちなみにボックス内にカーソルがないとサブタイトルを入れることが出来ないので注意してくださいね。

アイコン挿入

ゆず
投稿編集画面で記事内の任意の場所にアイコンを設置することができます。

まずは設置したいアイコンを「アイコンオプション」から選びます。

投稿編集画面アイコンオプション

「アイコン一覧」から設置したいアイコンの右側にあるアイコン名をコピーしましょう。

アイコン一覧

右上の「×」ボタンをクリックして編集画面に戻り、ツールバーの「アイコン挿入」ボタンクリックして、先程コピーしたアイコン名をペーストして貼り付けます。

アイコン挿入

ゆず
「OK」をクリックするとアイコンが設置されます。

HTMLを挿入

ネコ先生
ネコ先生

任意の箇所にHTMLタグを挿入できます。

アフィリエイトタグなどを任意の箇所に設置できるので便利ですね。

HTML挿入

スマホテーブル横スクロール

ゆず
スマホ用の横スクロールするテーブルを設置します。

通常テーブルを設置すると列が増え、文字数が多くなると画面に収まるよう自動的に改行がされて縦長の表示になってしまいます。

特にスマホなどの小さな画面になるとレスポンシブ表示でさらに縦長表示になります。

試しに横4列のテーブルを作り適当な文字を入力しました。

横4列テーブルを設置

これをPC画面で見るとこんな感じ。

テーブルPCデモ

文字の表示が無理やり画面サイズに収められていますね。

まあ、本来は有難い機能でPCの時は問題ないのですが、スマホだと表示が変な感じになってしまう場合もあります。

ゆず
横文字がスマホで見ると縦書きに見えたりね。
ちなみにスマホのサイズにして見てみましょう。
スマホ表示デモ
表内の文字が縦に伸びてしまってますね。
次は「スマホテーブル横スクロール」をクリックしてスマホテーブルを先ほどのテーブルの下に設置し、その中に同じようにテーブル作ってみます。
投稿編集スマホテーブル横スクロール

これでPCでどう表示されるか見てみましょう。

投稿編集スマホテーブル横スクロールPCデモ

下の段が「スマホテーブル横スクロール」で作ったテーブルですが、PC表示だと変わりませんね。

しかし、スマホ表示にするとどうなるでしょう。

投稿編集スマホテーブル横スクロールスマホデモ3

スクロールバーが表示され、横スクロールできるようになりました。

意外に便利な機能なので、活用してみてくださいね。

まとめ

今回はTHE THOR(ザ・トール)のパーツスタイルの使い方とそれぞれのパーツの一覧を作ってみました。

この記事があなたのお役に立てれば幸いです。

メルマガ登録バナー1

パーツスタイル一覧
最新情報をチェックしよう!