THE THOR【ザ・トール】で簡単にブログ♪使い方&記事の書き方を初心者に説明


THORの設定がさっぱりわからない。
記事の書き方がわからない。

この記事では、同じ悩みを去年経験したそらが答えていきます( ̄▽ ̄;)

すごい時間をかけて、ブログをカスタマイズしていきました(笑)

目次

自分のブログを作成する12個の設定手順

  1. 準備編♪レンタルサーバー&ドメイン取得
  2. 準備編♪THE THOR(ザ・トール)購入&インストール
  3. 着せ替えを選ぶ
  4. ブログで使用する画像準備
  5. ヘッダーエリア設定
  6. ヘッダーボトムエリア設定
  7. メインビジュアルエリア設定
  8. メインビジュアル下設定
  9. カルーセルスライダー設定
  10. メインカラムエリア設定
  11. サイドカラムエリア設定
  12. フッタートップエリア設定
  13. フッターエリア設定

設定の仕方なんてマニュアルを見ればわかるでしょ(^^♪

と思ったら、THE THORのマニュアルを見てみると、設定のみが書かれていて設定の説明がない。

初心者にはTHE THORのマニュアルは敷居が高かったです(笑)

この記事は初心者向けなので、レンタルサーバー&ドメイン取得、そしてエディタの使い方から紹介していきます。

そんなことは知っているよという項目は飛ばしてください( ̄▽ ̄;)

☆注意☆ 


初心者を対象にしているので【THE THOR(ザ・トール)】の高度なPHP等のカスタマイズ作業や説明はありません。

記事後半では記事を書けるようになり、データ取得の連携設定も終わった方向けにカスタマイズを紹介しています(^^♪

準備編♪サーバー&ドメイン&wordpressインストール

初心者向けにXサーバー&ドメインの取得方法とワードプレスの簡単インストールは下の記事で紹介しています♪

>>>【Xserver】契約方法からwordpressインストールまで♪ドメインを無料でGET?
☆注意☆ 
ワードプレスのインストール時の「ユーザー名」は「ブログの管理者ユーザーID」になります。

準備編♪THE THOR(ザ・トール)購入&インストール

【THE THOR(ザ・トール)】購入&インストール方法については下の記事で紹介しています♪

>>>WP有料テーマ【THE THOR】(ザ・トール)購入手順の説明
☆注意☆ 

THE THORを購入後すぐにブログ作成は出来ません( ̄▽ ̄;)

THE THORのアカウント登録後に「更新用ユーザーID」と「会員フォーラムのアカウント」情報がメールで送られてくるのに1日~2日かかります。
(私が登録したときは、朝の6時半頃に登録して夜の8時にこのメールが届きました。)

THE THOR(ザ・トール)着せ替えを選ぶ

THE THOR(ザ・トール)のデモサイトの着せ替えタイプの特徴と、着せ替えたらどんな感じになるのかを下の記事で紹介しています♪

>>>THE THOR(ザ・トール)のデモサイトの着せ替えを詳しく紹介♪
☆注意☆ 
このそれぞれのデモサイトは設定が違うだけす。

どのタイプを選択しても設定をいじり倒せば違うタイプに変身します(笑)

THE THOR(ザ・トール)をインストールして有効化していれば、デモサイト「01」の状態になっています。

私はかわいい感じのブログにしたかったので、見た目のピンクにひかれての09に着せ替えをしました。

着せ替えの手順については下の記事で紹介しています♪

>>>【THE THOR】(ザ・トール)デザインの着せ替えのやり方

THE THOR(ザ・トール)ブログで使う画像を準備

ロゴ画像、ビジュアル画像は設定で使用しないを選択できます。

  • ロゴ画像
  • メインビジュアル画像
  • プロフィール画像

ロゴ画像、ビジュアル画像は使いたい方だけ準備してください。

☆注意☆  ブログに使用する画像の保存形式の写真は、「 ○○.jpg 」で保存してください。
イラストは「 〇〇.png 」で保存してください。
これを逆にすると、ファイルサイズが大きくなる場合が多いです。( ̄▽ ̄;)
画像ファイルサイズが大きいと、大きな画像が表示されるという事ではありません。
記事や画像が増えてくると、サイト表示速度が遅くなって焦ります(;^_^A
画像のファイルサイズは小さい方がいいと覚えておいてください。

THE THOR(ザ・トール)ロゴ画像&メインビジュアル画像を準備

ブログに使うためのフリー素材をPCのお気に入りに登録しておいて、いつでもダウンロードできる状態にしておきましょう。

会員登録なしで使えるサイトを紹介していますのでどうぞ♪

THE THOR(ザ・トール)ロゴ画像&メインビジュアル画像を作成

画像を作成するソフトを持っていない方にお勧めな方法は2つ。

    • 「Windowsアクセサリのペイント」を使って画像を作成する方法
    • 「CANVA」という無料の画像作成サイトで作成する方法です。

「Windowsアクセサリのペイント」を使って画像を作成

「Windowsアクセサリのペイント」を使ったロゴ画像編集のやり方は下の記事で紹介しています。

こちらを参考にしてロゴ画像を加工してみてください。

>>>【初心者専用】ブログで使いたいオリジナルのロゴ画像を作る説明

「CANVA」という無料の画像作成サイトを使て画像を作成

ペインで作成するよりも簡単に画像加工できます。

使い方の例としているのはロゴ画像ではなく、アイキャッチ画像になります。

こちらを参考にしてロゴ画像を加工してみてください。

>>CANVAを使っての簡単で本格的なアイキャッチ画像の作り方紹介

THE THOR(ザ・トール)プロフィール画像を作成

プロフィール画像を描けない方にお勧めな方法は2つ。

  • フリー画像をダウンロードしてプロフィール画像とする
  • スマホアプリを使ってプロフィール画像を作成する

フリー画像をダウンロードしてプロフィール画像とする

登録したサイトで、画像を選んでプロフィール画像としてダウンロードしてきてください。

☆注意☆ 

人間のフリー写真をプロフィール画像としての使用は禁止されています。

スマホアプリを使ってプロフィール画像を作成する

ちょっと手間がかかりますがスマホの力を少しかりてもOK♪

自画像のアプリを使って分身アバターを作り、スクリーンショットをして保存しましょう♪

その後にGooglフォトなどの力を借りてPCにダウンロードしましょう♪

PCに保存できたプロフィール画像を加工したい場合は、上で紹介した「ペイント」か「CANVA」を使って加工することをオススメします。

THE THOR(ザ・トール)設定できる9個のエリア

設定は着せ替えごとにされていますので、このエリアすべての設定を変更しなくても大丈夫♪

変更したいなと思うエリアの使い方を見てください(^^♪

    しかし、メニューパネルの中にある「THE THOR」のリンクボタンやロゴ画像、メインビジュアル画像はすぐに自分のサイトの物に変更しちゃいましょう(^^♪

    THE THOR(ザ・トール)使い方1♪ヘッダー

    「外観」→「カスタマイズ」→「共通エリア」→「ヘッダーエリア」の順にクリックしてください。

    ここではヘッダーの背景色やヘッダーを固定表示するか「サーチパネル」「メニューパネル」を表示させるのか等を選択します。

    THE THOR(ザ・トール)メニューパネルの設定

    このリンクボタンを消すかカスタマイズするかしましょう♪

    (メニューパネルの中ではなく、メニューの横にある場合もあります)

    サブメニュー設定が、この注目ボタンの設定になります。

    「メニューパネル内で表示(スマホと同じ)」を選択してあるとメニューパネル内にリンクボタンが表示されます。

    ボタンを非表示にしたい場合は、赤で囲った場所を空白にしてください。

    ボタンの表示名を変えて、リンク先を自分の好きなURLに変更して使用してもOKです♪

    THE THOR(ザ・トール)ロゴ画像の設定

    「外観」→「カスタマイズ」→「基本設定」→「ロゴ画像」の順にクリックしていってください。

    私のヘッダー(一番上)のロゴ画像のサイズは 60×800 で作成しています。

    ロゴ画像とメインビジュアル画像の設置についての紹介は下の記事で紹介しています。

    >>【ザ・トール】自分のサイトロゴ画像にカスタマイズだ!
    ☆注意☆ 
    画像に表示してあるメニューについては記事後半で紹介しています。

    THE THOR(ザ・トール)使い方2♪ヘッダーボトム

    「外観」→「カスタマイズ」→「共通エリア」→「ヘッダーボトムエリア設定[検索窓・お知らせ]」

    の順にクリックしてください。

    上の画像の「ヘッダー検索窓」と「ヘッダーお知らせ」を表示させるか選択します。

    THE THOR(ザ・トール)使い方3♪メインビジュアル

    「外観」→「TOPページ設定」→「メインビジュアル」の順にクリックしてください。

    ここでメインビジュアルの設定をします。

    メインビジュアル画像を登録したり、画像の上にタイトルと文章を追加したり、画像上にボタンを設置したりする設定が出来ます。

    メインビジュアルエリアの詳しい紹介は上で紹介した【ザ・トール】自分のサイトロゴ画像にカスタマイズだ!の中でしています。

    THE THOR(ザ・トール)使い方4♪メインビジュアル下

    「外観」→「TOPページ設定」→「メインビジュアル下お知らせ設定」の順にクリックしてください。

    メインビジュアル下のお知らせをどう表示させるかの設定が出来ます。

    上の画像ではキャッチコピー、ボタンのテキストとリンク、背景色を設定してあります。

      ☆注意☆ 
      メインビジュアルの表示設定が「非表示」の場合はメインビジュアル下お知らせ設定を利用することができません。

      THE THOR(ザ・トール)使い方5♪カルーセルスライダ

      「外観」→「TOPページ設定」→「カルーセルスライダー」の順にクリックしてください。

      使用したい場合は、この「カルーセルスライダー設定」で表示に設定してください。

      THE THOR(ザ・トール)使い方6♪サイドカラム

      サイドエリアの項目を自分の表示させたいものだけに変更する方法は下の記事で紹介しています♪

      >>>【ザ・トール】サイドバーエリアの表示項目をカスタマイズ♪

      THE THOR(ザ・トール)使い方7♪メインカラム

      「外観」→「カスタマイズ」→「共通エリア」→「メインカラムエリア」の順にクリックしてください。

      メインカラムの表示法を設定します。

      上の画像はメインカラムのフレーム無しを選択しています。

      THE THOR(ザ・トール)使い方8♪フッタートップ

      「外観」→「カスタマイズ」→「共通エリア」→「フッタートップエリア」の順にクリックしてください。

      「フッタートップエリア」に表示させたい項目がある時に設定します。

      THE THOR(ザ・トール)使い方9♪フッター

      「外観」→「カスタマイズ」→「共通エリア」→「フッターエリア」の順にクリックしてください。

      フッターにデフォルトで表示している

      © Copyright 年 ブログ名」

      「ブログ名  by FIT-Web Create. Powered by WordPress.」

      この記載を消したい時は、「コピーライトの設定」で設定していきます。

      THE THOR(ザ・トール)使い方10♪記事を書く準備

      後から追加することで、できることが増えるというソフトウェアが「プラグイン」です。

      THE THOR(ザ・トール)に最初に入れるプラグイン

      • Classic Editor
      • Customizer Export/Import
      • WP User Avatar
      ☆注意☆ 

      「初めにたくさん入れておこう」は止めておきましょう。

      プラグインが多いと、表示速度が遅くなってしまう事もあるからです。

      そして不具合が発生した時、どのプラグインが原因なのかわかりずらいのでおすすめしません。

       

      自分のブログに機能を付け足したいと思った時にプラグインを付け足しましょう♪

      Classic Editor

      Classic Editor は初心者でも直感的に使えるwordpressの旧デフォルトエディタです。

      初心者が使いやすいエディタということで、ここではこのプラグインをお勧めします。

      現在のデフォルトエディタである「ブロックエディタ」に興味がある方は下のリンクで紹介しています。

      >>>WordPress【THE THOR】ブロックエディタどうやって使うの?簡単に説明♪

      Customizer Export/Import

      このプラグインが無いと、着せ替えが出来ません( ̄▽ ̄;)

      インポート(IN)とエクスポート(OUT)をしてくれるプラグインです。

      WP User Avatar

      自分で用意したプロフィールの画像を表示させます。

      THE THOR(ザ・トール)プラグインの新規追加方法

      ① 画面左側の下の方にコンセントの絵の「プラグイン」という文字をクリックしてください。

      ② 「新規追加」をクリックしてください。

      ③プラグイン検索額面が表示されますので、プラグイン名をコピペしてください。

      ④プラグインが表示されたら、「インストール」をクリックしてください。
       
      「今すぐインストール」から「インストール中」となり「有効化」とボタンに表示される言葉が変わっていきます。
       
      ⑤ 「有効化」と表示されましたらボタンをクリックしてください。
        
      必要だと思いインストールしたプラグインでも、やっぱりいらないと思った時、後から有効化の解除も削除もできます。
       
      そら
      試しに入れてみようもOKです。

      THE THOR(ザ・トール)プラグインの使い方

      THE THOR(ザ・トール)さんってば、意外と使えないプラグインがあるんですよね。

      今度は使えないプラグインを紹介しようかなと思います。

      • プラグイン > インストール済みプラグイン > プラグイン名を探して名前の下にある 「 停止 」をクリックすると有効化の解除ができます。
      • プラグイン > インストール済みプラグイン > プラグイン名を探して名前の下にある 「 削除 」をクリックするとプラグインの削除が行われます

      これで準備はほぼ終わりました。

      目次へ戻る

      THE THOR(ザ・トール)使い方11♪プロフィール画像

      メディアの使い方を説明

      「メディア」はブログでつかう画像の保存場所になります。

      画面左側にある写真と音符のマーク「メディア」→「新規登録」とクリックしてください。

      「メディアのアップロード」の画面にかわります。

      真ん中にある点線の中の「ファイルを選択」ボタンをクリックし、自分のPCに保存した分身アバターのファイルを選択してください。

      この「メディア」というのが自分のブログで使いたいイラストや写真をアップロードする場所です。

      通常記事を書いている途中に画像をアップロードし使いたい時は、エディタからも画像を追加出来ます。

      エディタの「メディアを追加」をクリックしてください。

      thorエディタからメディアを追加します

      「メディアを追加」画面が表示されます。

      エクスプローラーを開き、画像ファイルをこの画面にドラックしてください。

      ドラック出来ていれば画面が青く反転します。

      THE THOR(ザ・トール)使い方12♪プロフィール

      「あなたのプロフィール」の使い方の説明

      「あなたのプロフィール」は「THE THOR(ザ・トール)」での”プロフィールデータ”を入力する場所になります。

      次に画面左側の下部にある「ユーザー」→「あなたのプロフィール」とクリックしてください。

      個人設定という画面になります。

      管理画面の配色でブルーを選択すると私が使用している画面の色合いになります。

      ここでのポイントは項目で記入できるところは、すべて記入することです。

      「名」「姓」 「ニックネーム(必須)」 の3カ所の記入をしてください。

      その下の「ブログの表示名」のプルダウンをクリックすると

      先ほど入力した名前がでてきますので、どれをブログでの名前にするか選択してください。

      「連絡先情報」も記入できるところはすべて記入してください。

      サイトのURLは記入してなければ「サイト」の箇所に記入してください。

      さあ「あなたについて」までやってきました。

      一番下までスクロールしてください。

      「画像」という項目の横に「画像の選択」ボタンがありますので、クリックしてください。

      先ほど登録いていた「メディア」のライブラリが開きますので、画像を選択してください。

      選択した後に画面右下にある「選択」ボタンをクリックしてください。

      選んだ画像がプロフィール写真として表示されています。

      最後に一番下の「プロフィールを更新」ボタンを押してこのページは終わります。

      プロフィールを表示

      記入したプロフィールを記事下に表示させることも出来ます。

      >>>THE THOR(ザ・トール)この記事を書いた人を表示させよう♪

      THE THOR(ザ・トール)使い方13♪記事を書き始める

      WordPressの「固定ページ」と「投稿」の違い

      WordPressには 記事をかく場所が「固定ページ」と「投稿」の2つ用意されています。

      それぞれ特徴があります。

      「固定ページ」は記事1つ1つが独立したコンテンツとして階層構造を作る事が出来ます。

      また「投稿」で書いた記事は「カテゴリー」や「タグ」という情報を追加することが出来ます。

      詳しくは↓の記事で紹介しています。

      >>>WordPress【THE THOR】固定ページと投稿の違い

      「 クラシックエディタ 」の使い方を紹介

      「固定ページ」で記事を書きだす前に【THE THOR】での「クラシックエディタ」の使い方の説明をしておきます。

      記事内では画面左側上部にある「ダッシュボード」の下の押しピンの絵柄の「投稿」を例に紹介しています。

      >>>【初心者】THE THORワードプレス「クラシックエディタ」記事の書きかた♪

      クラシックエディタの右側サイドにある追加情報「公開」についての紹介は↓の記事で紹介しています。

      >>>wordpressクラシックエディタ「ステータス」とは♪公開の紹介

      AdSense申請に必ず必要になる4つの固定ページ

      AdSense申請に必ず必要になるページの作り方を↓の記事で紹介しています。

      【THE THOR】(ザ・トール)初心者でもわかる「プロフィール」のページを作る説明
      【THE THOR】(ザ・トール)初心者でもわかる「プライバシーポロシー」のページを作る説明
      【THE THOR】(ザ・トール)初心者でもわかる「お問い合わせ」のページを作る説明
      【ザ・トール】訪問者向けにサイトマップを作成しよう♪

      THE THOR(ザ・トール)使い方14♪メニューバー設定

      「プロフィール」「プライバシーポロシー」「お問い合わせ」「サイトマップ」

      この4つの固定ページを使ってのメニューの設置方法は下の記事で紹介しています。

      >>>【THE THOR】(ザ・トール)初心者でもわかるメニューバーを作成する説明

      THE THOR(ザ・トール)使い方15♪検索エンジン用サイトマップ

      訪問者用に固定ページにサイトマップを作成しましたが、次は検索エンジン用にサイトマップを作成します。

      検索エンジンに記事が表示されるためにサイトマップを設定する手順は下の記事で紹介しています。

      >>>プラグイン【WordPress】Google Search Consoleのサイトマップを作成♪

      THE THOR(ザ・トール)使い方16♪収益化を考えて

      有料ブログを書く最終目的は収益化ではないでしょうか( ̄▽ ̄;)

      目指せ収益化♪AdSense申請しよう

      ブログを作成して書いていくうちに、広告収入を得たいなぁなんていつか思うかもしれません。

      私は初めから思っていました(;^ω^)

      4つの固定ページと3記事を書いたらAdSenseを申請しましょう。

      THE THOR(ザ・トール)AdSenseで合格した記事

      私は、手順の記事3記事で申請して2サイトとも合格しました。

      私の経験からのおすすめは、何かの手順を説明する記事です。

      記事内容は合格してから変更していけばOK(^^♪

      THE THOR(ザ・トール)AdSense合格できた感想

      初めてするWordpress。

      (HTMLが分かったり、perlもcssも多少わかるので、全くの初心者じゃないじゃん! と言われるかもしれませが(;^_^A )

      TOPページを含む4個の固定ページと3つの投稿ページでAdSenseに申請しました。

      申請して半日後?に「AdSenseにようこそ」というメールが届きました。

      副サイトを作成したので、こちらも3記事で申請しました。

      >>>くまさんのノート

      前回より時間がかかりましたが、2日後くらいには「AdSenseの準備がととのいました」のメールが届きました。

      (申請をしてからは、毎日1記事を書いていました。)

      THE THOR(ザ・トール)使い方17♪データ取得と連携

      アナリティクスの登録方法

      サイトを作成し、アドセンスに合格したら、今度は訪問者の事が気になりますよね?

      今日は何人の訪問者が来てくれたのかな?

      どのページを見てくれているのかな?など(^^♪

      >>>THE THOR【ザ・トール】Googleアナリティクスの登録と設定方法を紹介

      サーチコンソールの登録方法

      >>>Googlサーチコンソールの登録と【THE THOR(ザ・トール】の設定紹介(^^♪

      「Search console」の使い方は別記事にしますので少々お待ちください( ̄▽ ̄;)

      テーマTHE THOR購入~ブログの記事の書き方までを初心者に説明 まとめ

      これで書きだすための一通りの説明が終わりました。

      1記事は書けましたが、まだ色々見やすいようにカスタマイズしたいですよね?

      一緒にカスタマイズしていけたらなっと思います。

       THE THOR【ザ・トール】次の作業のおすすめ紹介  

      サイトのトップページを固定のページ表示にカスタマイズ

      サイトのトップページは初期設定のままだと、最新記事の一覧表示されています。

      トップページというページを作成してみませんか?

      >>>【WordPress】トップページを固定!設定を紹介

      THE THOR【ザ・トール】の目次機能を使おう

      初めの設定が終わった次に設定をお勧めします(^^♪

      >>>THE THOR【ザ・トール】自分好みの目次を作ろう(^^♪

      THE THORには目次を自動で作成してくれる機能がついています。

      THE THOR【ザ・トール】で追従サイドバーにも目次を表示させる

      これは必ずおすすめしますというものではないですね(;^_^A

      ここに記入しようか迷ったのですが、目次つながりで紹介することにしました♪

      >>>THE THOR【ザ・トール】プラグインで追従サイドバーに目次を表示♪

      サイドバーや追従サイドバーに目次を表示させる方法を紹介しています。

      THE THOR【ザ・トール】でページ内リンクを使うための設定

      クリックすると違う場所にカーソルを飛ばしてくれるのが「リンク」。で受け止めるのが「アンカー」。

      WPの有料テーマ【THE THOR】(ザ・トール)で「アンカー」を使用する時、デフォルトの状態のままのクラシックエディタだと使用できない場合があります。

      >>>WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかるページ内リンクの設定

      ページ内リンクを使えるようにするためのプラグインの紹介をしています。

      >>>【THE THOR】(ザ・トール)目次に戻るリンクボタンを作る

      「目次に戻る」というリンクのボタンを設置する方法の紹介です(^^♪

      THE THOR【ザ・トール】の行間とフォントサイズを変更する

      【THE THOR】(ザ・トール)では、行間を細かく設定できないので、CSSを使って文章を読みやすくします。

      >>>THE THOR(ザ・トール)行間とフォントサイズのカスタマイズで見やすく

      この記事では行間をあけるカスタマイズ方法を紹介しています。

      安心してください。

      もちろんコピペです(笑)

      THE THOR【ザ・トール】のカテゴリ一覧ページの表示を変更する

      サイドエリア等に設置してあるカテゴリ項目をクリックしたときに表示されるのがカテゴリ一覧ページです

      >>>【ザ・トール】カテゴリーページをカスタマイズ♪

      この記事では「カテゴリー」の項目の一覧表示の表示方法を変更するなどのカスタマイズ方法を紹介しています。

      >>>【ザ・トール】カテゴリー項目の表示順を自分で決める♪

      カテゴリーの項目を自分の好きな順番に表示させる方法を紹介しています。

      THE THOR【ザ・トール】アイキャッチの設定を紹介

      【THE THOR】(ザ・トール)では、サイト全体の「アイキャッチ」を設定できます。

      >>>WordPress【THE THOR】ブログでサイトのアイキャッチ画像を設定♪

      記事ごとに「アイキャッチ」を設定しておかなくてもOKなんです♪

      記事を先に書いて、「アイキャッチ」を後から作成して~というのが出来るようになります♪

      わたしはとても助かっています(笑)

      WordPress【THE THOR】ブログの迷惑コメントを受け取らないように設定♪

      売り込みのコメントなどの、迷惑コメントの拒否設定を紹介しています。

      >>>WordPressザ・トール「迷惑コメント」スパム対策♪設定紹介

      WordPress【THE THOR】「AMP」って何?

      モバイル表示の速度を上げたい時に設定します♪

      >>>【ザ・トール】AMP機能の説明♪モバイル表示速度改善

      最新情報をチェックしよう!