元サラリーマンブロガーなつのプロフィール

THE THORのデモサイト例9パターン!注目キーワードの配置やコーポレートサイト用レイアウトにも!

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

THE THOR(ザ・トール)には着せ替えという機能があります。これは名前の通り、ワンクリックでブログ内の全てのデザインを一括してデザイン変更できるというとても便利な機能です。

公式から配布の着せ替えのデザインはWebデザイナーが作っているもので、ハイレベルでクール系のカッコいいデザインとなっています。

THE THORの着せ替えデザインを使ったデモサイトとアレンジをお見せします。

このページで得れる情報

  • THE THORの着せ替え機能デモ画面の基本形
  • THE THORデモサイトから作成した新たなレイアウト例
  • THE THORのデモサイトの詳しい内容
  • THE THORのデモサイトとアレンジ 「着せ替え01」
  • THE THORのデモサイトとアレンジ 「着せ替え02」
  • THE THORのデモサイトとアレンジ 「着せ替え03」
  • THE THORのデモサイトとアレンジ 「着せ替え04」
  • THE THORのデモサイトとアレンジ 「着せ替え05」
  • THE THORのデモサイトとアレンジ 「着せ替え06」
  • THE THORのデモサイトとアレンジ 「着せ替え07」
  • THE THORのデモサイトとアレンジ 「着せ替え08 09」
  • THE THORのデモサイトのアレンジ注意点


THE THORのデモサイト画面の基本形(着せ替え機能)

公式で着せ替え機能として用意されているのは以下の9パターンです。THE THOR(ザ・トール)は高機能で知られていますが、高機能というのは裏を返せば設定項目が多いということです。

もちろん、設定自体はそれほど難しいものではなく、どこに何があるのか突き止められれば後は簡単なのですが、初めて見ると数の多さに気後れしてしまうかもしれません。

ぃかし「着せ替え」の場合には、ファイルをダウンロードして自分のWordpressにインストールするだけで全体像がガラリと1度で変わりますのでぜひ利用してみてください。

 

出典:THE THOR(ザ・トール)

 

ご覧いただいてもわかりますが、クール系のデザインとなっています。好みはわかれるかもしれませんが、これを可愛い系統にも変更は可能です。

このブログではそういった部分もお伝えしています。

↓ Wordpressテーマ「THE THOR」の特典です。(稼ぐ系+オリジナルデザイン)

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

※今なら、8大購入特典をお付けしています!

 

THE THORデモサイトから作成した新たなレイアウト例

ご覧いただいたように、THE THORはカッコいいのですがクール系デザインが主で、ポップなものがないんですよね。

中にはSANGOのようなホッコリするようなデザインにしたい方もおられると思います。

そこで、いくつかのパターン違いのテンプレートを芸大出身の当ブログ管理人 なつが作ってみました。

基本パターンの6セットでは背景の色や見出しの色など基本的な色合いをあらかじめ設置し「ポップ系」「かわいい系」「オーガニック系」「シンプル系」「和風」「ビジネスに使える」などTHE THORの公式デザインを補完するように作ってあります。

 

なつオリジナルデザイン最新版

THE THORのアレンジは結構簡単にできるのですが、覚えると幅広くいろんなパターンのデザインができるようになります。

タイトル:綿毛

タイトル:ai



⇒ デザインの最新版はこちら!

なつ
初心者さんにも簡単にできるように着せ替えデザインを活用して作っていますので「超簡単!」

 

なつオリジナルデザイン基本セット

ガーリー

シンプル

オーガニック

カラフル

和風

シャイニングスター

 

↓ 「THE THOR」のデザインをパワーアップしたポップ系デザインの全貌は以下の記事にて!

 

THE THOR購入特典をGETしよう!
当サイトからTHE THORをご購入くださった方にポップ系デザインの作成マニュアルとたった30記事で稼ぐ方法など8大特典をプレゼントしています!

THE THORのデモサイトの詳しい内容一覧

この9つの着せ替え機能の画像は見た目にも違いがはっきりしています。TOPページの下部はレイアウトのみの違いなのですが、TOP画像がまず特徴的なのでどう違うのか見ていきましょう。

出典:THE THOR(ザ・トール)

 

THE THORの公式デモ9種類

THE THORの公式で作られているデモ9種類は以下のとおり。公式のデザインでもある着せ替えデモ「01」が基本の形となり、その他の要素を追加したり削除したりするとあとの6種類になります。

