BlogFarming

ブログを育てる、ブログファーミン!

The・THOR

The・Thorのカスタマイズ!基本設定編【WordPress】

更新日:

WordPressのテーマ「The・Thor」は多機能なので設定項目も沢山あります。

でも、マニュアルがちょっと分かりづらいです。

 

そこで自分の備忘録も兼ねて、「The・Thor」のカスタマイズの設定箇所や方法を記しておこうと思います。

 

今回は、カスタマイザー(「外観」→「カスタマイズ」)の「基本設定」を解説します。

おじさん
基本設定だけでも、かなりボリュームがあります

 

注意

デザイン着せ替え機能 」 を使う方は、カスタマイズの前に着せ替えをしておきましょう。

着せ替えをするとカスタマイズは全てリセットされます。

ここではデザイン04を使用して説明していきます
うさぎ

 




 

サイトロゴ設定

 

サイトロゴ設定は、カスタマイザーの「基本設定」→「サイトロゴの設定」で行ないます。

 

サイトの上部に表示するロゴ設定を設定します。

下の画像では青い四角枠になっていますが、png形式の画像にすれば枠を消すことが出来ます。

 

メモpng形式とは画像の形式の一つで、背景を無しに出来るのが特徴です。

 

 

 

ヘッダー部分の色やロゴの位置は「ヘッダーエリア設定」で変更可能です。

 

ロゴ画像は大きくしても縦幅50pxまでになっているので、大きな画像をアップロードしても50pxに縮小されます。ほどほどの大きさに修正してアップロードします。



 

アイキャッチ画像の設定

 

アイキャッチ画像は、カスタマイザーの「基本設定」→「アイキャッチ画像の設定」で設定します。

 

アイキャッチ画像とは、記事の紹介となる画像です。

 

No Image画像の設定

 

アイキャッチ画像の設定は投稿記事の右側で出来ます。

 

画像を設定していないと「No Image」の文字だけの画像が自動で入ってしまいます。

 

そこで、画像を設定し忘れたときのために「No Image画像」を登録しておきます。

 

これでアイキャッチ画像の入っていない記事には、全て気球の画像が入るようになりました。

 

アイキャッチホバーエフェクトの設定

 

アイキャッチホバーエフェクトとは、アイキャッチ画像にマウスを置いたときに画像に動きを付けることを言います。

 

上の設定にすると、マウスを置いたときに画像が拡大しながらクルっと傾き、赤系の画像に変わります。

さらに中央に「CLICK!」の文字が表示されます。

 

動き方は7種類あるので、カスタマイザーで変化を見ながらお好きなものを選んでください。

 




 

検索機能設定

 

検索機能の設定は、カスタマイザーの「基本設定」→「検索機能設定」で行ないます。

 

検索機能利用時の検索対象設定」「複数タグ検索時の検索方法」は、とくにこだわりが無ければデフォルトのままで良いでしょう。

 

次の「検索項目の見出し設定」は、ウィジェット(外観→ウィジェット)にある「絞込検索」で使います。

 

ページ数が増えたときにカテゴリーを絞り込んで検索できます。

メモ

例えば、訪問者が「ワンピース」を調べるときに、漫画カテゴリーや洋服カテゴリーに絞り込んで検索できるようになります。

 

また、その下の「注目キーワード」は検索窓の下ヘッダーの下 に設置できます。

 

 

アクセスランキングの設定

 

アクセスランキングは、カスタマイザーの「基本設定」→「アクセスランキングの設定」で設定します。

 

The・THORでは、プラグイン無し でウィジェットから「人気記事」「カテゴリ人気記事」を設置することが出来ます。

そのときの「view」や「回」などの単位をここで設定します。

 

アクセスランキングは下のように表示されます。

少な!
うさぎ
おじさん
しかも、自分で見た数だけです

 

 

タグ管理設定

 

タグ管理の設定は、カスタマイザーの「基本設定」→「タグ管理設定」で行ないます。

 

この設定は、後述する「タグ管理オリジナルフォーマット」の設定とセットです。

カスタマイザーでは、ボタンと独自の項目を設定できます。

 

細かい内容の設定は、「タグ管理」の下の方にある「タグ管理オリジナルフォーマット」で行ないます。

おじさん
わたしはランキングは使わないので、内容は適当です

 




 

自動生成サイトマップ設定

 

ここで言うサイトマップは、ユーザーが見るためのものです。

カスタマイザーの「基本設定」→「自動生成サイトマップ設定」で設定します。

サーチコンソールなどに送るサイトマップとは別物のHTMLサイトマップです
うさぎ

 

ただ、「表示」としてもどこに表示されるのか、よく分かりませんでした。

サイトマップ自体は「外観」→「メニュー」で表示できるので、作っておくと便利です。

 

サイトマップの作り方は、固定ページでタイトルに「サイトマップ」と入力し、テンプレートを「サイトマップTPL」を選択して公開すれば出来上がりです。

 

「外観」→「メニュー」で設定(メニューの設定方法は割愛します)し、表示できます。

 

おじさん
記事一覧という感じですね

 

 

タイトルセパレータ設定

 

カスタマイザーの「基本設定」→「タイトルセパレータ設定」で設定します。

 

セパレータは特にこだわりが無ければ、「-」または「|」(カギカッコは不要)を入れておけばOKです。

 

パスワード保護ページ設定

 

カスタマイザーの「基本設定」→「パスワード保護ページ設定」で設定します。

 

作成した記事をパスワード保護したとき、ユーザー側に見える文章を編集できます。

 

記事を公開する時に「パスワード保護」にする

 

