THE THOR見出し達と背景の設定を紹介

初心者向けにTHE THOR見出し達の見た目の設定場所紹介
  • THE THORの見出してどんな種類があるの?
  • THE THORの見出しの設定ってどこでするの?
  • THE THORのサイドの見出しの設定ってどこでするの?
  • THE THORの背景はどこで設定するの?

THE THORの設定項目が沢山あって、細かな設定はどこでするのかを私も忘れてしまします(;’∀’)

記事中の見出し、ウィジェットの見出しの設定は別になります。

この記事は初心者向けに見出しの設定、ヘッダー背景色の設定、フッターの背景色設定とコピペで簡単カスタマイズも紹介しています(^^♪

THE THORの見出しの設定場所

「外観」→「カスタマイズ」→「パーツスタイル設定」→「見出し設定」の順にクリックしてください。


< PR >

THE THORの見出しのスタイルの種類

THE THORの見出しは、色をA/B/Cの3色を指定して、スタイルを選択する方法です。
基本のスタイルはA文字の色だけの指定ですので、ここでは紹介を省かせていただきます。

私は基本のスタイルを選択して、cssでカスタマイズをしています。

THE THORの見出し下線10スタイル

THE THORの見出し下線スタイルは10パターンあります

「A」の文字色と「B」や「C」で下の線の色を指定します。
下線-2本の見出し画像です。

THE THORの見出し左線下線3スタイル

THE THORの見出し左線下線スタイルは3パターンあります

「A」の文字色と「B」が左側の縦線「C」で左横の縦線と下の線の色を指定します。
左下線-点線の見出し画像です。


< PR >

THE THORの見出し背景14スタイル

THE THORの見出し背景スタイルは14パターンあります

「A」の文字色と「B」は背景や線「C」は下線、左線、影などを指定します。
背景-ステッチの見出し画像です。

THE THORの見出しグラデスタイル10スタイル

THE THORの見出しグラデスタイルは10パターンあります

「A」の文字色と「B」は背景や線「C」は下線、左線、影などを指定します。
この画像の見出しスタイルは上の色、下の色、上線の色を決めています。
グラデー上線角丸(白文字)の見出し画像です。

THE THORの見出しラインマーク5スタイル

THE THORの見出しラインマークスタイルは5パターンあります。

ラインマーク-グラデ上線(白文字)の見出し画像です。

THE THORの見出し丸マーク5スタイル

THE THORの見出し丸マークスタイルは5パターンあります。

丸マークー背景線角丸の見出し画像です。

THE THORの見出し先頭大4スタイル

THE THORの見出し先頭大スタイルは4パターンあります。

先頭大-先頭下線の見出し画像です。

THE THORサイドエリアの見出しのデザインと色の変更場所

THE THORサイドエリアの見出しのデザインと色の変更場所を紹介

「外観」→「カスタマイズ」→「共通エリア設定」→「サイドカラムエリア設定」の順にクリックしてください。
「 ウィジェット見出しデザイン設定 」で見出しのデザインと色を設定できます。

上の画像の「アーカイブ」や「カテゴリー」などの部分の事です。

THE THORウィジェットの項目行の色の変更場所

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

「■テーマカラーを指定」で色を指定します。

ここで指定した色は、上の画像の「てすと」などのウィジェットの項目行だけでなく記事下の「コメントを書く」などのボタン色にもなります。

THE THORフッターエリアの見出しのデザインと色の変更場所

「外観」→「カスタマイズ」→「共通エリア設定」→「フッターエリア設定」の順にクリックしてください。
「 ウィジェット見出しデザイン設定 」で見出しのデザインと色を設定できます。

THE THORフッターエリアの色のカスタマイズ

ブログ名が表示されるトップエリア、記事が表示されるメインエリアは設定で変更することが出来ますが、ブログの下部にあるフッターエリアの背景色は、設定の変更できる項目にありません。


THE THORの設定はコピーライトの設定で表示させる文字(そらのまなびぶろぐ by FIT-Web Create. Powered by WordPress.)、そしてコピーライト文字を表示にするか非表示にするかの選択しかできません(;^_^A。


このエリアの背景色や文字色を変えるにはCSSを追加します♪

THE THOR♪CSSコードの張り付け場所

「外観」→「カスタマイズ」→「追加css」の順にクリックしていきます。

THE THORフッター♪背景色を変えるためのコード

このコードをコピペすると、画像の様に色が変更されます。

THE THORフッター♪背景色を変えるためのコードの紹介

この1文しかないのですが(笑)
これは背景色を指定しています。

background:#E6E6FA;

background:#FAEBD7;

background:#FFD0B4;

background:#C6E4D5;

私の好きな淡い色合いを並べてみました(^^♪
この#から始まるコードが色のコードになります。
色を変えたい場合はこのコードを変えます。
他の色にしたい場合は下の記事に色のコードを紹介していますので参考にしてみてください。

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

THE THORフッター♪グレー文字の色を変えるためのコード

グレーの文字の色を変更しています。

THE THORフッター♪グレー文字の色を変えるためのコードの紹介

colorが文字色の指定になります。
#から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
他の色にしたい場合は下の記事に色のコードを紹介していますので参考にしてみてください。

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

THE THORフッター♪白文字の色を変えるためのコード

THE THORフッター♪グレー文字の色を変えるためのコードの紹介

グレーの文字同様の指定になります。
colorが文字色の指定になりますので、#から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
他の色にしたい場合は下の記事に色のコードを紹介していますので参考にしてみてください。

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

THE THORヘッダーエリアの背景色の変え方

「外観」→「カスタマイズ」→「共通エリア」→「ヘッダーアリア」の順にクリックしていきます。
「ヘッダーエリア設定」が表示されますので、その中の「ヘッダーの背景色を指定」で背景色を選択します。

THE THORメニューバーの色の変え方

メニューバーの背景色は設定でしていできません。
CSSを使用して変更します。
興味のある方は下の記事の「【THE THOR】メニューバーに背景色を付ける」を参考にしてください(^^♪

>>>コピペOK【ザ・トール】メニューバーの文字色をカスタマイズ♪ 

THE THORメインエリアの背景色の変え方

「外観」→「カスタマイズ」→「基本設定」→「基本スタイル」の順にクリックしていきます。
「基本スタイル設定」が表示されますので、その中の「全体の背景色を指定」で背景色を選択します。
背景画像を使用したい場合は「全体の背景画像を登録」で背景に使用したい画像を選択します。

THE THOR見出しと背景の設定紹介 まとめ

新しくサイトを作ろうかと思うと、どこでどう設定すると、どう変わるんだっけ?とよく戸惑ってしまうそらです(笑)
ここを設定ると、ここが変わるのね、とすぐに思い出せるように記事にしておくことにしました(;^ω^)

ランキングサイトに参加していますのでクリックしていただけると嬉しいです♪

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

ランキングサイトに登録しているのでクリックしていただけると嬉しいです(^^♪

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

THE THORのカスタマイズの最新記事8件