the thor edit eyecatch

THE THOR【ザ・トール】エディタ機能(投稿の編集画面)を一覧で見ていこう

機能が豊富でカスタマイズに優れた有料テーマTHE THOR(ザ・トール)。

それゆえに「あの機能どこにあるんだっけ」となる事もしばしば。

素人ながらまずは投稿の編集画面の機能を覚えながら、思い出し用に画像にしていこうと思います。

ボリュームがすごすぎるのでエディタ機能、カスタマイザー機能、コンテンツ制作機能に分けてやっていく予定です。

edit all

※赤枠の機能が表示されない場合プラグインTinyMCE Advancedと干渉している可能性があります。オフにしてみてください。自分はそれで直りました。

広告
目次

スタイル

マーカー

マーカー(太)レッド

マーカー(中)レッド

マーカー(小)レッド

ヒロ
マーカーの太さは(太)(中)(小)の3種類。

 

マーカー(太)レッド

マーカー(太)ブルー

マーカー(太)イエロー

マーカー(太)ピンク

マーカー(太)グリーン

マーカー(太)グレー

 

ヒロ
マーカーのカラーは6色から選べるよ。

ラベル

角丸レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

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

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

ピンクアイコンラベル

四角アイコンラベル

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

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

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

 

ヒロ
ラベルは10種類。

ボタン

オレンジ100%ボタン

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

ブルーボーダーボタン

ブルーグラデボタン

ピンクアイコンボタン

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

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

サークルアイコンボタン

ボックスアイコンボタン

 

ヒロ
ボタンは10種類。

ボックス

サブタイトルボーダーボックス
BIG括弧ボックス
方眼ペーパーボックス
はてなボックス
ビックリボックス
Qボックス
Aボックス
シンプルアイコンボックス
背景アイコンボックス
帯アイコンボックス
ヒロ
ボックスは10種類。

Lボックス内ボックス

ターコイズグラデタイトル
アイコンボーダータイトル
ブルーシャドウタイトル
サブタイトルボーダーボックス
BIG括弧ボックス
方眼ペーパーボックス
はてなボックス
びっくりボックス
Qボックス
Aボックス
ヒロ
ボックス内ボックスは10種類。「ボックス」と「ボックス内ボックス」をうまく組みあわせて使ってね。

■デフォルトパーツ

まずはベースとなるデフォルトパーツを作成します。

任意の文字を入力し範囲選択する。>「スタイル」>「■デフォルトパーツ」>「ラベル」「ボタン」「ボックス」「ボックス内ボックス」のいずれかをクリック。

先に文字を入力してからでないと「ボックス内ボックス」が表示されません。

以下のような背景がグレーの■デフォルトパーツが作成される。

ラベル

ボタン

ボックス
ボックス内ボックス
「■デフォルトパーツ」を作ってからでないと、「■カラーセット」「■スタイルセット」はグレー表示のままで使えません。

■カラーセット

「■デフォルトパーツを作成」したら「■カラーセット」を使って「文字色」「背景色」「ボーダー色」にカラーを設定します。

「■カラーセット」や「■スタイルセット」を適用していくときはテキスト部分を範囲選択します。

文字色の設定方法

ボタン

「スタイル」>「■カラーセット」>「文字色」>「ヴィヴィッドトーン」>「レッド」

 

背景色の設定方法

ボタン

「スタイル」>「■カラーセット」>「背景色」>「ヴィヴィッドトーン」>「レッド」

 

ボーダー色の設定方法

ボタン

「スタイル」>「■スタイルセット」>「ボーダー系>「オール実線(細)」>■「カラーセット」>「ボーダー色」>「ヴィヴィッドトーン」>「レッド」

 

ヒロ
パーツのカラーは以下のトーン系は7種各12色、モノトーンは7色から選べます。

ヴィヴィッドトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

ブライトトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

ディープトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

ライトトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

ダルトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

ベリーペールトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

ダークグレイッシュトーン

イエロー
オレンジ
レッド
マゼンタ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム

モノトーン

ホワイト
ベリーライトグレー
ライトグレー
グレー
ダークグレー
ベリーダークグレー
ブラック

■スタイルセット

サイズ系

サイズ(10%)

サイズ(25%)

サイズ(40%)

サイズ(50%)

サイズ(60%)

サイズ(75%)

サイズ(90%)

サイズ(100%)

ヒロ
横幅の割合に応じたサイズに変更できる。

内側余白系

パーツ内側の左右上下の余白を0にする。

余白0

パーツ内側の上側余白を調節する。

