基本10. カスタマイズ

では、いよいよ『カスタマイズ』です。
カスタマイザーやライブプレビューとも言います。便宜上、カスタマイザーと呼ぶ事にします。

カスタマイザー へ

サイト表示、ダッシュボードからいずれかの赤枠をクリックします。

 

カスタマイザー画面

便宜上ですが、赤枠がカスタマイザーで、黄色枠をライブプレビューとします。

赤枠の変更が、黄色枠ですぐにプレビューされます。
 

サイト基本情報

『サイト基本情報』をクリックすると、画像右側になります。
ここでも、[サイトのタイトル]と[キャッチフレーズ]を変更出来ます。
サイトアイコンを設置する場合は、『512×512ピクセル』以上の正方形の画像を作成して画像を選択します。

 

変更を加えたらこまめに公開をクリックしましょう。
続けて他の項目を変更するには、ピンク枠の『<』をクリックします。

 

『色』のカスタマイズです。開き方は『サイト基本情報』と同じです。
カメレオンバージョンの本領発揮です。
画像左側のように色を選択をクリックすると、赤下線の色コード(記号)枠とパレットが展開します。パレットから好きな色を選ぶことも出来ますが、好みの色を見つけるのは難しいかもしれません。
そこで、色コードがわかっている場合は、画像右側のようにコピペすると便利です。
デフォルトで元のブルーバージョンに戻せます。

 

ベーシックデザインサンプル色

fsvbasicの公式マニュアルのカラーサンプル からベーシックだけを抜き出してみました。
背景色は全部白色なので、実際に変更するのは3色だけです。
背景色も変更したい場合は、リンク-サブカラーよりも淡い色が合うと思います。

ベーシックデザインブルー(デフォルト)

・背景色#ffffff ・メインカラー#1177ba ・リンク-主要カラー#0e67a3 ・リンク-サブカラー#b8dcf1
・背景色-フッターウィジェットエリア#f5f5f5 ・テキスト-主要カラー#333333 ・テキスト-サブカラー#ffffff ・ライン/アイコンカラー#cccccc

 

ベーシックデザイングリーン

・背景色#ffffff
・メインカラー#408080
・リンク-主要カラー#2e5a5a
・リンク-サブカラー#dbecec

 

ベーシックデザインオレンジ

・背景色#ffffff
・メインカラー#f28534
・リンク-主要カラー#401000
・リンク-サブカラー#fce4d3

 

ベーシックデザインピンク

・背景色#ffffff
・メインカラー#fe4444
・リンク-主要カラー#640000
・リンク-サブカラー#ffecec

 

ベーシックデザインブラック

・背景色#ffffff
・メインカラー#333333
・リンク-主要カラー#777777
・リンク-サブカラー#f5f5f5

ブラックの場合、リンクの2色は別の色の方がわかりやすいです。
 


サンプルなので、カラフルな組み合わせでも、お好みでどうぞ。
コピペの際に『#6桁のコード』になっていればOKです。

 

背景画像

全体の背景画像を使うことも出来ます。
淡い色合いの画像がおすすめです。
画像を選択で設定します。

 

ロゴ

サイトのタイトルを画像に出来ます。
画像を選択で設定します。

 

ヘッダーテキストエリア

・サイトマップ リンクURL:http://example.wp.xdomain.jp/sitemap/
・お問い合わせページ リンクURL:http://example.wp.xdomain.jp/contact/
または、mailto:メールアドレス(迷惑メールが増えるかもしれません。)
・案内文(小さな文字サイズ):住所等を入れます。
・案内文(大きな文字サイズ):電話番号等を入れます。

URLの冒頭部分はご自身のものに差し替えて下さい。
4項目共に、不要な場合は白紙にすると表示されません。
サイトマップは後で紹介しますので、『サイトURL/sitemap/』でOKです。
 

スライド設定

トップページにのみ表示されるスライド画像を5枚まで使用出来ます。 幅1200pixel × 高さ300pixelの画像を必要な枚数用意します。
黄色枠が1枚分の設定です。
画像の変更をクリックして画像を設定します。
リンクURLと注釈を入力します。空白にすると表示されません。

同様の手順で使いたい枚数分設定します。
削除をクリックするとその画像は表示されません。
スライド画像を使わない場合は、全部削除すればOKです。
 

ウェルカムメッセージ

これは、トップページを投稿ページに設定する場合のみ有効なので省略します。
 

メニュー、ウィジェット、ホームページ設定

これらはもう設定済みですね。メニュー、ウィジェットはこちらの方が使いやすいと思う方も居られるかもしれませんので、開いてみて下さい。
 

フッター

ウィジェットエリアのフッターでは無く、著作権表示のフッターです。
Copyright© 2019 サイト名 All Rights Reserved.
等と入力します。

 

追加 CSS

スタイルシート(style.css)の変更・追加がここで出来ます。
このカテゴリーでは、無料サーバー対象に紹介しているので、親テーマのままで使用しています。
親テーマに『追加 CSS』を使うことは出来ますが、テーマが更新された場合リセットされてしまうので、エディター等に控えを取っておくか、子テーマで使用する事をおすすめします。
「なんのこっちゃ?」な方は、スルーして下さい。
 


以上がカスタマイザー(カスタマイズ)の紹介です。
公開して、『×』をクリックするとサイト表示になります。