生きやすい人を増やすための働き方のブログ

【THE THOR】基本スタイル設定方法を解説【テーマカラー・リンク・背景色・フォントサイズ】

  • 2021年5月2日
  • 2021年6月11日
  • THE THOR

こんにちは、ミスターパインです。

国内最高峰の SEO 最適化 WP テーマ 【ザ・トール】の布教活動をしています。

今回のテーマ:テーマカラーやフォントサイズなどの基本設定
テーマを導入しただけだとデフォルトの設定になっており、あまりカッコ良くはありません。
これはどのテーマでもそうですが、基本スタイルをサイトのイメージに近づけて魅力的な見た目に整えましょう。
Mr.パイン
今回の箇所を変更するだけでも印象がグッと変わりますよ

THE THORの基本スタイルの設定や変更方法

THE THORの基本スタイル設定手順は以下の通りです。

  1. ダッシュボード内の「外観」→「カスタマイズ」
  2. カスタマイズ内の「基本設定【THE】」→「基本スタイル設定」
  3. 変更後に「公開」をクリックして変更を保存

テーマカラーを指定

テーマカラーの変更箇所

テーマカラーはこのように初期設定では濃いめの赤に設定されている箇所です。

この箇所を変更することで、一括でサイトの色味を変更することができます。

Mr.パイン
配色センス0なのでいつもカラーハントに頼りっぱなしです
当サイトのテーマカラーは「#ffcc29」を採用しています。

Discover the newest hand-picked color palettes of Color Hunt…

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

投稿内のテキストリンクの色

テーマカラーを一括で変更すると、投稿内のテキストリンクの色も変更されてしまいます。

これでも問題ないのですが

  • 文字色を変えただけの装飾と区別しにくい
  • リンク=水色のイメージが強いのでクリック率に影響しそう

という理由から、当ブログでは「#51C4D3」に設定しています。

全体の背景色を指定

デフォルトではややグレーっぽい色味で設定されている背景。

当ブログでは真っ白にしています。

基本的な色の指定

カラーピッカーを使って細かな配色を選ばなくても基本的な配色は、ここをクリックするだけで変更可能です。

全体の背景画像を選択

背景を色ではなく画像などにしたい場合は、ここで設定します。

当ブログでは設定していません。

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

スマホで表示される文字の大きさを小・中・大の3パターンから指定できます。

当ブログでは中を採用。

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

パソコンで表示される文字の大きさを小・中・大の3パターンから指定できます。

当ブログでは中を採用。

全体のフォントファミリーを選択

サイト全体に適用されるフォントの種類を選ぶことができます。

  • 游ゴシック
  • ヒラギノ角ゴシック
  • メイリオ
  • Noto Sans JP

から選べます。

当ブログではデフォルトのまま游ゴシックを採用。

THE THORの基本スタイル設定と色やフォントサイズなどの変更方法まとめ

今回はカスタマイズ機能の「基本設定【THE】」の項目から基本スタイルとなるテーマカラー、テキストリンクカラー、背景色、背景画像の設定、フォントのサイズと種類の設定を行いました。

THE THORは独自に設定できる項目が多い分、慣れるまでは変更箇所を見つけるのも大変ですが、ゆっくり丁寧に自分だけのサイトを作り込んでいきましょう。

THE THORのカスタマイズに関する記事を書いていますので、ぜひご覧ください。

ザ・トールの基本スタイル変更方法

THE THOR(ザ・トールの)基本設定についてお探しですか?この記事では基本スタイルとなるテーマカラー、テキストリンクの色、背景色、背景画像、フォントサイズ、フォントの種類の設定などサイトを運営する上での超基礎的な見た目を整えることができます。テーマを変更してすぐの人は真っ先に変更してみましょう。

フッターのコピーライト変更

フッターのコピーライトの表記を変更したいですか?この記事ではTHE THORのカスタマイズで行える変更の一つです。デフォルトでは「©︎Copyright2020 あなたのブログ名 あなたのブログ名 by FIT-Web Create. Powered by WordPress.」となっているフッターの表記を簡単に書き換えることができます。

トールのヘッダー下お知らせバー表示

こんにちは、ミスターパインです。 今回からWordPressテーマ「THE THOR」のカスタマイズ方法についても紹介していこうと思います。このブログは引き続きJINを使っていきますが、運営している別サイトを例に紹介していきますので、そちらのブログもぜひよろしくお願いします。 この記事では WordPressテーマTHE THORを使って ヘッダー下にお知らせ用のバーを入れる方法 について解説しま […]

アイキャッチ画像を非表示にする

こんにちは、ミスターパインです。 アイキャッチ画像は読者の目を引くために設置しているのに、検索に「ブログ アイキャッチ うざい」という検索キーワードがあって切なくなりました。 この記事では WordPressテーマ「THE THOR」において 記事の先頭部分のタイトル付近に アイキャッチ画像を表示させない方法 について解説します ブログはシンプルが一番!ということで、表示させなくていいものはドンド […]

ザ・トールのインストール

こんにちは、ミスターパインです。 他で管理しているブログのWordPressテーマをTHE THOR(ザ・トール)に変更しました。 この記事では THE THORのインストール手順 THE THORのインストール後のこと について解説しています [chat face=”mr-pine-maru.png” name=”ミスターパイン” align=&# […]