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

thor

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

part1.ではエディタ機能について見ていこうと思います。

カスタマイザーのプレビューでどの部分に設定が反映されるのか分かりずらい時に見ると便利です。ボリュームがすごいので、以下の3パートに分けています。

edit top2

※赤枠の機能が表示されない場合プラグインTinyMCE Advancedと干渉している可能性があります。オフにしてみてください。その他、編集時の挙動がおかしい場合ブラウザの拡大・縮小サイズを「標準」に戻すとなおるかもしれません。

目次(クリックで開く)

フォント

font b

ヒロ
フォント21種類から選べます。

スタイル

マーカー

マーカー(太)レッド

マーカー(中)レッド

マーカー(小)レッド

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

 

マーカー(太)レッド

マーカー(太)ブルー

マーカー(太)イエロー

マーカー(太)ピンク

マーカー(太)グリーン

マーカー(太)グレー

 

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

ラベル

角丸レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

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

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

ピンクアイコンラベル

四角アイコンラベル

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

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

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

 

ヒロ
ラベル10種類。

ボタン

オレンジ100%ボタン

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

ブルーボーダーボタン

ブルーグラデボタン

ピンクアイコンボタン

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

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

サークルアイコンボタン

ボックスアイコンボタン

 

ヒロ
ボタン10種類

ボックス

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

Lボックス内ボックス

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

■デフォルトパーツ

how to make parts

※自作したパーツの登録方法は別記事part.2パーツスタイル>ラベル設定を参照下さい。

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

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

 

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

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

ラベル

ボタン

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

■カラーセット

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

 

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

 

文字色の設定方法

ボタン

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

 

背景色の設定方法

ボタン

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

 

ボーダー色の設定方法

ボタン

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

 

 

ヒロ
パーツのカラーは以下のトーン系は7種各12色、モノトーンは7色から選べます。
ダークサイド
イエロー Vyellow 英語の部分がカラーコードだ。パーツ作成に便利だぞ。
fukidashi wankasu
ワンカス

文字色(ftc-Vyellow)背景色(bgc-Vyellow)ボーダー色(brc-Vyellow)だワン!

ヴィヴィッドトーン

イエロー Vyellow
オレンジ Vorange
レッド Vred
マゼンタ Vmagenta
ピンク Vpink
パープル Vpurple
ネイビー Vnavy
ブルー Vblue
スカイ Vsky
ターコイズ Vturquoise
グリーン Vgreen
ライム Vlime

ブライトトーン

イエロー Byellow
オレンジ Borange
レッド Bred
マゼンタ Bmagenta
ピンク Bpink
パープル Bpurple
ネイビー Bnavy
ブルー Bblue
スカイ Bsky
ターコイズ Bturquoise
グリーン Bgreen
ライム Blime

ディープトーン

イエロー DPyellow
オレンジ DPorange
レッド DPred
マゼンタ DPmagenta
ピンク DPpink
パープル DPpurple
ネイビー DPnavy
ブルー DPblue
スカイ DPsky
ターコイズ DPturquoise
グリーン DPgreen
ライム DPlime

ライトトーン

イエロー Lyellow
オレンジ Lrange
レッド Lred
マゼンタ Lmagenta
ピンク Lpink
パープル Lpurple
ネイビー Lnavy
ブルー Lblue
スカイ Lsky
ターコイズ Lturquoise
グリーン Lgreen
ライム Llime

ダルトーン

イエロー DLyellow
オレンジ DLorange
レッド DLred
マゼンタ DLmagenta
ピンク DLpink
パープル DLpurple
ネイビー DLnavy
ブルー DLblue
スカイ DLsky
ターコイズ DLturquoise
グリーン DLgreen
ライム DLlime

ベリーペールトーン

イエロー VPyellow
オレンジ VPorange
レッド VPred
マゼンタ VPmagenta
ピンク VPpink
パープル VPpurple
ネイビー VPnavy
ブルー VPblue
スカイ VPsky
ターコイズ VPturquoise
グリーン VPgreen
ライム VPlime

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

