【初心者必見】THE THOR(ザ・トール)の記事装飾の使い方

【初心者必見】THE THOR(ザ・トール)の記事装飾の使い方

 

考える人たち
THE THORの記事装飾が実際どう表示されるのか確認したい!使い方を教えて欲しい!

 

こんな疑問にお答えします。

 

本記事の内容

・スタイル
・プリセットパーツ
・共通ボタン
・カラム
・ショートコード
・サブタイトル編集
・アイコン挿入
・< >(HTMLを挿入)
・スマホテーブル横スクロール

本記事の信頼性

log

 

このブログでも使用しているWord Pressの有料テーマ「THE THOR」の解説記事です。

THE THORは、非常に見やすく、SEO対策がされており、レスポンシブにも対応しているおすすめの有料テーマです。

 

【THE THOR】Word Pressテーマの変更前と変更後にするべきことまとめ
画像:公式サイト

 

※以下は2022年8/6現在の情報です。

 

・WordPressテーマ 一式(親テーマ・子テーマ)
・会員限定サイト利用権(操作マニュアルサイト(100ページ以上)/会員フォーラムサイト)
・無料バージョンアップ
・インストール時の「安心メールサポート」
→テーマのインストールが完了するまで専任のスタッフ徹底的にサポート
16,280円(税込)
・WordPressテーマ 一式(親テーマ・子テーマ)
・会員限定サイト利用権(操作マニュアルサイト(100ページ以上)/会員フォーラムサイト)
・無料バージョンアップ
・SEO対策に最適な自動バックアップ付き「高速SSDサーバー」1年間分
・ドメイン1点(.net .com .biz .info)1年間分
・WordPress本体とテーマのインストール代行
・テーマのデザイン初期設定代行WordPressテーマ 一式(親テーマ・子テーマ)
30,140円(税込)
ブログ経験者は「テーマ&サポートプラン」がおすすめです。
実際に僕も「テーマ&サポートプラン」を購入しました。

 

記事を書く時に、マーカーを引いたり、ラベルを使ったりすると思います。

THE THORでは記事装飾がたくさん用意されており、初心者でも洗練された記事を簡単に作ることができます。

この記事で、どんな見た目になるのか、どんな使い方をするのかを解説します。

 

スタイル

スタイル

 

「スタイル」の項目でできることをまとめました。

マーカーやボックスなど非常によく使う項目です。

 

マーカー

よく使うマーカー(太レッド)

マーカー(太)

マーカー(中)

マーカー(細)

 

    それぞれカラーが6色用意されています。

レッドブルーイエローピンクグリーングレー

色の濃度はライトなパステルカラーです。

 

ラベル

角丸レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

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

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

ピンクアイコンラベル

四角アイコンラベル

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

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

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

 

ラベルといってもこのように様々な種類があります。

ブログのデザインにあわせて選べる点が良いですね。

 

ボタン

オレンジ100%ボタン

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

ブルーボーダーボタン

ブルーグラデボタン

ピンクアイコンボタン

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

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

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

サークルアイコンボタン

ボックスアイコンボタン

 

ボタンも様々な種類が用意されています。

アイコンに関しては後ほど説明いたします。

 

ボックス

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

 

ボックスも豊富ですね。

Q & Aもできやすいように用意されています。

こちらもアイコンとサブタイトルに関しては後ほど説明します。

 

ボックス内ボックス

ターコイズグラデタイトル
帯アイコンボックス + ターコイズグラデタイトル
アイコンボーダータイトル
ビックリボックス + アイコンボーダータイトル
ブルーシャドウタイトル
はてなボックス + ブルーシャドウタイトル
サブタイトルボーダーボックス
Qボックス + サブタイトルボーダーボックス
BIG括弧ボックス
Aボックス + BIG括弧ボックス
方眼ペーパーボックス
方眼ペーパーボックス + 方眼ペーパーボックス
はてなボックス
シンプルアイコンボックス + はてなボックス
ビックリボックス
サブタイトルボーダーボックス + ビックリボックス
Qボックス
シンプルアイコンボックス + Qボックス
Aボックス
帯アイコンボックス + Aボックス

 

ボックスを一つ選択したあとに、ボックス内ボックスを選択すると上記のようになります。

組み合わせはたくあんあるので、自分好みで作りましょう。

 

スタイルセット/カラーセット/デフォルトパーツ

このカテゴリは自分で好きにカスタマイズできます。

 

スタイルセット
スタイルセット
カラーセット
カラーセット
デフォルトパーツ
デフォルトパーツ

 

ラベルをカスタマイズ

ボタンをカスタマイズ

ボックスをカスタマイズ

ボックス内ボックスをカスタマイズ

オリジナルテンプレートを使ってサイトのデザインを統一しましょう。

カスタマイズしたデザインの保存方法は別記事で解説します。

 

プリセットパーツ

プリセットパーツ

 

「プリセットパーツ」の項目でできることをまとめました。

さまざまなブログに適応できるようなパーツが揃えてあります。

 

区切り線

実線


破線


点線


 

吹き出し

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

画像変更

 

画像変更は、アイコンの左上にカーソルを持ってきて、「メディアを追加」で画像を選択すると変更できます。

 

スコアボックス

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

商品のレビューなどに使えます。

