- THE THORの見出してどんな種類があるの?
- THE THORの見出しの設定ってどこでするの?
- THE THORのサイドの見出しの設定ってどこでするの?
- THE THORの背景はどこで設定するの?
THE THORの設定項目が沢山あって、細かな設定はどこでするのかを私も忘れてしまします(;’∀’)
記事中の見出し、ウィジェットの見出しの設定は別になります。
この記事は初心者向けに見出しの設定、ヘッダー背景色の設定、フッターの背景色設定とコピペで簡単カスタマイズも紹介しています(^^♪
- 1 THE THORの見出しの設定場所
- 2 THE THORの見出しのスタイルの種類
- 3 THE THORの見出し下線10スタイル
- 4 THE THORの見出し左線下線3スタイル
- 5 THE THORの見出し背景14スタイル
- 6 THE THORの見出しグラデスタイル10スタイル
- 7 THE THORの見出しラインマーク5スタイル
- 8 THE THORの見出し丸マーク5スタイル
- 9 THE THORの見出し先頭大4スタイル
- 10 THE THORサイドエリアの見出しのデザインと色の変更場所
- 11 THE THORフッターエリアの見出しのデザインと色の変更場所
- 12 THE THORフッターエリアの色のカスタマイズ
- 13 THE THOR♪CSSコードの張り付け場所
- 14 THE THORフッター♪背景色を変えるためのコード
- 15 THE THORフッター♪グレー文字の色を変えるためのコード
- 16 THE THORフッター♪白文字の色を変えるためのコード
- 17 THE THORヘッダーエリアの背景色の変え方
- 18 THE THORメニューバーの色の変え方
- 19 THE THORメインエリアの背景色の変え方
- 20 THE THOR見出しと背景の設定紹介 まとめ
THE THORの見出しの設定場所
「外観」→「カスタマイズ」→「パーツスタイル設定」→「見出し設定」の順にクリックしてください。
THE THORの見出しのスタイルの種類
THE THORの見出しは、色をA/B/Cの3色を指定して、スタイルを選択する方法です。
基本のスタイルはA文字の色だけの指定ですので、ここでは紹介を省かせていただきます。
私は基本のスタイルを選択して、cssでカスタマイズをしています。
THE THORの見出し下線10スタイル
「A」の文字色と「B」や「C」で下の線の色を指定します。
下線-2本の見出し画像です。
THE THORの見出し左線下線3スタイル
「A」の文字色と「B」が左側の縦線「C」で左横の縦線と下の線の色を指定します。
左下線-点線の見出し画像です。
THE THORの見出し背景14スタイル
「A」の文字色と「B」は背景や線「C」は下線、左線、影などを指定します。
背景-ステッチの見出し画像です。
THE THORの見出しグラデスタイル10スタイル
「A」の文字色と「B」は背景や線「C」は下線、左線、影などを指定します。
この画像の見出しスタイルは上の色、下の色、上線の色を決めています。
グラデー上線角丸(白文字)の見出し画像です。
THE THORの見出しラインマーク5スタイル
ラインマーク-グラデ上線(白文字)の見出し画像です。
THE THORの見出し丸マーク5スタイル
丸マークー背景線角丸の見出し画像です。
THE THORの見出し先頭大4スタイル
先頭大-先頭下線の見出し画像です。
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フッター♪背景色を変えるためのコード
1 2 3 4 |
/*フッターの色を変える*/ .bottomFooter { background:#f9cfd1; } |
このコードをコピペすると、画像の様に色が変更されます。
THE THORフッター♪背景色を変えるためのコードの紹介
この1文しかないのですが(笑)
これは背景色を指定しています。
background:#E6E6FA;
background:#FAEBD7;
background:#FFD0B4;
background:#C6E4D5;
私の好きな淡い色合いを並べてみました(^^♪
この#から始まるコードが色のコードになります。
色を変えたい場合はこのコードを変えます。
他の色にしたい場合は下の記事に色のコードを紹介していますので参考にしてみてください。
>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
THE THORフッター♪グレー文字の色を変えるためのコード
1 2 3 |
.bottomFooter__producer{ color:#f39f89; } |
グレーの文字の色を変更しています。
THE THORフッター♪グレー文字の色を変えるためのコードの紹介
colorが文字色の指定になります。
#から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
他の色にしたい場合は下の記事に色のコードを紹介していますので参考にしてみてください。
>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
THE THORフッター♪白文字の色を変えるためのコード
1 2 3 |
.bottomFooter__link { color:#C6E4D5; } |
THE THORフッター♪グレー文字の色を変えるためのコードの紹介
グレーの文字同様の指定になります。
colorが文字色の指定になりますので、#から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
他の色にしたい場合は下の記事に色のコードを紹介していますので参考にしてみてください。
>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
THE THORヘッダーエリアの背景色の変え方
「外観」→「カスタマイズ」→「共通エリア」→「ヘッダーアリア」の順にクリックしていきます。
「ヘッダーエリア設定」が表示されますので、その中の「ヘッダーの背景色を指定」で背景色を選択します。
THE THORメニューバーの色の変え方
メニューバーの背景色は設定でしていできません。
CSSを使用して変更します。
興味のある方は下の記事の「【THE THOR】メニューバーに背景色を付ける」を参考にしてください(^^♪
>>>コピペOK【ザ・トール】メニューバーの文字色をカスタマイズ♪
THE THORメインエリアの背景色の変え方
「外観」→「カスタマイズ」→「基本設定」→「基本スタイル」の順にクリックしていきます。
「基本スタイル設定」が表示されますので、その中の「全体の背景色を指定」で背景色を選択します。
背景画像を使用したい場合は「全体の背景画像を登録」で背景に使用したい画像を選択します。
THE THOR見出しと背景の設定紹介 まとめ
新しくサイトを作ろうかと思うと、どこでどう設定すると、どう変わるんだっけ?とよく戸惑ってしまうそらです(笑)
ここを設定ると、ここが変わるのね、とすぐに思い出せるように記事にしておくことにしました(;^ω^)
ランキングサイトに参加していますのでクリックしていただけると嬉しいです♪
ランキングサイトに登録しているのでクリックしていただけると嬉しいです(^^♪