イエロー DGyellow
オレンジ DGorange
レッド DGred
マゼンタ DGmagenta
ピンク DGpink
パープル DGpurple
ネイビー DGnavy
ブルー DGblue
スカイ DGsky
ターコイズ DGturquoise
グリーン DGgreen
ライム DGlime

モノトーン

ホワイト white
ベリーライトグレー VLgray
ライトグレー Lgray
グレー gray
ダークグレー Dgray
ベリーダークグレー VDgray
ブラック black

■スタイルセット

サイズ系

サイズ(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つずつみていこう。

目次

mokuji
[ outline]
コードを書いた位置に目次を表示することが出来る。
見出しの目次は表示されずこちらが優先されますが、複数設置もできるので問題なし。
このサイトで使用しているサイドバーの目次はプラグインTable of Contents Plusを使用しています。
デフォルトでは見た目がおかしいのでネットで拾ってきたCSSコードを、
カスタマイザー>追加CSSの欄へ貼り付けて使用しています。

記事内広告 

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

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

new

[ archivelist cat=1 num=5]

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

edit toukou

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

edit id

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

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

randamu

[ randlist cat=1 num=5]

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

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

rank

[ ranklist cat=1 num=5]

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

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

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

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

[ blogcard url=]

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

サイトカード(内部記事リンク)

関連記事

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

bitcoin basic study

[ sitecard subtitle=関連記事 url=]

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

カスタムメニュー

[ customenu menu=””]

コードの””内に外観>メニューから設定したメニュー名を指定して表示する。

例)[ customenu menu=”メニュー名”]

年指定

月指定

日指定

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

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

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

コード部分に西暦、月、日付が表示される。

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

例)年指定:2019 >>> 2020

例)月指定:11 >>> 12

例)日指定:13 >>> 14

ヒロ
何に使うんだこれって感じだが、間に年・月・日・/でも入れておいてショートコードに登録しておけば。以下のようにワンクリックで日付が表示される。リアルタイムに合わせて変化するようだ。
[ date-year number=0][ date-month number=0][ date-day number=1]の場合
例)2019年11月14日
例)2019/11/14

スターリスト

[ star-list number=]

コードのnumber=部分に数値を指定します。ランキングや評価に使用する星を表示できます。

例)[ 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表示上のテーブル
edit scroll d
しかし、これをスマートフォン上で見ると縦に伸びたテーブルになり4行になってしまっている。
edit scroll b
列を増やすほどに縦に伸びたテーブルになってしまう。
edit scroll c
ヒロ
そこでこの機能の出番だ!ビシッ

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

 

edit scroll f

これでうまく表示できました。
しかし、スクロールバーが表示されないのでスクロールをうながす文言を入れておいたほうが良さそうですね。
スマホテーブル横スクロールの注意点としては、
あくまでスマホ用でありタブレットではスクロールできないので、
プラグインのResponsive Scrolling Tablesを入れておくと便利です。
テーブルをレスポンシブ化させるプラグインで、モバイルだけでなく、タブレットにも対応しています。
使い方は超簡単インストールしたら有効化するだけです。
関連記事
top3

>>>XM 口座開設方法 >>>XM アフィリエイトの仕組み 現在このページ  >>>XM MT4インストール方法&複数 […]

shutterstock

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

rinker install

物販アフィリエイトに必須の、ワードプレスプラグイン「Rinker」の設定方法です。 目次(クリックで開く) まずはPix […]

SimilarWeb

ブログ・アフィリエイト関連の無料・有料含めたサービス・ツール一覧です。 始めの内はいろいろ試したくなるツール類ですが、 […]

a8-koukoku-harituker-kihon-2-0

ブログ運営者やアフィリエイトの初心者が覚えておきたい広告の貼り方です。 目次(クリックで開く) 広告の貼り付け作業とは広 […]

ブログの最新記事8件