テーブルになっているので、列や行を増やすことも減らすことも可能です。

 

口コミボックス

こちらは背景(レッド)

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


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

こちらはボーダー(レッド)

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


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

口コミをまとめる時に使えます。

シンプルで見やすいデザインが特徴です。

 

レビューボックス

背景スタイル
N.Sさん

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

ボーダースタイル
N.Sさん

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

こういったレビューボックスも備わっています。

商品紹介などにも使えますね。

 

アコーディオンボックス

こちらは背景スタイル
Hこのエリアにレビュー本文を記入します。
こちらはボーダースタイル
Hこのエリアにレビュー本文を記入します。

アコーディオンボックスも作れるので動きのある記事に仕上がります。

 

共通ボタン

共通ボタン

 

「共通ボタン」の項目では、実際にクリック可能なデザインボタンを設置することができます。

 

それぞれのボタンの配置も左・中・右と選択が可能です。

 

カラム

カラム

 

「カラム」では横並び表示の編集が可能です。

 

カラム
最大
4カラムまで

設定可能です

カラムの中に
カラムを設定することもできます

 

画像もテキストと一緒に配置できます。

また、PC、スマホと分けて設定もできる点が優れています。

 

ショートコード

ショートコード

 

「ショートコード」では広告や内部リンクなど、このブログでも多用している非常に便利な機能が備わっています。

 

目次

 

[ outline ]を入力すると以下の目次が表示されます。

目次

 

目次の設定方法はこちらの記事で解説しています。

関連記事

  考える人たち THE THORの目次の設定方法がわからない!目次が表示されない!設定方法を教えて欲しい!   こんな疑問にお答えします。   本記事の内容 […]

THE THOR(ザ・トール)の目次設定の方法と使い方の解説

 

記事内広告

 

「[ adcode ]」と入力すると広告が表示されます。

このコードを利用する前にあらかじめ、記事内広告を設定する必要があります。

設定方法はこちらで説明しています。

関連記事

  考える人たち Word Pressの有料テーマ「THE THOR」に変更したけど、Googleアドセンスはどこで設定したらいいの?貼り方を教えて欲しい!   こんな疑問にお答えしま[…]

【THE THOR】Googleアドセンスの設定方法と貼り方の解説

 

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

 

[ archivelist cat=カテゴリid num=記事の数 ]と入力します。

 

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

 

[ randlist cat=カテゴリid num=記事の数 ]と入力します。

 

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

 

[ ranklist cat=カテゴリid num=記事の数 ]と入力します。

 

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

 

[ blogcard url=外部サイトのURL ]

 

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

 

[ sitecard subtitle=サブタイトル url=内部記事のURL target=self または blank ]
・self:現在のタブで開く
・blank:新しいタブで開く

カスタムメニュー

 

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

ブログで設定しているメニューが表示されます。

 

年指定

 

[ date-year number=0 ]

0:今年
1や-1にすると、来年や昨年に変更できます。

 

月指定

 

[ date-month number=]

0:今月
1や-1にすると、来月や先月に変更できます。

 

日指定

 

[ date-day number=]

0:今日
1や-1にすると、明日や昨日に変更できます。

 

スターリスト

 

[ star-list number=3.5 ]を入力すると以下のようになります。

 

サブタイトル編集

サブタイトル編集

 

「サブタイトル編集」も非常に便利な機能です。

ボックスであった、サブタイトルボーダーボックスで使います。

 

このサブタイトルボーダーボックスを表示します。
その後にサブタイトル編集をクリックして入力すると上記のラベル部分に文字が入ります。

アイコン挿入

アイコン挿入

 

「アイコン挿入」には非常に多くのアイコンが用意されています。

アイコンはアイコンオプションからコードを選択します。

 

アイコン挿入

 

通常の段落だけでなく、ラベルやボックスでも使用することができます。

 

ここにカーソルを置いて、アイコン挿入をクリックしてコードを入力しましょう。

 

同じく、ここにカーソルを置いて、アイコン挿入をクリックしてコードを入力しましょう。

 

パックマンのアイコンが挿入されました。

←もちろんこのように、段落に挿入することも可能です。

アイコンの使い方と一覧はこちらの記事で解説しています。

関連記事

  考える人たち THE THORで用意されているアイコンってどうやって使うの?使い方を教えて欲しい!   こんな疑問にお答えします。   本記事の内容 ・TH[…]

【コピペできる!】THE THORで使えるアイコンの使い方と一覧まとめ

 

< >(HTMLを挿入)

HTML挿入

 

こちらをクリックすると、HTMLタグを挿入することができます。

TwitterやYouTubeの埋め込みタグもこちらを使います。

 

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

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

 

こちらはスマホ専用になりますが テーブルを作成すると 横スクロールが可能になります。
スマホで開いて横スクロールしてみてください。

 

さいごに

【初心者必見】THE THOR(ザ・トール)の記事装飾の使い方

 

THE THORの記事装飾の使い方を解説しました。

さまざまなジャンルのブログに対応できるように、多くの要素が用意されています。

一度購入すれば、複数のブログに使用することもできる点もTHE THORの魅力です。

 

 

【初心者必見】THE THOR(ザ・トール)の記事装飾の使い方
最新情報をチェックしよう!