トップ(極小)

トップ(小)

トップ(中)

トップ(大)

パーツ内側の右側余白を調節する。

ライト(極小)

ライト(小)

ライト(中)

ライト(大)

パーツ内側の下側余白を調節する。

ボトム(極小)

ボトム(小)

ボトム(中)

ボトム(大)

パーツ内側の左側余白を調節する。

レフト(極小)

レフト(小)

レフト(中)

レフト(大)

ヒロ
パーツ内テキストの上下左右、上、右、下、左の余白を調節できる。

外側余白系

パーツ外側の左右上下の余白を0にする。

余白0

パーツ外側の上側余白を調節する。

テキスト
トップ(極小)

テキスト
トップ(小)

テキスト
トップ(中)

テキスト
トップ(大)

パーツ外側の右側余白を調節する。

ライト(極小)テキスト

ライト(小)テキスト

ライト(中)テキスト

ライト(大)テキスト

パーツ外側の下側余白を調節する。

ボトム(極小)
テキスト

ボトム(小)
テキスト

ボトム(中)
テキスト

ボトム(大)
テキスト

パーツ外側の左側余白を調節する。

テキストレフト(極小)

テキストレフト(小)

テキストレフト(中)

テキストレフト(大)

 

ボーダー系

オール実線(細)

オール実線(中)

ボタンオール破線(細)

オール破線(中)

オール点線(細)

オール点線(中)

ボトム実線(細)

ボトム実線(中)

ボトム破線(細)

ボトム破線(中)

ボトム点線(細)

ボトム点線(中)

レフト実線(細)

レフト実線(中)

レフト破線(細)

レフト破線(中)

レフト点線(細)

レフト点線(中)

ヒロ
パーツの左右上下、下、左にボーダーを設定できる。自分の環境ではなぜか点線が表示されない。

文字系

位置(左)

位置(中央)

位置(右)

サイズ(小)

サイズ(大)

サイズ(極大)

太字

斜体

打消し

アンダーライン

ヒロ
パーツ内の文字位置、サイズ、装飾をできる。

シャドウ系

ボックス外(ライト)

ボックス外(ノーマル)

ボックス外(ダーク)

ボック内(ライト)

ボックス内(ノーマル)

ボックス内(ダーク)

テキストシャドウ(ライト)

テキストシャドウ(ノーマル)

テキストシャドウ(ダーク)

ヒロ
パーツの枠、テキストに影を設定できます。

角丸系

角丸(5px)

角丸(10px)

ラウンド

背景系

グラデーション1

グラデーション2

方眼用紙

ラベルパーツ専用

 

コーナータイトル(ボックス内)

ラウンド(左)

ラウンド(右)