サイト上の見え方

 

 

お問い合わせページ設定

 

The・THORでは、「Contact Form 7」などのプラグイン無し でお問い合わせフォームを設置できます。

 

手順は、固定ページに「簡易お問い合わせページ」を作成し、問い合わせた方への返信メッセージを設定します。

 

「簡易お問い合わせページ」は、「固定ページ」でタイトルに「お問い合わせ」などの文言を入れ、テンプレートの「お問い合わせTPL」を選択して公開します。

 

 

これで「お問い合わせページ」が出来ました。

 

カスタマイザーの「基本設定」→「お問い合わせページ設定」では、「サンクス画面のメッセージを入力」で、お問い合わせを送信された後に表示されるメッセージを変更できます。

 

ユーザーがお問い合わせを送信すると、ユーザーのメールアドレス宛に自動で応答メッセージが送信されます。

 

自動返信メールの冒頭を入力」は、その文面を変更できます。

おじさん
実験してみたら、自分からのメールが迷惑メールに入れられてました

 

 

アクセス解析設定

 

Google Analytics」と「Google Search Console」のIDをカスタマイザーの「基本設定」→「アクセス解析設定」に入力します。

 

ビジュアルエディタCSS設定

 

カスタマイザーの「基本設定」→「ビジュアルエディタCSS設定」では、記事を書くときの表示を変更できます。

 

実際の表示と同じスタイルにしない」では見出しが分かりにくいですね。

 

実際の表示と同じスタイルにする」では、実際の表示に近づきます。

 

実際のサイト上では下のように見えます(見え方は、設定によって異なります)。

 

 

テキストエディタボタン設定

 

カスタマイザーの「基本設定」→「テキストエディタボタン設定」では、投稿ページのテキストエディタの上の部分のショートカットボタンの数を変更できます。

 

利用しない

 

利用する(一部)

 

利用する(全項目)

 

一部と全項目の差がありすぎ!
うさぎ

 

 

セキュリティ関連設定

 

カスタマイザーの「基本設定」→「セキュリティ関連設定」ではログイン方法を変更できます。

WordPressサイトで一番危険なのは、ユーザー名を初期設定の「admin」のままにしているサイトです
うさぎ

 

WordPressにログインするときは、「ユーザー名またはメールアドレス」とパスワードでログインしますが、「ユーザー名」を無効にして「メールアドレス」のみを有効にできます。

 

変更後

 

PR レンタルサーバーでブログはもっと速くなります

 

基本スタイル設定

 

カスタマイザーの「基本設定」→「基本スタイル設定」では、テーマカラーやフォントサイズを変更できます。

 

テーマカラーを指定

 

サイト全体のカラーを一括で変更できます。

 

例えば赤を選ぶと下のようになります。

 

投稿内テキストリンク色を指定

 

記事中のリンク色(他のページへ飛ぶ文字の色)を変更できます。

 

とくにこだわりが無ければ青系が無難ですね
うさぎ

 

全体の背景色を指定

 

ページ全体の背景の色を変更できます。例えば、黒にすると下のようになります。

 

全体の背景画像を登録

 

ページ全体の背景を画像にできます。

 

ただし、下のような画像にしてしまうと継ぎ目が出来てしまい、非常に見にくくなります。

 

 

Googleなどで「シームレス 背景 無料」と検索すれば、継ぎ目のない背景画像をゲットできます。

さらに見にくくなりましたね
うさぎ

 

上のように読みにくくなる場合は、 記事やサイドバー部分の背景を白く設定 できます。

 

全体のフォントサイズを選択

 

文字の大きさを変更できます。

 

おじさん
スマホで見るユーザーが多いので、個人的には「大」か「中」がオススメ

 

 

記事分析設定

 

記事の閲覧数は、カスタマイザーの「基本設定」→「記事分析設定」で表示項目を編集できます。

 

The・THORでは プラグインを使用しなくても、記事の閲覧数を表示する機能 が装備されています。

 

下のようにチェックを入れておくと、投稿一覧で記事データの要約を見れます。

 

内リンク(サイト内でのリンク)と発リンク(サイト外へのリンク)は動きが遅くなるので、チェックを外しておいて必要なときだけチェックします。

 

 

高度な設定

 

テーマ編集の<head>タグを直接いじると、サイト全体が動かなくなることがあります

 

そこでThe・THORでは、カスタマイザーの「基本設定」→「高度な設定」で</head>直上の自由入力エリア、</body>直上の自由入力エリアにCSSなどを書くことができます。

 

例えば、1400種類以上のアイコンを表示できる「Font Awesome 5 」を使いたいときは、下記のコードを「</head>直上の自由入力エリア」に書いておきます。

 

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">

 

v5.6.3の部分は、最新バージョンの数字に変えてください。

 

さらにアニメーションにしたいときは、次のコードも。
←このようなアイコンをカンタンに設置できるようになります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

 

 

ユーザーID設定

 

The・THORを購入後、「ユーザーIDご送付のご案内」のメールに記載されたユーザーIDは、カスタマイザーの「基本設定」→「ユーザーID設定」に入力します。

 

メールに「更新用ユーザーID: Fit-Theme-××××××××××××」が記載されています。これを枠内にコピペします。

 

この設定をしておくと、THORのアップデートがあったときに通知してくれます。

 

複数のサイトで使うときは、それぞれのサイトに同じIDを入れればOKです。

 

まとめ

 

基本設定はサイトのベースとなる部分の設定が多いです。

 

テーマを導入したら一番に設定しておきましょう!

 

PR レンタルサーバーでブログはもっと速くなります

 

 

-The・THOR

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.