【THE THORサイドカラムのカスタマイズ】初心者向けに画像付きで解説

サイドカラム
the thor サイドカラム

 

今回は、THE THOR(ザ・トール)サイドカラムのカスタマイズ方法についてお伝えします。

 

1カラム1カラム
2カラム2カラム
3カラム3カラム

カラムとは、Webページのレイアウト構成のこと。1カラムはメインカラムのみ、2カラムはメインカラムとサイドカラムから、3カラムはメインカラムのみの構成です。

 

サイドカラム以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

THE THORサイドカラムについて

 

THE THORサイドカラムは、ウィジェットを使って機能を増やすことができます。

 

ウィジェットとは、Webサイトのサイドカラムやフッターにさまざまな情報やメニュー、機能を追加することのできるパーツのことです。

 

the thor ウィジェット

 

THE THORはレスポンシブ対応のため、PC・スマートフォン・タブレットに合わせてレイアウトや画像の大きさを自動的に変えて表示されるようになっています。

 

THE THORはスマホやタブレットで表示されるとき、画像のようにサイドカラムのウィジェットがメインカラムとフッターの間に回り込んで縦長のレイアウトで表示さるようになっています。

 

THE THORに表示できるウィジェット

 

THE THORサイドカラムに表示できるウィジェット27種類、下記の通りです。

RSS RSS/Atomフィードのエントリー

QRコード QRコードを表示する

カテゴリ人気記事 指定したカテゴリでPV数の多い順に記事を表示する

スタイルテキスト 投稿ページと同じスタイルが利用できるテキスト

タグランキング タグランキングを表示する

タブコンテンツ 投稿ページと同じスタイルが利用できるコンテンツテキスト

人気記事 PV数の多い順に記事を表示する

広告 様々な広告に利用できるテキストエリア

画像付き新着記事 画像付きの新着記事を表示する

絞込検索 絞込検索フォームを表示する

著作者情報 著作者情報を表示する

アーカイブ 投稿の月別アーカイブを表示する

カスタムHTML 任意のHTMLコードが入力できる

カテゴリー カテゴリーのリストやドロップダウンができる

カレンダー カレンダーが表示できる

ギャラリー 画像ギャラリーの表示ができる

タグクラウド タグクラウド

テキスト 任意のテキスト

ナビゲーションメニュー ナビゲーションメニューの表示ができる

メタ情報 ログイン・RSS・wordPressへのリンクを表示する

動画 メディアライブラリ内から、またはYouTube・Viemo・その他のプロバイダから動画を表示する

固定ページ 固定ページ一覧

最近のコメント 直近のコメントを表示できる

最近の投稿 直近の投稿を表示できる

検索 サイト内検索

画像 画像が表示できる

音声 音声プレーヤーが表示できる

 

THE THORサイドカラムカスタマイズの手順

 

  • STEP1
    サンプルを見てカスタマイズする内容を決める
  • STEP2
    それぞれのカスタマイズをする
    1.サイドカラムフレームデザイン
    2.サイドカラムウィジェットのフレームデザイン
    3.サイドカラムウィジェットの見出しデザイン

 

THE THORサポート

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

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

 

THE THORメインカラムのカスタマイズサンプル

 

the thor サイドカラムフレームシャドウフレーム
the thor サイドカラムフレームボーダーフレーム
the thor サイドカラムフレームなし

 

the thor ウィジェットフレームシャドウフレーム

the thor サイドカラムフレームボーダーフレーム

the thor ウィジェットフレームなし

 

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

 

【カスタマイズ1】サイドカラムのフレームデザイン

 

THE THORサイドカラムは、フレームデザインをカスタマイズすることができます。

 

the thor サイドカラムフレーム

 

サイドカラムのフレームは、シャドウフレーム・ボーダーフレーム・なしの3種類から選ぶことができます。

 

the thor サイドカラムフレームシャドウフレーム
the thor サイドカラムフレームボーダーフレーム
the thor サイドカラムフレームなし

 

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

共通エリア設定>サイドカラムエリア設定>サイドカラムのフレームを選択

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

 

【カスタマイズ2】サイドカラムウィジェットのフレームデザイン

 

THE THORは、サイドカラムに表示するウィジェットひとつひとつにフレームデザインのカスタマイズができます。デザインは、シャドウフレーム・ボーダーフレーム・なしの3種類から選択します。

 

the thor ウィジェットフレームシャドウフレーム

the thor サイドカラムフレームボーダーフレーム

the thor ウィジェットフレームなし

 

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

共通エリア設定>サイドカラムエリア設定>各ウィジェットフレーム設定

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

 

【カスタマイズ3】サイドカラムウィジェットの見出しデザイン

 

THE THORは、ウィジェットの見出しデザインを角丸・シンプル・ボトムボーダー・はみ出すボーダー・シンプルワイド・内側ボーダーの6種類から選択できます。

 

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

 

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

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

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

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

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

 

サイドカラムのカスタマイズは完了になります。

 


 

おつかれさまでした。

 

以上、【THE THORサイドカラムのカスタマイズ】初心者向けに画像付きで解説でした。

 

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

 

お問い合わせはこちら

 

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

Chiharu