アイコン(余白

アイコン(ボーダー)

アイコン(ボックス)

アイコン(サークル)

 

ヒロ
下の4つはラベル内に設置したアイコンのカスタマイズ用です。先にボタンを作成し「アイコンオプション」>「アイコン挿入」でボタン内にアイコンを設定してから「ラベル専用パーツ」を設定します。

ボタンパーツ専用

立体

薄影

ボタン

ボタン

アイコン(余白)

アイコン(ボーダー)

アイコン(ボックス)

アイコン(サークル)

 

ヒロ
下の4つはボタン内に設置したアイコンのカスタマイズ用です。先にボタンを作成し「アイコンオプション」>「アイコン挿入」でボタン内にアイコンを設定してから「ボタン専用パーツ」を設定します。

ボックスパーツ専用

 

全域タイトル(ボックス内)
カギ括弧
めくり(左)
めくり(右)
はてなマーク
ビックリマーク
Qマーク
Aマーク
サブタイトル(シンプル)
サブタイトル(角丸)
サブタイル(ラウンド)
アイコン(シンプル)
アイコン(背景)
アイコン(帯)
アイコン(コーナー)
アイコン(サークル)
ヒロ
下の4つはボックス内に設置したアイコンのカスタマイズ用です。先にボックスを作成し、「アイコンオプション」>「アイコン挿入」でボックス内にアイコンを設定してから「ボックス専用パーツ」を設定します。

プリセットパーツ

区切り線

edit priset kugirisen

実線


破線


点線


ヒロ
普通の区切り線3種類

吹き出し

edit priset fukidashi

左画像(背景スタイル)

Name
コメント
左画像(ボーダースタイル)
Name
コメント
右画像(背景スタイル)
Name
コメント
右画像(ボーダースタイル)
Name
コメント
ヒロ
吹き出し画像を右と左に表示できる。コメント欄は背景スタイル(べた塗り)とボーダースタイル(枠線背景色なし)が選べる。

スコアボックス

edit priset scorebox
最終行(レッド)
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5
ヒロ
スコアボックスは最終行の色を6色から選ぶことができる。

口コミボックス

edit priset kutikomibox

背景(レッド)

口コミ

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


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

ボーダー(レッド)

口コミ

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


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

ヒロ
口コミボックスは背景(べた塗り)とボーダー(枠線背景色なし)それぞれ6色から選べる。

レビューボックス

edit priset reviewbox

背景スタイル

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

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

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

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

ヒロ
レビューボックスは背景スタイル(べた塗り)とボーダースタイル(枠線背景色なし)を選べます。

アコーディオンボックス

edit priset acordionbox b
背景スタイル
タイトル
Hこのエリアにレビュー本文を記入します。
ボーダースタイル
タイトル
Hこのエリアにレビュー本文を記入します。
ヒロ
アコーディオンボックスは背景スタイル(べた塗り)とボーダースタイル(枠線背景色なし)が選べます。右側の+マークをクリックで本文を展開できます。

共通ボタン

プライマリボタン

edit button p

セカンダリボタン

edib button s

ノーマルボタン

edit button n

ヒロ
共通ボタンは3種類 右・中央:左に配置できる。プライマリボタンはちょっと大きめ。

 

カラム

edit column b

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

テキスト
テキスト

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

テキスト
テキスト

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

テキスト
テキスト

2カラム1:1(PC)

テキスト
テキスト

2カラム3:7(PC)

テキスト
テキスト

2カラム7:3(PC)

テキスト
テキスト

3カラム(PC)

テキスト
テキスト
テキスト

4カラム(PC)

テキスト
テキスト
テキスト
テキスト
ヒロ
指定した割合とカラム数(段組み)で表示する。PC用とPC+スマホ用がある。左右で文章と画像を分けて表示したり。画像を整列させたり使い方はアイデア次第。

ショートコード

edit shortcode c

shortcodec
ヒロ
問題はここから、ショートコードは12種類あるので1つずつみていこう。

①目次 [ outline]

mokuji
このコードを書いた位置に目次を表示することが出来る。文頭の目次は表示されずこちらが優先される。

②記事内広告 [ adcode]

adcode
こんな感じで設定している広告が表示される。
コードの位置に外観>カスタマイズ>記事内広告の設定で指定した広告が表示される。

③カテゴリ指定記事一覧(新着順)[ archivelist cat=1 num=5]

new

上記のように、コードの位置に指定したカテゴリと記事数で新着順に並べて表示する。

edit toukou

カテゴリーの指定は投稿>カテゴリーをクリック。

edit id

指定したいカテゴリーIDをarchivelist cat=部分に指定する。表示したい記事数をnum=部分に記入する。

④カテゴリ指定記事一覧(ランダム順)[ randlist cat=1 num=5]

randamu

上記のように、コードの位置に指定したカテゴリと記事数でランダム順に表示する。更新ボタンを押すたびにランダム表示される。

⑤カテゴリ指定記事一覧(ランク順)[ ranklist cat=1 num=5]

rank

上記のように、コードの位置に指定したカテゴリと記事数でランク順(閲覧数順)に表示される。

ヒロ
カテゴリを新設したばかりで関連記事候補が表示されない場合に設定しておくと回遊率の効果アップに。

⑥ブログカード(外部サイトリンク)[ blogcard url=]

ferret [フェレット]

ソーシャルメディアの情報を収集し分析するソーシャルリスニングツールはいくつか提供されており、とても便利です。 しかしこ…

url=のあとに外部サイトのURLを設定すると外部リンクをカード型にして表示してくれる。

⑦サイトカード(内部記事リンク)[ sitecard subtitle=関連記事 url=]

関連記事

仮想通貨とは? 仮想通貨とは取引所を通じて現金と交換することで、インターネット上で物やサービスの決済に使えるデジタルな通貨。英語圏ではCrypto Currency (クリプトカレンシー)と呼ばれている。 Crypto(クリ[…]

bitcoin basic study

url=のあとに自分のサイトないのURLを設定すると内部リンクをカード型にして表示してくれる。

⑧カスタムメニュー[ customenu menu=”メニュー名”]

上記のように、コードの位置に外観>メニューから設定したメニューが表示される。

⑨年指定[ date-year number=0]

⑩月指定 [ date-month number=0]

⑪日指定 [ date-day number=0]

現在の西暦、月、日付が表示される。

number=0部分をnumber=1にすると、プラス1した数値が表示される。

 

今日の日付が2019年3月13日の場合

number=0>>>20190320

number=1>>>20200421

number=2>>>20210522

ヒロ
何に使うんだこれって感じだが、間に年・月・日・/でも入れておいてショートコードに登録しておけば。以下のようにワンクリックで今日の日付が表示されるので便利かもしれない。
(例)2019年03月20日
(例)2019/03/20

⑫スターリスト[ star-list number=3.5]

[ star-list number=0.5]>>>

[ star-list number=5]>>>

ヒロ
0.5単位で☆5まで表示できる。

サブタイトル編集

edit subtitle

スタイル>サブタイトルボーダーボックス>サブタイトル編集の順でサブタイトルを入力するために使用します。

そのままではサブタイトル部分に文字が入力できない。
edit subtitle d
「サブタイトル編集」からサブタイトル名を入力する。
サブタイトルに「まとめ」と表示できました。

 

アイコン挿入

まずはアイコンオプションをクリック。

edit icon b

アイコン一覧から希望のアイコンネームをコピーする。

edit icon e

「アイコン挿入」をクリック。

 

edit icon cさきほどのアイコンネームを入力する。

 

twitter-icon

記事中にアイコンが挿入された。

HTMLを挿入

edit html b

「HTMLを挿入」をクリック。

edit html

テキストモードを表示せず、ビュジュアルモードから直接HTMLタグを入力できる。

以下の様に太字で表示されました。

(例)太字にする

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

edit smartphone
PCにテーブルを表示する場合:PCモニタの幅自体が広いのでテーブルの幅を100%以内に指定しておけば基本的にはみ出さない。
以下はPC表示上のテーブル
edit scroll d
しかし、これをスマートフォン上で見ると縦に伸びたテーブルになり4行になってしまっている。
edit scroll b
列を増やすほどに縦に伸びたテーブルになってしまう。
edit scroll c
ヒロ
そこでこの機能の出番だ!ビシッ

「スマホテーブル横スクロール」をクリックし、点線の枠内にテーブルを作成。

edit scroll e

ヒロ
アレ?改善されてないぞ4行のままだ。

ポイント

どうやらパーセント指定が優先されるようだ。「テーブル」>「表のプロパティ」から幅をピクセル指定に変更しよう。PC側ではみ出さないようにPC側の横幅以内でテーブルを作成しよう。自分の環境では700px。

 

幅の計測方法はCHROMEブラウザの拡張機能Page Ruler Reduxがおすすめ。

edit scroll g
手順①

 

edit scroll h
手順②

 

edit scroll f

これで横スクロールできるようになりました。ただスクロールバーが表示されないので、スクロールをうながす文言を入れておいたほうが良さそうですね。

ここまでで「スマホテーブル横スクロール」の説明は終わりですが、PC側でもレイアウトを崩さずスクロール表示させたいという人もいると思う。

実は「スマホテーブル横スクロール」を使わずともPC、スマートフォンどちらでもスクロール表示できる方法があります。

それにはワードプレスプラグインResponsive Scrolling Tablesを使います。

使い方は超簡単インストールしたら有効化するだけで、

edit scroll i
このようにPC側でもスクロール表示されるようになります。
関連記事
16 blog houkoku

3か月目以降のPV・ユーザー数・収入のデータと最近のブログ運営についてのメモ置き場。 広告 目次 1 ユーザー・PV数・ […]

15 wordpress recomend

結論から言うと一番のおすすめ有料テーマはTHE THOR(ザ・トール)になります。 広告 目次 1 有料テーマの選び方2 […]

shutterstock

ブログやサイトのイメージに合う画像がなかな見つからず時間を浪費してしまう・・・ そんな問題を解決するべく画像素材ダウンロ […]

rinker install

物販アフィリエイトや商品レビューに必須の、ワードプレスプラグイン「Rinker」の設定方法です。 事前に「Amazonア […]

blog hard

稼げると聞いて勢いだけでブログ・アフィリエイトを始めてしまった・・・そういう人は多いのではないでしょうか。 なかなかネッ […]

当サイト一押しのWordPressテーマ「THE THOR(ザ・トール)」

開発には一流のWEBデザイナー、SEOコンサルタント、アフィリエイター、ブロガーなど各界の精鋭が集まり、彼らの知識とノウハウが詰め込まれています。ブログ・アフィリエイトサイトで集客・収益を増やしたいならザ・トール以外の選択肢はありません。


↓ご購入はこちらからどうぞ

>>>【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)|

広告