ここではトップページの編集について説明します。
ヘッダーの編集
ロゴの変更
①ロゴ画像をダウンロードしてパソコンのフォルダーに保存
②管理画面の「外観」「ウィジェット」を開きます。
③「header01ロゴ」「Aite Origin Image」「Image file」に進む。
④「Coose Media」を押すとメディアライブラリーで画像一覧が表示される。
⑤パソコンのフォルダーからロゴ画像を選択し、画像一覧中にドラッグ&ドロップする。
⑥必要に応じ画像編集をした後「Set Media」で「ウィジェット」に戻るので「保存」を押して終了。
タイトルの変更
①タイトル画像をダウンロードしてパソコンのフォルダーに保存
②管理画面の「外観」「ウィジェット」を開きます。
③「header02タイトル」「Aite Origin Image」「Image file」に進む。
④「Coose Media」を押すとメディアライブラリーで画像一覧が表示される。
⑤パソコンのフォルダーからタイトル画像を選択し、画像一覧中にドラッグ&ドロップする。
⑥必要に応じ画像編集をした後「Set Media」で「ウィジェット」に戻るので「保存」を押して終了。
キャッチフレーズの変更
①管理画面の「設定」「一般」を開きます。
②「キャッチフレーズ」の内容を書き換えます。
③編集が終了したら「保存」を押して終了です。
サイドバーの編集
メニューの変更
①管理画面の「外観」「ウィジェット」を開きます。
②一番上の「sidebar01サイドバー」にある「ビジュアルエディター」に各メニュー項目があります。
③変更したい「ビジュアルエディター」を押す編集画面になります。
④ここで項目名とリンク先を変更します。
⑤編集が済んだら「保存」を押して終了です。
新しいウィジェット追加(画像、テキストなど)
①管理画面の「外観」「ウィジェット」を開きます。
②一番上の「sidebar01サイドバー」にある「ビジュアルエディター」に各メニュー項目があります。
③左の「利用できるウィジェット」の使いたい項目を「sidebar01サイドバー」にドラッグ&ドロップします。
④ウィジェットを編集します。
⑤編集が済んだら「保存」を押して終了です。
フッターの編集
メニューの変更
①管理画面の「外観」「ウィジェット」を開きます。
②「Layout Buileder」「Open Builder」に進みます。
③「カスタムメニュー」の行でカーソルを右端に置くと表示が表れるので「Edit」を押し編集します。
④メニューが不要の場合は「Delite」を押して消去します。
⑤現在メニューを選択には「menu04」が使われています。
⑥メニュー項目を変更するには「外観」「メニュー」から項目を変更します。
コピーライトの変更
①管理画面の「外観」「ウィジェット」を開きます。
②「Layout Buileder」「Open Builder」に進みます。
③「ビジュアルエディター」の行でカーソルを右端に置くと表示が表れるので「Edit」を押し編集します。
④編集が終わったら「done」を押して保存します。
⑤さらにもう一度「done」を押して保存します。
⑥「ウィジェット」に戻ったら「保存」を押して終了です。
サイト配色の編集
基本カラー
全体の色調を変更したい場合、例えばデフォルトの基本からの青をより濃くしたいときはサイトのCSSファイルを変更します。
この場合、基本色「steelblue」を「darkblue」に変更してみましょう。
「外観」「テーマの編集」からCSSファイルを編集します。
エディタを使ってカラー名を「steelblue」から「darkblue」にすべて置換して保存します。
メニュー項目のカラー
メニュー部分等は、下記の項目をCSSプログラムの修正で変えることができますが、修正を間違えると、サイトがアクセス不能になったりすることがありますので注意して行ってください。
(下記に項目から、どの部分の色を変えたいか選択します)
配色を変更するには、以下の各項目のカラーネームまたはカラーコードを希望色に書き換えます。
( )内は現在の配色です。
※の記述では★★★★★で表示してある行です。
0.各ページ見出しh3ボーダー左5px(steelbule)★基本色★
1.ヘッダー、キャッチフレーズ背景色(steelbule)★基本色★
2.グローバルナビ、背景色(#eee)
3.グローバルナビ、文字色(dimgray)
4.グローバルナビ、ホバーの文字色(steelbule)★基本色★
5.グローバルナビ、ホバーの背景色(#fff, #ddd)グラデーション
6.グローバルナビ、現在ページの文字色(black)
7.グローバルナビ、現在ページの背景色(#ddd, #fff)グラデーション
8.サイドバー、タイトル文字色(#fff)
9.サイドバー、タイトル背景色、背景マーク画像付(steelbule)★基本色★
10.サイドバー、メニュー文字色(#333)
11.サイドバー、メニュー背景色(#fff, #ddd)グラデーション
12.サイドバー、ホバーメニュー文字色(steelbule)★基本色★
13.サイドバー、ホバー時メニュー背景色(#ddd, #fff)グラデーション
14.サイドバー、現在ページメニュー文字色(#555)
15.フッター、背景色(steelbule)★基本色★
※参考・・・HTML色見本:カラーネームで指定できるWebカラーの見本
http://www.hi-ho.ne.jp/douton/htmlcolor.html