【THE THORウィジェット1】ウィジェットが使える位置と使う手順

the thor ウィジェット
Chiharu
Chiharu
今回は、THE THOR(ザ・トール)のウィジェットを使う手順とウィジェットが使える位置についてお伝えします。

 

THE THORのウィジェットについて

 

THE THORは、ウィジェットを使ってブログの決められた位置に機能を増やすことができます。

 

例えば、サイドカラムにブログ内の検索・プロフィールの表示・メニューの表示など、全27種類のウィジェットから選択して使うことができます。

 

THE THORでウィジェットを使う手順

 

THE THORでウィジェットを使うための手順は下記を参考にしてください。

 

  • STEP1
    ウィジェットが使える位置を確認
    TOPページ・投稿ページ・固定ページ・メニューパネル、それぞれに使える位置が異なりますので、画像で確認ください。
  • STEP2
    ウィジェットの種類を確認
    全27種類。簡単に解説していますのでウィジェットの内容を確認ください。
  • STEP3
    好きな位置にウィジェットをカスタマイズ
    使いたいウィジェットが決まったらカスタマイズしていきましょう。

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

【STEP1】使える位置を確認

 

THE THORのウィジェットが使えるのは、メインカラム・サイドカラム・フッターエリア・メニューパネルです。

 

TOPページ・投稿ページ・固定ページ、それぞれのページによってレイアウトが異なりますので下記の画像で確認ください。

 

TOPページ

the thor ウィジェット
  1. トップページ上部エリア
    トップページのメインカラム上部にコンテンツを表示します。
  2. トップページ下部エリア
    トップページのメインカラム上部にコンテンツを表示します。
  3. サイドバーエリア
    サイドバーにコンテンツを表示します。
  4. 追従サイドバーエリア
    追従するサイドバーにコンテンツを表示します。
  5. フッターエリア[左]フッターエリアの左にコンテンツを表示します。
  6. フッターエリア[中央]フッターエリアの中央にコンテンツを表示します。
  7. フッターエリア[右]フッターエリアの右にコンテンツを表示します。

 

メニューパネル

the thor ウィジェット

メニューパネル
ヘッダーのメニューパネル内にコンテンツを表示します。

 

固定ページ

the thor ウィジェット
  1. サイドバーエリア
    サイドバーにコンテンツを表示します。
  2. 追従サイドバーエリア
    追従するサイドバーにコンテンツを表示します。
  3. フッターエリア[左]フッターエリアの左にコンテンツを表示します。
  4. フッターエリア[中央]フッターエリアの中央にコンテンツを表示します。
  5. フッターエリア[右]フッターエリアの右にコンテンツを表示します。

 

投稿ページ

the thor ウィジェット
  1. サイドバーエリア
    サイドバーにコンテンツを表示します。
  2. 追従サイドバーエリア
    追従するサイドバーにコンテンツを表示します。
  3. フッターエリア[左]フッターエリアの左にコンテンツを表示します。
  4. フッターエリア[中央]フッターエリアの中央にコンテンツを表示します。
  5. フッターエリア[右]フッターエリアの右にコンテンツを表示します。
  6. 投稿ページ上部エリア
    投稿ページのメインカラム上部にコンテンツを表示します。
  7. 投稿ページ下部エリア
    投稿ページのメインカラム下部にコンテンツを表示します。

 

 

【STEP2】種類を確認する

 

THE THORのウィジェットは全部で27種類。メインカラム・サイドカラム・フッターエリア、表示位置によって大きさが異なるので下記のサンプル画像を参考にしてください。

 

1.RSS
2.[THE]QRコード
3.[THE]カテゴリ人気記事
4.[THE]スタイルテキスト
5.[THE]タグランキング
6.[THE]タブコンテンツ
7.[THE]人気記事
8.[THE]広告
9.[THE]画像付き新着記事
10. [THE]絞込検索
11.[THE]著作者情報
12.アーカイブ
13.カスタム HTML
14.カテゴリー
15.カレンダー
16.ギャラリー
17.タグクラウド
18.テキスト
19.ナビゲーションメニュー
20.メタ情報
21.動画
22.固定ページ
23.最近のコメント
24.最近の投稿
25.検索
26.画像
27.音声

 

【ウィジェット1】RSS

 

メインカラムthe thor ウィジェット RSS
サイドカラム・フッターエリア

 

【ウィジェット2】[THE]QRコード

 

メインカラムthe thor ウィジェット QRコード

サイドカラム・フッターエリア
the thor ウィジェット QRコード

 

【ウィジェット3】[THE]カテゴリ人気記事

 

メインカラムthe thor カテゴリ人気記事ウィジェット

サイドカラム・フッターエリア
the thor カテゴリ人気記事ウィジェット

 

【ウィジェット4】[THE]スタイルテキスト

 

メインカラムthe thor ウィジェット スタイルテキスト
サイドカラム・フッターエリア
the thor ウィジェット スタイルテキスト

 

【ウィジェット5】[THE]タグランキング

 

メインカラムthe thor ウィジェット タグランキング

サイドカラム・フッターエリア
the thor ウィジェット タグランキング

 

【ウィジェット6】[THE]タブコンテンツ

 

メインカラムthe thor ウィジェット タブコンテンツ
サイドカラム・フッターエリア
the thor ウィジェット タブコンテンツ

 

【ウィジェット7】[THE]人気記事

 

メインカラムthe thor ウィジェット 人気記事
サイドカラム・フッターエリア
the thor ウィジェット 人気記事

 

【ウィジェット8】[THE]広告

 