デモ「01」 デモ「02」 デモ「03」
  • メインビジュアル・・・「動画」
  • ビジュアル下の注目エリア「有」
  • カルーセルスライダー「有」
  • ピックアップ3記事「有」
  • 記事ランキング設定「有」
  • カテゴリ最新記事設定「有」
  • CTA「有」
  • メインビジュアル・・・「静止画」
  • ビジュアル下の注目エリア「無」
  • カルーセルスライダー「無」
  • ピックアップ3記事「無」
  • 記事ランキング設定「無」
  • カテゴリ最新記事設定「無」
  • ヘッダー検索窓「有」
  • 注目ワード「有」
  • メインビジュアル・・・「スライダー」
  • ビジュアル下の注目エリア「無」
  • カルーセルスライダー「無」
  • ピックアップ3記事「無」
  • 記事ランキング設定「無」
  • カテゴリ最新記事設定「無」
趣味ブログ・ビジネス・アフィリエイト・アドセンスなど全用途 趣味ブログ・店のブログ・ブライダル・育児など ネイル・サロン・化粧品・ブライダル・育児・グルメ
デモ「04」 デモ「05」 デモ「06」
  • メインビジュアル・・・「静止画」
  • ビジュアル下の注目エリア「無」
  • カルーセルスライダー「有」
  • ピックアップ3記事「無」
  • 記事ランキング設定「有」
  • カテゴリ最新記事設定「有」
  • CTA「有」
  • メインビジュアル・・・「動画」
  • ビジュアル下の注目エリア「有」
  • カルーセルスライダー「無」
  • ピックアップ3記事「無」
  • 記事ランキング設定「有」
  • カテゴリ最新記事設定「無」
  • ヘッダー検索窓「有」
  • 注目ワード「有」
  • メインビジュアル・・・「静止画」
  • ビジュアル上の誘導ボタン「有」
  • ビジュアル下の注目エリア「無」
  • カルーセルスライダー「有」
  • ピックアップ3記事「有」
  • 記事ランキング設定「無」
  • カテゴリ最新記事設定「無」
  • CTA「有」
ガジェット・アドセンス・ビジネス・アフィリエイト ビジネス・研究・ガジェット・車・不動産 ビジネス・ガジェット・芸能・アフィリエイト・ゲーム
デモ「07」 デモ「08」 デモ「09」
  • メインビジュアル・・・「動画」
  • ビジュアル下の注目エリア「無」
  • カルーセルスライダー「無」
  • ピックアップ3記事「無」
  • 記事ランキング設定「有」
  • カテゴリ最新記事設定「有」
  • ランキング
  • メインビジュアル・・・「静止画」
  • ランキング
ブライダル・ファッション・サロン・育児・グルメ ランキング用 アフィリエイト用

見ていただくとわかる通り、ヘッダー画像やその他のアイテムを組み合わせてパターンを作っているのがわかります。

ただ、高機能がゆえに1から設定するにはかなり時間と労力がかかります。慣れていなければ全部設定すると挫折するかもしれませんので、こういったパターンをまず引き込んでからアレンジすることをおすすめします。

 

↓ THE THORのカスタマイズはほぼこの記事でできあがります!

 

THE THORのデモサイトとアレンジ 「着せ替え01」

THE THOR(ザ・トール)のデモサイト「01」は、基本パターンのデザインです。公式サイトのTOPページにあるのがこのデザイン。

ヘッダー画像に動画が配置されていますので、以下の画像はキャプチャですが、着せ替え「01」を引き込むとヘッダーに女性がゆらゆらと動いているのがわかります。

このまま使っても良いですが、ご自身の動画を張り付けるか、静止画やスライダーに変更もできますので、動画がない場合には変更してください。

出典:THE THOR(ザ・トール)

 

THE THOR「01」をアレンジ  (デモサイト)

着せ替えの「01」を以下の項目の変更を加えてみました。

  • 注目キーワード追加
  • 背景を木目にする
  • 基本色をピンク色に
  • フッター部分にランキングとカテゴリー追加

 

↓ クリックで拡大

 

黒とピンクと濃いベージュは相性の良い色です。特に鮮やかなピンクとすることで遊び心や若さを表現できますし、黒とピンクの対象的な色で甘さの中にほんのちょっとだけクールさも残しています。

 

↓ めんどくさがりやさん必見!1クリックでカッコいいブログに!

着せ替え機能が便利なワードプレステーマ「THE・THOR」

※今なら、8大購入特典をお付けしています!

 

↓デモサイト「02」~「07」のアレンジは次のページ♪↓

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です