「アフィンガー5／WING」基本設定01 トップページ上の部分編／テーマを変更した時に私が行った設定

少し前にブログのテーマを「WING（AFFINGER5）」変更したのですが、ココの色変えたいんだけどドコにその設定があるの？ ロゴを真ん中にしたいんだけどドコぉぉぉぉ？ と戸惑い、めちゃめちゃ時間がかかりました。

その時にちゃんとメモしておけば良かったのですが、またやっぱり色変えたいな〜、字をもうちょっと大きくしたいな〜、画像変えたいな〜と思った時に、あれ？どこだっけ？　ここの画像は何ていう項目だっけ？とまた時間がかかってしまったので、書いておこうと思いました。

たくさん設定があると思いますが、私が変更した設定を書いていきたいと思います。

ますはブログの顔とも言える、トップページの上の方の設定です。

トップページ上の部分

① ロゴ画像

「外観」→「カスタマイズ」→「ロゴ画像」→「画像を選択」

ここにロゴの画像を入れます。フッター（一番下）にも同じロゴを使用するなら「ヘッダーロゴ画像を使用する」にチェックを入れる。

ロゴ画像を入れてない場合は文字でサイト名がでます。

② キャッチフレーズ

「外観」→「カスタマイズ」→「サイト基本情報」

ここに、キャッチフレーズを入れる。

サイトの名前もここで変更できるよ。

サイト名とキャッチフレーズの文字色を変更したい

「外観」→「基本エリア設定」→「ヘッダーエリア」→「サイトタイトルとキャッチフレーズの文字色」を変更する。

サイト名とキャッチフレーズを上下反対にしたい

最初は、キャッチフレーズがサイト名（ロゴ画像）の上になっているので上下反対にしたい場合は、

「AFFINGER5管理」→「ヘッダー」→「Hヘッダー設定」の「サイト名とキャッチフレーズを上下反対にする」にチェックを入れる。

サイト名とキャッチフレーズを真ん中に持っていきたい

最初は、サイト名（ロゴ画像）とキャッチフレーズが左端によっているので真ん中にしたい場合は、

「AFFINGER5管理」→「ヘッダー」→「Hヘッダー設定」の「ヘッダーを分割しない」で一旦「SAVE」して「ヘッダーエリアをセンタリング」にチェックを入れる。

キャッチフレーズを非表示にしたい

キャッチフレーズを非表示にもできます。

「AFFINGER5管理」→「ヘッダー」→「Hヘッダー設定」の「ヘッダー（及びフッター）にキャッチフレーズを表示しない」にチェックを入れる。

もしくは、「外観」→「カスタマイズ」→「サイト基本情報」のキャッチフレーズを空白にする。

③ メニュー

「外観」→「カスタマイズ」→「+メニューのカラー設定」→「PCヘッダーメニュー」

ここで、メニュー部分の背景色・文字・ボーダーなどの色を設定します。

ホーム｜便利グッズ｜インテリア｜て感じに最初はなってますが、私は全部同じ色にしているので、ボーダー（区切り線・囲い線）が見えなくなっています。

他には、下層ドロップダウンメニュー背景色（マウスをメニュー項目に持っていくと出てくる）は濃い灰色に変更して、第一階層メニューを太字にする（サイドメニュー連動）にもチェックを入れました。

メニューの幅を横幅いっぱいにしたい

「外観」→「カスタマイズ」→「+メニューのカラー設定」→「メニューの横幅を100％にする」にチェックを入れる。

④ ヘッダーエリア

「外観」→「カスタマイズ」→「基本エリア」→「ヘッダーエリア」

ここで、色を変えたり画像を入れたりできます。別々の色を設定するとグラデーションもできます。

ヘッダーエリアを横幅いっぱいにしたい

「外観」→「カスタマイズ」→「基本エリア」→「メニューの横幅を100％にする」にチェックを入れる。

⑤ ヘッダー画像

「外観」→「カスタマイズ」→「ヘッダー画像」

私は普段ヘッダー画像何も入れてないので、猫の雲を入れてみました。モバイル用のヘッダー画像を入れることもできます。

追記
サイトデザインを変更して、おすすめヘッダーカードを設置しました。

⑥ おすすめヘッダーカード

カードを1～4枚設置することができます。

グッズの記事一覧やブログの記事一覧というページを作って、そこに飛ぶように設定しました。

私は最大の4枚設定しましたが、1枚でも2枚でも3枚でも大きさが変わるだけで設定できます。

画像をアップロード、テキストを入力、リンク先のURLを入力してSAVE。

テキストがいらなければ空白でOK。

画像いれる所の下にデザイン項目がいくつかあります。

画像の大きさにもよるかもしれないですが、テキストなしだと大きく表示されました。

画像は同じ大きさで揃えたほうが綺麗に表示されると思います。

私はテキストのある背景画像を暗くするに設定しました。

⑦ 記事スライドショー

一時期、ヘッダーの所を「記事スライドショー」にしていました。

一番上の「ヘッダーに記事をスライドショーで表示する」にチェックを入れるだけで、スライドショーができます。

めっちゃ簡単にできてすごいね♪

表示するカテゴリIDを空白にすると、新しい記事が10個スライドショーで表示されます。

私は、

表示方法　：フェードイン・アウト
表示速度　：4000
カテゴリID：空白
カテゴリリンク非表示にチェック
投稿日を非表示にチェック

にしていました。

スライドショーを設定すると、ヘッダー画像は表示されなくなるよ。