メインカラムthe thor ウィジェット 広告
サイドカラム・フッターエリア
the thor ウィジェット 広告

 

【ウィジェット9】[THE]画像付き新着記事

 

メインカラムthe thor 画像つき新着記事ウィジェット
サイドカラム・フッターエリア
the thor 画像つき新着記事ウィジェット

 

【ウィジェット10】 [THE]絞込検索

 

メインカラムthe thor 絞り込み検索ウィジェット
サイドカラム・フッターエリア
the thor 絞り込み検索ウィジェット

 

【ウィジェット11】[THE]著作者情報

 

メインカラムthe thor 著作者情報ウィジェット
サイドカラム・フッターエリア
the thor 著作者情報ウィジェット

 

【ウィジェット12】アーカイブ

 

メインカラムthe thor アーカイブウィジェット
サイドカラム・フッターエリア
the thor アーカイブウィジェット

 

【ウィジェット13】カスタム HTML

 

メインカラムthe thor HTMLウィジェット
サイドカラム・フッターエリア
the thor HTMLウィジェット

 

【ウィジェット14】カテゴリー

 

メインカラムthe thor ウィジェット カテゴリ人気記事
サイドカラム・フッターエリア
the thor ウィジェット カテゴリ人気記事

 

【ウィジェット15】カレンダー

 

メインカラムthe thor カレンダーウィジェット
サイドカラム・フッターエリア
the thor カレンダーウィジェット

 

【ウィジェット16】ギャラリー

 

メインカラムthe thor ギャラリーウィジェット
サイドカラム・フッターエリア
the thor ギャラリーウィジェット

 

【ウィジェット17】タグクラウド

 

メインカラムthe thor タグクラウドウィジェット
サイドカラム・フッターエリア
the thor タグクラウドウィジェット

 

【ウィジェット18】テキスト

 

メインカラムthe thor テキストウィジェット
サイドカラム・フッターエリア
the thor テキストウィジェット

 

【ウィジェット19】ナビゲーションメニュー

 

メインカラムthe thor ナビゲーションメニューウィジェット
サイドカラム・フッターエリア
the thor ナビゲーションメニューウィジェット

 

【ウィジェット20】メタ情報

 

メインカラムthe thor メタ情報ウィジェット
サイドカラム・フッターエリア
the thor メタ情報ウィジェット

 

【ウィジェット21】動画

 

メインカラムthe thor 動画ウィジェット
サイドカラム・フッターエリア
the thor 動画ウィジェット

 

【ウィジェット22】固定ページ

 

メインカラムthe thor 固定ページウィジェット
サイドカラム・フッターエリア
the thor 固定ページウィジェット

 

23.最近のコメント

 

メインカラムthe thor 最近のコメントウィジェット
サイドカラム・フッターエリア
the thor 最近のコメントウィジェット

 

【ウィジェット24】最近の投稿

 

メインカラムthe thor 最近の投稿ウィジェット
サイドカラム・フッターエリア
the thor 最近の投稿ウィジェット

 

【ウィジェット25】検索

 

メインカラムthe thor 検索ウィジェット
サイドカラム・フッターエリア
the thor 検索ウィジェット

 

【ウィジェット26】画像

 

メインカラムthe thor 画像ウィジェット
サイドカラム・フッターエリア
the thor 画像ウィジェット

 

【ウィジェット27】音声

 

メインカラムthe thor 音声ウィジェット
サイドカラム・フッターエリア
the thor 音声ウィジェット

 

【STEP3】好きな位置にウィジェットをカスタマイズ

 

ウィジェット
  1. ダッシュボード
  2. 外観
  3. ウィジェット
the thor ウィジェット

使いたいウィジェットをクリック

the thor ウィジェット
  1. ウィジェットで表示させたい位置を選択
  2. ウィジェット をクリック
the thor ウィジェット
  1. タイトルなど必要事項を入力
  2. 保存 をクリック

 

THE THORウィジェットデザインのカスタマイズ

 

THE THORウィジェットのフレーム・見出しデザインのカスタマイズ方法もお伝えします。

 

the thor メインカラムウィジェットシャドウフレーム

the thor メインカラムウィジェットボーダーフレーム

the thor メインカラムウィジェットなし

 

the thor ウィジェット 角丸
the thor ウィジェットシンプル
the thor ウィジェットボトムボーダー
the thor ウィジェットはみ出すボーダー
the thor ウィジェットシンプルワイド
the thor ウィジェット内側ボーダー

 

ウィジェットの位置で設定方法が異なりますので、設定したい位置を確認してからすすめるようにしてください。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー メインカラム
カスタマイザー メインカラムウィジェット

共通エリア設定>メインカラムエリア設定>各ウィジェットフレーム設定・ウィジェットの見出しデザインを選択

選択してカスタマイザー公開 をクリック

見出しデザインは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー サイドカラム
カスタマイザー サイドカラム

共通エリア設定>サイドカラムエリア設定>各ウィジェットフレーム設定・ウィジェットの見出しデザインを選択

選択してカスタマイザー公開 をクリック

見出しデザインは、色の指定ができるので、「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー フッター
カスタマイザー フッター

共通エリア設定>フッターエリア設定>各ウィジェットフレーム設定・ウィジェットの見出しデザインを選択

選択してカスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー ヘッダーエリア設定
カスタマイザー メニューパネル サーチパネル

共通エリア設定>ヘッダーエリア設定>ウィジェットの見出しデザインを選択

選択してカスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 


 

以上、【THE THORウィジェット1】ウィジェットが使える位置と使う手順でした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

 

お読みいただき、ありがとうございました。

Chiharu