こんな悩みありませんか?
- あれ?ヘッダーの色変えたはずなのに変わらないぞ…
- ん?トップページにスライダーってどうやって表示させるんだ??
- カテゴリをタブで切り替えたいのにできない…
- アフィンガーのカスタマイズ難しすぎへんか?!
![](https://toach.click/images/fukidasi2.webp)
この記事を読み終わる頃にはAFFINGER6を自由自在に操っていることでしょう
![](https://toach.click/images/fukidasi2.webp)
この記事(AFFINGER6「トップページ」のカスタマイズ方法)と「AFFINGER6「記事まわり」のカスタマイズ方法」を通して、次のようなブログを作りながらAFFINGER6の基本的な機能や操作方法を覚えていきます。
![カスタマイズ後のブログのデザインイメージ](https://toach.click/images/affinger6-guide_4_0001.webp)
このデザインは、このまま使っても、これをベースに色やレイアウトを変えて使っても問題ないです。自由に使ってください。
AFFINGER6の使い方を覚えるのが目的なので、以降の説明で色指定をしていますが、カラーチャートなどを使って好きな色にしていただいて問題ありません。
AFFINGER6のカスタマイズを始める前の設定
「カラーとデザイン」をリセットする
![](https://toach.click/images/fukidasi2.webp)
カスタマイズをしやすくするため「カラーとデザイン」をリセットします。寝癖を直してから髪セットしたほうがしやすいのと同じようなもんだと思ってください。
![カラーをデザインをリセットする手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0002.webp)
![カラーとデザインをリセットする手順3と4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0003.webp)
![カラーとデザインをリセットする手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0004.webp)
- 「AFFINGER管理」をクリック
- 「全体設定」をクリック
- 「カラーパターン」の「リセット(カラー未設定)」を選択
- 「デザインパターン」の「リセット(設定なしカラー含む)」を選択
- 「Save」をクリック
「簡単設定を使用しない」にする
![](https://toach.click/images/fukidasi2.webp)
簡単設定なんて生ぬるいものは、こちらから三行半をつけてやりましょう。というよりも簡単設定とはいうものの、これのせいで逆に複雑になるので「使用しない」に設定します。
![簡易設定を使用しないに設定する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0005.webp)
![簡易設定を使用しないに設定する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0006.webp)
![簡易設定を使用しないに設定する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0007.webp)
![簡易設定を使用しないに設定する手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-1_0008.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「全体カラー設定」をクリック
- 「簡単設定を使用する」の「使用しない」を選択
使用しないにチェックされていれば次へ進む - 「公開」をクリック
![](https://toach.click/images/fukidasi2.webp)
ようやくここからAFFINGER6のカスタマイズをしていきます。まずはヘッダー周辺の設定をしていきましょう。
AFFINGER6の「ヘッダー」の設定
ヘッダーの背景色・背景画像を設定
![ヘッダー背景色の変更前](https://toach.click/images/affinger6-guide_4-2-1_0006.webp)
![ヘッダー背景色の変更後](https://toach.click/images/affinger6-guide_4-2-1_0007.webp)
![ヘッダーの背景色と背景画像を設定する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-1_0001.webp)
![ヘッダーの背景色と背景画像を設定する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-1_0002.webp)
![ヘッダーの背景色と背景画像を設定する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-1_0003.webp)
![ヘッダーの背景色と背景画像を設定する手順4から7。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-1_0004.webp)
![ヘッダーの背景色と背景画像を設定する手順8。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-1_0005.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「ヘッダーエリア」をクリック
- 「背景色」を「#f9f4f4」に変更
- 「背景色(グラデーション)」を「#e3e6f4」に変更
- 「ヘッダー背景の横幅を100%にする」にチェック
- 「グラデーションの方向を横向きにする」にチェック
- 「公開」をクリック
背景を画像にしたいときは「ヘッダーエリア背景画像」で選択してください。
ヘッダータイトルの文字色・ロゴ画像の設定
![ヘッダータイトルの文字色変更前](https://toach.click/images/affinger6-guide_4-2-2_0005.webp)
![ヘッダータイトルの文字色変更後](https://toach.click/images/affinger6-guide_4-2-2_0006.webp)
![ヘッダータイトルを設定する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-2_0001.webp)
![ヘッダータイトルを設定する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-2_0002.webp)
![ヘッダータイトルを設定する手順3から5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-2_0003.webp)
![ヘッダータイトルを画像にする手順](https://toach.click/images/affinger6-guide_4-2-2_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「ロゴ画像/サイトのタイトル」をクリック
- 「サイトタイトルとキャッチフレーズの文字色」を「#a8aec1」に変更
- 「スマホヘッダーのタイトル色」を「#a8aec1」に変更
- 「公開」をクリック
タイトルを画像にする場合は、「ロゴ画像」のすぐ下の「画像を選択」にて設定します。
スマホで見たさいにもロゴ画像を表示する場合は、「スマホロゴ画像」の「画像設定」にておこなってください。
サイトタイトルを中心に寄せる設定
![サイトタイトルを中心に寄せる前](https://toach.click/images/affinger6-guide_4-2-3_0006.webp)
![サイトタイトルを中心に寄せた後](https://toach.click/images/affinger6-guide_4-2-3_0007.webp)
![サイトタイトルを中心に寄せる手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-3_0001.webp)
![サイトタイトルを中心に寄せる手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-3_0002.webp)
![サイトタイトルを中心に寄せる手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-3_0003.webp)
![サイトタイトルを中心に寄せる手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-3_0004.webp)
![サイトタイトルを中心に寄せる手順6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-3_0005.webp)
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」の「PCのみ」の「ヘッダーを分割しない」にチェック
- 「Save」をクリック
- 「ヘッダーエリアをセンタリング」にチェック
- 「Save」をクリック
サイトタイトル・キャッチコピー位置を反転
![サイトタイトルとキャッチキャッチフレーズの位置を反転させる前](https://toach.click/images/affinger6-guide_4-2-4_0004.webp)
![サイトタイトルとキャッチキャッチフレーズの位置を反転させた後](https://toach.click/images/affinger6-guide_4-2-4_0005.webp)
![サイトタイトルとキャッチキャッチフレーズの位置を反転させる手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-4_0001.webp)
![サイトタイトルとキャッチキャッチフレーズの位置を反転させる手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-4_0002.webp)
![サイトタイトルとキャッチキャッチフレーズの位置を反転させる手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-4_0003.webp)
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」の「サイト名とキャッチフレーズを上下反対にする(フッター連動)」にチェック
- 「Save」をクリック
キャッチフレーズの削除(非表示)設定
![キャッチフレーズを非表示にする前](https://toach.click/images/affinger6-guide_4-2-5_0004.webp)
![キャッチフレーズを非表示にした後](https://toach.click/images/affinger6-guide_4-2-5_0005.webp)
![キャッチフレーズを非表示にする手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-5_0001.webp)
![キャッチフレーズを非表示にする手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-5_0002.webp)
![キャッチフレーズを非表示にする手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-5_0003.webp)
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」項目の「PCのみ」の「ヘッダー(及びフッター)にキャッチフレーズを表示しない」にチェック
- 「Save」をクリック
AFFINGER6のキャッチフレーズの非表示は、人の目に見えなくなるだけで、titleタグとしてHTML内では次の画像のように表示されたままになっています。
![キャッチフレーズを非表示にしてもHTMLには表示されている状態の画像](https://toach.click/images/affinger6-guide_4-2-5_0006.webp)
つまり「Just another WordPress site」のまま非表示設定にすると、ブログトップが検索結果に表示されたさい、以下のように表示される可能性があります。
![キャッチフレーズを非表示にしても検索結果に表示されてしまうイメージ画像](https://toach.click/images/affinger6-guide_4-2-5_0007.webp)
なので非表示にするとしても、キャッチフレーズはしっかりと書くようにしましょう。
キャッチフレーズは次の手順で記入することができます。
- 「設定」にカーソルをのせ「一般」をクリック
もしくは次の手順で、キャッチフレーズをtitleタグに含めないようにします。
- 「AFFINGER管理」をクリック
- 「SEO」をクリック
- 「トップタイトルを書き替え(ここに記述したタイトルが優先されます)」にサイト名を入力
- 「Save」をクリック
ちなみに「キャッチフレーズ│サイト名」として出力されるのは、トップページのみです。
個別ページでは「記事タイトル│サイトタイトル」がtitleタグとして出力されるようになっています。
タイトル背景の上下幅の設定
![タイトル背景の上下幅を変更する前](https://toach.click/images/affinger6-guide_4-2-6_0004.webp)
![タイトル背景の上下幅を変更した後](https://toach.click/images/affinger6-guide_4-2-6_0005.webp)
![タイトル背景の上下幅を変更する手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-6_0001.webp)
![タイトル背景の上下幅を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-6_0002.webp)
![タイトル背景の上下幅を変更する手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-2-6_0003.webp)
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」の「PCのみ」の「PCヘッダーの高さ(px)」に「120」と記入
AFFINGER6の「グローバルナビゲーション」の設定
背景色・ボーダー色の変更
![グローバルメニューの背景色とボーダー色を変更する前](https://toach.click/images/affinger6-guide_4-3-1_0005.webp)
![グローバルメニューの背景色とボーダー色を変更した後](https://toach.click/images/affinger6-guide_4-3-1_0006.webp)
![グローバルメニューの背景色とボーダー色を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-1_0001.webp)
![グローバルメニューの背景色とボーダー色を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-1_0002.webp)
![グローバルメニューの背景色とボーダー色を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-1_0003.webp)
![グローバルメニューの背景色とボーダー色を変更する手順4から10。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-1_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「-各メニュー設定」をクリック
- 「PCヘッダーメニュー」をクリック
- 「背景色」を「#e3e6f3」に変更
- 「背景色(グラデーション)」を「#f9f4f4」に変更
- 「ボーダー上下色」を「#e3e6f3」に変更
- 「ボーダー左右色」を「#e3e6f3」に変更
- 「ボーダー右色」を「#e3e6f3」に変更
- 「文字色」を「#99a3c1」に変更
- 「公開」をクリック
幅を100%にする・中心に寄せる
![グローバルメニューの幅を中心に寄せる前](https://toach.click/images/affinger6-guide_4-3-2_0005.webp)
![グローバルメニューの幅を中心に寄せた後](https://toach.click/images/affinger6-guide_4-3-2_0006.webp)
![グローバルメニューの幅を100%にして中心に寄せる手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-2_0001.webp)
![グローバルメニューの幅を100%にして中心に寄せる手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-2_0002.webp)
![グローバルメニューの幅を100%にして中心に寄せる手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-2_0003.webp)
![グローバルメニューの幅を100%にして中心に寄せる手順4から6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-3-2_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「-各メニュー設定」をクリック
- 「PCヘッダーメニュー」をクリック
- 「メニューをセンター寄せにする」にチェック
- 「メニューの横幅を100%にする」にチェック
- 「公開」をクリック
AFFINGER6の「トップページ背景」の設定
![トップページの背景色を変更する前](https://toach.click/images/affinger6-guide_4-4_0005.webp)
![トップページの背景色を変更した後](https://toach.click/images/affinger6-guide_4-4_0006.webp)
![トップページの背景色を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-4_0001.webp)
![トップページの背景色を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-4_0002.webp)
![トップページの背景色を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-4_0003.webp)
![トップページの背景色を変更する手順4と5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-4_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「背景色」をクリック
- 背景色の「色を選択」を「#f2f0f4」に変更
- 「公開」をクリック
AFFINGER6の「カテゴリー」の設定
背景色・文字色
![カテゴリーの背景色と文字色を変更する前](https://toach.click/images/affinger6-guide_4-5-1_0005.webp)
![カテゴリーの背景色と文字色を変更した後](https://toach.click/images/affinger6-guide_4-5-1_0006.webp)
![カテゴリーの背景色と文字色を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-5-1_0001.webp)
![カテゴリーの背景色と文字色を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-5-1_0002.webp)
![カテゴリーの背景色と文字色を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-5-1_0003.webp)
![カテゴリーの背景色と文字色を変更する手順4から6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-5-1_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「見出しタグ(hx)/テキスト」をクリック
- 「カテゴリ」をクリック
- 「背景色」を「#e8eaf2」に変更
- 「文字色」を「#99a3c1」に変更
- 「公開」をクリック
AFFINGER6の「ヘッダー下領域」の設定
ヒーローヘッダーを作る
![ヒーローヘッダー設定前](https://toach.click/images/affinger6-guide_4-6-1_0017.webp)
![ヒーローヘッダー設定後](https://toach.click/images/affinger6-guide_4-6-1_0018.webp)
![](https://toach.click/images/fukidasi2.webp)
はじめは表示するものもないと思いますが、自信のある商品や見てもらいたいコンテンツなどができたさいには、ヒーローヘッダーを活用することをオススメします。
![ヒーローヘッダーを作成する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0001.webp)
![ヒーローヘッダーを作成する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0002.webp)
![ヒーローヘッダーを作成する手順3から5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0003.webp)
![ヒーローヘッダーを作成する手順6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0004.webp)
![ヒーローヘッダーを作成する手順7。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0005.webp)
![ヒーローヘッダーを作成する手順8から11。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0006.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「ヘッダー画像」をクリック
- 「ヘッダー画像エリア」の「ヘッダー画像エリア最低の高さ(px)」に「400」と入力
高さは300~400pxぐらいがおすすめ - 「スマホ(599px以下)」に「180」と入力
- 「ヘッダー画像の後ろに配置する背景画像です」の「画像を選択」をクリック
- 「メディアライブラリ」の「header-img-ukidaira.png」を選択
- 「画像を選択」をクリック
- 「背景画像の横位置」の「真ん中」を選択
- 「背景画像の縦位置」の「真ん中」を選択
- 「背景画像を幅100%のレスポンシブにする」にチェック
- 「公開」をクリック
![ヒーローヘッダーを作成する手順12と13。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0007.webp)
![ヒーローヘッダーを作成する手順14。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0008.webp)
![ヒーローヘッダーを作成する手順15。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0009.webp)
![ヒーローヘッダーを作成する手順16。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0010.webp)
![ヒーローヘッダーを作成する手順17。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0011.webp)
![ヒーローヘッダーを作成する手順18。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0012.webp)
![ヒーローヘッダーを作成する手順19。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0013.webp)
![ヒーローヘッダーを作成する手順20。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0014.webp)
![ヒーローヘッダーを作成する手順21。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0015.webp)
![ヒーローヘッダーを作成する手順22と23。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-1_0016.webp)
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーコンテンツ設定」をクリック
- なにも記入されていない「コンテンツ内」をクリック
- キーボードの「Shift+Alt+z」を同時に押す
押すと画像のようなスタイル設定バーが表示される - 「タグ」>「テキストパーツ」>「カスタムフォント」と進み「白影」を選択
※選択後、どこもクリックせずに次に進む - 「タグ」>「ショートコード補助」>「定型文」と進み「\バンザイ/」を選択
※別の文章にしたい場合は「\バンザイ/」を削除して別の文字を入力 - いま入力されている文章の下に移動
- 「タグ」>「カスタムボタン」>「ノーマル」と進み「詳しくはコチラ(ブルー)」を選択
- 入力された文章の中にある「url=”#”」の#に飛ばしたいURLを記入
ボタン背景色はurl=”#”のすぐ下のbgcolor=”#39BE5″にて変更可 - 「コンテンツ全体を上下左右を中央寄せ(display:flex)にする」にチェック
白影フォントで文字が見えづらいときは「背景を暗くする」にもチェック - 「Save」をクリック
白影フォントで文字が見えづらくなる場合は、「背景を暗くする」にチェックを入れると見やすくなります。
その他にもヘッダーコンテンツ設定では、記事のように文章を書いたり、ボタンの配置やレイアウトの設定などできるようになっています。
カスタマイズ性が高いところなので、AFFINGER6の設定に慣れてきたら、いろいろ試してみるのも面白いと思います。
ヘッダーカードの設定をする
![ヘッダーカード表示前](https://toach.click/images/affinger6-guide_4-6-2_0006.webp)
![ヘッダーカード表示後](https://toach.click/images/affinger6-guide_4-6-2_0007.webp)
![ヘッダーカードを設定する手順1と2。詳細は吹き出しに記載](https://toach.click/images/affinger6-guide_4-6-2_0001.webp)
![ヘッダーカードを設定する手順3。詳細は吹き出しに記載](https://toach.click/images/affinger6-guide_4-6-2_0002.webp)
![ヘッダーカードを設定する手順4。詳細は吹き出しに記載](https://toach.click/images/affinger6-guide_4-6-2_0003.webp)
![ヘッダーカードを設定する手順5。詳細は吹き出しに記載](https://toach.click/images/affinger6-guide_4-6-2_0004.webp)
![ヘッダーカードを設定する手順6。詳細は吹き出しに記載](https://toach.click/images/affinger6-guide_4-6-2_0005.webp)
- 「AFINGER管理」をクリック
- 「ヘッダー下 / おすすめ」をクリック
- 「アップロード」をクリック
- 「メディアライブラリ」の「ukidaira-hk4-255-127.png」を選択して「投稿に挿入」をクリック
- 「リンク先URL」に「#」を記入
- 「Save」をクリック
ここでは画像のみを表示させていますが、テキストも合わせて表示する場合は「テキスト:」「サブテキスト」に入力してください。
ここでは4枚表示させていますが、1~3枚表示させたい場合は、表示させたい分だけ入力するようにします。
なお、枚数別おすすめの画像サイズは以下の通りです。
4枚「縦255px 横127px」
3枚「縦343px 横127px」
2枚「縦520px 横259px」
1枚「縦110px 横1050px」
「ヘッダーカード」に1枚設定することはあまりないと思いますが、あるとすれば横長のバナー的な使い方になると思うので「縦110px 横1050px」という比率にしています。
「ヘッダーカード」画像がぼやける場合
![ヘッダーカード画像の表示が荒いときの対処法。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-2_0008.webp)
![ヘッダーカードをフルサイズで表示した場合、中サイズで表示した場合の画質を比較](https://toach.click/images/affinger6-guide_4-6-2_0009.webp)
「アップロード」するさいのサイズが「フルサイズ」になっていないとボヤけてしまうことがあります。
まずはサイズがフルサイズになっているか確認してみてください。
それでもボヤける場合、上記で紹介しているおすすめ画像サイズになっているか確認してみてください。
おすすめサイズになっているのにぼやける場合は、メガネをかけ忘れてたりしていないか確認してみてください。
サムネイルスライドショーの設定
![サムネイルスライドショーを表示させる前](https://toach.click/images/affinger6-guide_4-6-3_0005.webp)
![サムネイルスライドショーを表示した後](https://toach.click/images/affinger6-guide_4-6-3_0006.webp)
![サムネイルスライドショーを表示させる手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-3_0001.webp)
![サムネイルスライドショーを表示させる手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-3_0002.webp)
![サムネイルスライドショーを表示させる手順4から6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-3_0003.webp)
![サムネイルスライドショーを表示させる手順7。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-6-3_0004.webp)
- 「AFINGER管理」をクリック
- 「ヘッダー下 / おすすめ」をクリック
- 「サムネイルスライドショー」をクリック
- 「フロントページ」を選択
投稿ページなどにも表示する場合は「全ページ」を選択 - 「画像を角丸にする」のチェックを外す
- 「画像に影をつける」のチェックを外す
- 「Save」をクリック
サムネスライドショーはブログの見た目がリッチになるので表示させてる人も多いです。
ただ表示させるとブログの表示スピードが少し落ちるので、サムネスライドショーをつけるのが昔からの夢とかじゃなければ、表示は要検討したいところです。
AFFINGER6の「タブ式 カテゴリー」の設定
![タブ式カテゴリーを表示させる前](https://toach.click/images/affinger6-guide_4-7_0006.webp)
![タブ式カテゴリーを表示させた後](https://toach.click/images/affinger6-guide_4-7_0007.webp)
![タブ式カテゴリーを表示させる手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-7_0001.webp)
![タブ式カテゴリーを表示させる手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-7_0002.webp)
![タブ式カテゴリーを表示させる手順3と4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-7_0003.webp)
![タブ式カテゴリーを表示させる手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-7_0004.webp)
![タブ式カテゴリーを表示させる手順6から11。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-7_0005.webp)
- 「投稿」にカーソルをのせ「カテゴリー」をクリック
- 「カテゴリーA」「カテゴリーB」「カテゴリーC」「親カテゴリー」のIDを控える
- 「AFFINGER管理」をクリック
- 「トップページ」をクリック
- 「タブ式 カテゴリ一覧」をクリック
- 「タブ式 カテゴリ一覧をフロントページに表示する」にチェック
- 「カテゴリA~D」に「カテゴリA~DのID」を入力
- 「タブA~D(背景色)」を変更
- 「タブA」→「#a8aec0」
- 「タブB」→「#bfada6」
- 「タブC」→「#acbf80」
- 「タブD」→「#a6bfb9」
- 「タブ文字色」を「#ffffff」に変更
- 「デフォルト」を選択
- 「Save」をクリック
本格的な運用をするさいには、表示させたいカテゴリの ID を入力するようにしてください。
AFFINGER6の「記事一覧」の設定
サムネイルの枠線の設定
![記事一覧のサムネイルに枠線を表示させる手順4と5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-1_0004.webp)
![記事一覧のサムネイルに枠線を表示させていない状態](https://toach.click/images/affinger6-guide_4-8-1_0005.webp)
![記事一覧のサムネイルに枠線を表示させた状態](https://toach.click/images/affinger6-guide_4-8-1_0006.webp)
![記事一覧のサムネイルに枠線を表示させる手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-1_0001.webp)
![記事一覧のサムネイルに枠線を表示させる手順。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-1_0002.webp)
![記事一覧のサムネイルに枠線を表示させる手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-1_0003.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「オプション(その他)」をクリック
- 「サムネイル画像」をクリック
- 「一覧のサムネイル画像の枠線」をお好きな色に変更
- 「公開」をクリック
サンプルブログではサムネイルの枠線は非表示にしているので、色の指定はしていません。
サムネイル画像を大きくする設定
その他のサムネイル画像設定
![サムネイル画像を大きくする手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-2_0001.webp)
![サムネイル画像を大きくする手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-2_0002.webp)
![サムネイル画像を大きくする手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-2_0003.webp)
![サムネイル画像を大きくする手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-2_0004.webp)
- 「AFFINGER管理」をクリック
- 「全体設定」をクリック
- 「サムネイル画像設定」をクリック
- 「記事一覧」の「PC(960px以上)のサムネイル画像を大きくする」にチェック
- 「Save」をクリック
その他のサムネイル画像設定
![サムネイルを非表示にしたイメージ画像](https://toach.click/images/affinger6-guide_4-8-2_0007.webp)
![サムネイルをさらに大きくしたイメージ画像](https://toach.click/images/affinger6-guide_4-8-2_0008.webp)
![サムネイルをポラロイド風にしたイメージ画像](https://toach.click/images/affinger6-guide_4-8-2_0009.webp)
![サムネイルにセロテープをつけたイメージ画像](https://toach.click/images/affinger6-guide_4-8-2_0010.webp)
![サムネイルの位置を左から右にした状態のイメージ画像](https://toach.click/images/affinger6-guide_4-8-2_0011.webp)
![サムネイル画像の角を丸くした状態のイメージ画像](https://toach.click/images/affinger6-guide_4-8-2_0012.webp)
「サムネイル画像設定」では以下の設定もできるようになっています。
- サムネイルの非表示
- サムネイル画像を更に大きく
- サムネイルをポラロイド風にする
- サムネイルにセロテープをつける
- サムネイルの位置を変更する
- サムネイルの角を丸くする
記事一覧の記事を区切る線の設定
![記事を区切る線の色を変更する前の状態のイメージ画像](https://toach.click/images/affinger6-guide_4-8-3_0005.webp)
![記事を区切る線の色を変更した状態のイメージ画像](https://toach.click/images/affinger6-guide_4-8-3_0006.webp)
![記事一覧の記事を区切る線を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-3_0001.webp)
![記事一覧の記事を区切る線を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-3_0002.webp)
![記事一覧の記事を区切る線を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-3_0003.webp)
![記事一覧の記事を区切る線を変更する手順4と5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-8-3_0004.webp)
破線にするにチェック
![記事を区切る線を破線にした状態のイメージ画像](https://toach.click/images/affinger6-guide_4-8-3_0007.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「記事一覧の区切りボーダー」をクリック
- 「ボーダーカラー」で色を変更
- 「公開」をクリック
「破線にする」にチェックを入れると点線になります。
AFFINGER6の「サイドバー」の設定
サイドバーの背景設定
![サイドバーの変更前](https://toach.click/images/affinger6-guide_4-9-1_0005.png)
![サイドバーの変更後](https://toach.click/images/affinger6-guide_4-9-1_0006.png)
![サイドバーの背景変更の手順1。詳細はボックス内に記載](https://toach.click/images/affinger6-guide_4-9-1_0001.png)
![サイドバーの背景変更の手順2。詳細はボックス内に記載](https://toach.click/images/affinger6-guide_4-9-1_0002.png)
![サイドバーの背景変更の手順3。詳細はボックス内に記載](https://toach.click/images/affinger6-guide_4-9-1_0003.png)
![サイドバーの背景変更の手順4から6。詳細はボックス内に記載](https://toach.click/images/affinger6-guide_4-9-1_0004.png)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「サイドバー」をクリック
- 「サイドの文字色」を「#8b8fa0」に変更
- 「サイドバーウィジェットエリアの背景色」を「#ffffff」に変更
サイドバーの見出しデザイン設定
![サイドバー内のデザインを変更する前](https://toach.click/images/affinger6-guide_4-9-2_0006.webp)
![サイドバー内のデザインを変更した後](https://toach.click/images/affinger6-guide_4-9-2_0007.webp)
![サイドバー内を設定する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-2_0001.webp)
![サイドバー内を設定する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-2_0002.webp)
![サイドバー内を設定する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-2_0003.webp)
![サイドバー内を設定する手順4から7。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-2_0004.webp)
![サイドバー内を設定する手順8。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-2_0005.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「見出しタグ(hx)/テキスト」をクリック
- ウィジェットタイトル(サイドバー)をクリック
- 「文字色」を「#99a2c0」に変更
- 「背景色」を「#e6e8ef」に変更
- 「ボーダー色」を「#f6f2f4」に変更
- 「ウィジェットタイトルの基本スタイル」で「なし」を選択
- 「公開」をクリック
サイドバーの位置を変更する
![サイドバーを右に表示させているイメージ画像](https://toach.click/images/affinger6-guide_4-9-3_0005.webp)
![サイドバーを左に表示させているイメージ画像](https://toach.click/images/affinger6-guide_4-9-3_0006.webp)
![サイドバーの位置を変更する手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-3_0001.webp)
![サイドバーの位置を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-3_0002.webp)
![サイドバーの位置を変更する手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-3_0003.webp)
![サイドバーの位置を変更する手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-9-3_0004.webp)
- 「AFINGER管理」をクリック
- 「全体設定」をクリック
- 「サイト全体のレイアウト」をクリック
- 「サイドバーを左にする」にチェック
- 「Save」をクリック
左側に移動はできますが、よっぽどの理由がなければ右のほうがいいです。
なぜかというと、パソコンを操作しているときってマウスは右側にあるし、マウスカーソルも基本的には右寄りにあります。
なので右側にサイドバーを置いといたほうが、クリックしやすいし、されやすいんです。
そういう理由でどんなサイトも基本的には右側にメニューを配置するのが基本になります。
AFFINGER6の「フッター」の設定
フッター文字色・背景色の設定
![フッターデザインの変更前](https://toach.click/images/affinger6-guide_4-10-1_0005.webp)
![フッターデザインの変更後](https://toach.click/images/affinger6-guide_4-10-1_0006.webp)
![フッターの文字色と背景色を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-10-1_0001.webp)
![フッターの文字色と背景色を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-10-1_0002.webp)
![フッターの文字色と背景色を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-10-1_0003.webp)
![フッターの文字色と背景色を変更する手順4から9。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-10-1_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「フッターエリア」をクリック
- 「フッター文字色」を「#a8aec1」に変更
- 「背景色」を「#e3e6f4」に変更
- 「背景色(グラデーション上部)」「#f9f4f4」に変更
- 「フッターの背景色を100%にする」にチェック
- 「グラデーションの方向を横向きにする」にチェック
- 「公開」をクリック
AFFINGER6の「トップに戻るボタン」の設定
トップへ戻るボタンの背景色
![トップに戻るボタンを変更する前](https://toach.click/images/affinger6-guide_4-11_0005.webp)
![トップに戻るボタンを変更した後](https://toach.click/images/affinger6-guide_4-11_0006.webp)
![トップに戻るボタンのデザイン変更手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-11_0001.webp)
![トップに戻るボタンのデザイン変更手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-11_0002.webp)
![トップに戻るボタンのデザイン変更手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-11_0003.webp)
![トップに戻るボタンのデザイン変更手順4と5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-11_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「オプション(その他)」をクリック
- 「TOPに戻るボタン」をクリック
- 「背景色」を「#c0c0ce」に変更
- 「公開」をクリック
AFFINGER6の「プロフィール」の設定
プロフ画像・背景色・ボタンを設定
![プロフィール欄のデザイン変更前](https://toach.click/images/affinger6-guide_4-12_0005.webp)
![プロフィール欄のデザイン変更後](https://toach.click/images/affinger6-guide_4-12_0006.webp)
![プロフィール欄のデザイン変更手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-12_0001.webp)
![プロフィール欄のデザイン変更手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-12_0002.webp)
![プロフィール欄のデザイン変更手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-12_0003.webp)
![プロフィール欄のデザイン変更手順4から10。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-12_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「オプション(その他)」をクリック
- 「プロフィールカード」をクリック
- 「アバター画像(プロフィールカード)」で「icon-ukidaira.png」を選択
- 「背景色(プロフィールカード)」を「#f8f3f4」に変更
- 「テキスト色(プロフィールカード)」を「#7f7f7f」に変更
- 「ボタンURL」に「#」と入力
- 「ボタンテキスト」に「プロフィール詳細」と入力
- 「ボタン上部背景色(プロフィールカード)」を「#a8aebf」に変更
- 「公開」をクリック
ちなみにここで使っているアイコン画像は僕が3秒で作ったやる気ペンギンくんです。ライセンスフリーなのでご自由にお使いください。
AFFINGER6の「ボックスメニュー」の設定
ボックスメニューを作成する
![ボックスメニューの作成前](https://toach.click/images/affinger6-guide_4-16-1_0004.webp)
![ボックスメニューの作成後](https://toach.click/images/affinger6-guide_4-16-1_0005.webp)
![ボックスメニューを作成する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-1_0001.webp)
![ボックスメニューを作成する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-1_0002.webp)
![ボックスメニューを作成する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-1_0003.webp)
- 外観」にカーソルをのせ「ウィジェット」をクリック
- 「00_STINGERカスタムHTML」を「サイドバーウィジェット」に挿入
表示させたい場所が決まっていればそこに挿入してください - 以下の「ショートコード(ボックスメニュータグ)」をコピーして貼り付け
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
- 「保存」をクリック
ボックスメニューに画像を表示
![ボックスメニューに画像を表示の変更前](https://toach.click/images/affinger6-guide_4-16-2-0008.webp)
![ボックスメニューに画像を表示の変更後](https://toach.click/images/affinger6-guide_4-16-2-0009.webp)
ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。
![ボックスメニューに画像を表示1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0001.webp)
![ボックスメニューに画像を表示2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0002.webp)
![ボックスメニューに画像を表示3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0003.webp)
![ボックスメニューに画像を表示4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0004.webp)
![ボックスメニューに画像を表示5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0005.webp)
![ボックスメニューに画像を表示6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0006.webp)
![ボックスメニューに画像を表示7。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-2-0007.webp)
- 「メディア」をクリック
- メニューに設定する「画像」をクリック
- 「URLをクリップボードにコピー」をクリック
- 「メモ帳」などにURLを貼り付けておく
- 同じように他のメニューに使う画像のURLも貼り付けておく
- 「コピーしたURL」を「ボックスメニュータグ」内にある「icon_image=””」の「””」の間に貼り付け
4箇所あるので同じようにURLを貼りつけてください - 「保存」をクリック
ボックスメニューに使う画像は背景を透過をしていないと綺麗に表示されないことがあります。
なのでメニューに画像を設定するさいは、透過処理した画像を使うようにしたほうがいいです。
よくわからないときは「背景透過 画像」などで検索してみてください。
なお、メニュー画像サイズは「64×64」だと綺麗に表示されます。
ボックスメニューにアイコンを表示
![ボックスメニューにアイコンを表示する前](https://toach.click/images/affinger6-guide_4-16-3_0001.webp)
![ボックスメニューにアイコンを表示した後](https://toach.click/images/affinger6-guide_4-16-3_0002.webp)
ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。
![ボックスメニューにアイコンを表示する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-3_0003.webp)
![ボックスメニューにアイコンを表示する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-3_0004.webp)
![ボックスメニューにアイコンを表示する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-3_0005.webp)
- 以下のページでメニューに表示させたいアイコンをクリック
- 「コード」をコピー
- 「コピーしたコード」を「ボックスメニュータグ」内にある「webicon=”st-svg-wordpress”」の「st-svg-wordpress」と入れ替える
4箇所あるので同じように入れ替える - 「保存」をクリック
ボックスメニューのメニュー数を増やす
![ボックスメニューのメニュー数を増やす前](https://toach.click/images/affinger6-guide_4-16-4_0001.webp)
![ボックスメニューのメニュー数を増やした後](https://toach.click/images/affinger6-guide_4-16-4_0002.webp)
ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。
![](https://toach.click/images/affinger6-guide_4-16-4_0005.webp)
次のタグはさきほど使ったボックスメニュータグになりますが、水色で囲った部分が1つのメニューをあらわしています。
![ボックスメニューのメニュー数を増やす手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-4_0003.webp)
つまりメニューを6つにしたいときは以下のようにコピペするだけで増やせます。
![ボックスメニューのメニュー数を増やす手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-4_0004.webp)
ボックスメニューの色設定
![ボックスメニューの色設定する前](https://toach.click/images/affinger6-guide_4-16-5_0001.webp)
![ボックスメニューの色設定した後](https://toach.click/images/affinger6-guide_4-16-5_0002.webp)
ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。
ショートコードで設定する方法
カスタマイザーで設定する方法
![ボックスメニューの色設定の手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-5_0003.webp)
![ボックスメニューの色設定の手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-5_0004.webp)
![ボックスメニューの色設定の手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-5_0005.webp)
![ボックスメニューの色設定の手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-16-5_0006.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「-各メニュー設定」をクリック
- 「ボックスメニュー」をクリック
- 「お好きな色」に設定
- 「公開」をクリック
設定項目を見てもらえばわかるとおり、ざっくりとしたカラー設定しかできません。
ただボーダー色はショートコードでは設定できないので、ここで設定することになります。
AFFINGER6の「ファビコン」の設定
![ファビコンを設定する前](https://toach.click/images/affinger6-guide_4-19_0007.webp)
![ファビコンを設定した後](https://toach.click/images/affinger6-guide_4-19_0008.webp)
ファビコンはブラウザのサイトタイトルの横に表示するアイコンのことです。簡単に登録できますし、設置することでのメリットのほうが多いので設定をオススメします。
![ファビコンの設定手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-19_0001.webp)
![ファビコンの設定手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-19_0002.webp)
![ファビコンの設定手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-19_0003.webp)
![ファビコンの設定手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-19_0004.webp)
![ファビコンの設定手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-19_0005.webp)
![ファビコンの設定手順6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-19_0006.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「サイト基本情報」をクリック
- 「サイトアイコンを選択」をクリック
- 「画像」を選んで「選択」をクリック
- 「切り抜き」をクリック
- 「公開」をクリック
AFFINGER6の「スマホ用」の設定
ハンバーガーメニューの色変更の方法
![ハンバーガーメニューの色変更前](https://toach.click/images/affinger6-guide_4-23-1_0005.webp)
![ハンバーガーメニューの色変更後](https://toach.click/images/affinger6-guide_4-23-1_0006.webp)
![スライドメニューの色変更前](https://toach.click/images/affinger6-guide_4-23-1_0007.webp)
![スライドメニューの色変更後](https://toach.click/images/affinger6-guide_4-23-1_0008.webp)
![ハンバーガーメニューの色とスライドメニューの色を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-1_0001.webp)
![ハンバーガーメニューの色とスライドメニューの色を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-1_0002.webp)
![ハンバーガーメニューの色とスライドメニューの色を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-1_0003.webp)
![ハンバーガーメニューの色とスライドメニューの色を変更する手順4から8。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-1_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「ー各メニュー設定」クリック
- 「スマホメニュー(スマホヘッダー)」クリック
- 「スライドメニューアイコン色」を「#a5a5a5」に変更
- 「スライドメニュー内のテキストリンク色」を「#a8afc9」に変更
- 「スライドメニュー内リンクのボーダー色」を「#cecacc」に変更
- 「スライドメニュー内背景色」を「#f6f2f4」に変更
- 「公開」をクリック
ハンバーガーメニューの位置の変更&検索ボタン設置
![ハンバーガーメニューの位置の変更と検索ボタン設置する前](https://toach.click/images/affinger6-guide_4-23-2_0001.webp)
![ハンバーガーメニューの位置の変更と検索ボタン設置した後](https://toach.click/images/affinger6-guide_4-23-2_0002.webp)
![ハンバーガーメニューの位置の変更と検索ボタン設置する手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-2_0003.webp)
![ハンバーガーメニューの位置の変更と検索ボタン設置する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-2_0004.webp)
![ハンバーガーメニューの位置の変更と検索ボタン設置する手順4と5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-2_0005.webp)
![ハンバーガーメニューの位置の変更と検索ボタン設置する手順6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-2_0006.webp)
- 「AFFINGER管理」をクリック
- 「メニュー 」をクリック
- 「スマホスライドメニュー 」をクリック
- 「メニューの位置 」で表示したい位置を選択
- 「スマホヘッダーに検索アイコンを追加」にチェック
- 「 Save 」をクリック
スマホフッターメニューの作成方法
![フッターメニューを作成する前](https://toach.click/images/affinger6-guide_4-23-3_0009.webp)
![フッターメニューを作成した後](https://toach.click/images/affinger6-guide_4-23-3_0010.webp)
![フッターメニューを作成する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0001.webp)
![フッターメニューを作成する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0002.webp)
![フッターメニューを作成する手順3から5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0003.webp)
![フッターメニューを作成する手順6から9。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0004.webp)
![フッターメニューを作成する手順10と11。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0005.webp)
- 「外観」にカーソルをのせ「メニュー 」をクリック
- 「新しいメニューを作成しましょう」をクリック
- 「メニュー名」に「スマホフッターメニュー」と入力
- 「スマホフッターメニュー」にチェック
- 「メニューを作成」をクリック
- 「カスタムリンク」をクリック
- 「URL」に「#」を入力
- リンク文字列に「ホーム」と入力
- 「メニューに追加」をクリック
- おなじ手順で「お問い合わせ」メニューを作成
- 「メニューを保存」をクリック
![フッターメニューを作成する手順12と13。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0006.webp)
![フッターメニューを作成する手順14。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0007.webp)
![フッターメニューを作成する手順15と16。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-3_0008.webp)
- 「AFFINGER設定」をクリック
- 「メニュー」をクリック
- 「その他のスマホメニュー」をクリック
- 「スマホフッターメニューを表示する」にチェック
- 「Save」をクリック
フッターメニューにアイコンを表示
![フッタメニューにアイコンを表示させる前](https://toach.click/images/affinger6-guide_4-23-4_0009.webp)
![フッタメニューにアイコンを表示させた後](https://toach.click/images/affinger6-guide_4-23-4_0010.webp)
ここでは「ホーム」と「お問い合わせ」メニューにアイコンを表示する方法を紹介しています。
![フッターメニューのテキストにアイコンを表示させる手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0001.webp)
![フッターメニューのテキストにアイコンを表示させる手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0002.webp)
![フッターメニューのテキストにアイコンを表示させる手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0003.webp)
![フッターメニューのテキストにアイコンを表示させる手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0004.webp)
![フッターメニューのテキストにアイコンを表示させる手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0005.webp)
![フッターメニューのテキストにアイコンを表示させる手順6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0006.webp)
- 「外観」にカーソルをのせ「メニューをクリック」
- 「編集するメニューを選択」でフッターメニューを選択
- 「ホーム」をクリック
- 「ナビゲーションラベル」に以下のタグを貼り付け
<i class="fa fa-home" aria-hidden="true"></i> ホーム
- 「お問い合わせを」の「ナビゲーションラベル」に以下のタグを貼り付け
<i class="fa fa-envelope" aria-hidden="true"></i> お問い合わせ
- 「メニューを保存」をクリック
![フッターメニューのテキストにアイコンを表示させる手順7と8。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0007.webp)
![フッターメニューのテキストにアイコンを表示させる手順9と10。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0008.webp)
- 「AFFINGER管理」をクリック
- 「その他」をクリック
- 「FontAwesomeIcons4.7.0の読み込み」にチェック
- 「Save」をクリック
他のアイコンを使う方法
![使いたいアイコンを追加する手順1から3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0011.webp)
![使いたいアイコンを追加する手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0012.webp)
![使いたいアイコンを追加する手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-4_0013.webp)
他のアイコンを使いたいときは、以下のサイトから希望するアイコンを選択します。
- 希望するアイコンを英単語で検索
ホームならhome、電話ならphone - アイコンが一覧で表示される
- 使いたいアイコンをクリック
- タグをコピー
- ナビゲーションラベルに貼り付け
※タグの後にテキストを入れるのを忘れないにする
なお、紹介した方法はFont Awesome4.7(少し古いバーション)を使ったものになります。
新しいバージョンのFont Awesomeは会員登録が必要だったりと少し手間がかかるので、ここでの紹介は省略してます。
興味があれば詳しく解説してくれてるナイガイ、ナイスガール達がいるので調べてみてください。
フッターメニューの色を変更
![フッターメニューの背景色を変更する前](https://toach.click/images/affinger6-guide_4-23-5_0005.webp)
![フッターメニューの背景色を変更した後](https://toach.click/images/affinger6-guide_4-23-5_0006.webp)
![フッターメニューの背景色を変更する手順1。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-5_0001.webp)
![フッターメニューの背景色を変更する手順2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-5_0002.webp)
![フッターメニューの背景色を変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-5_0003.webp)
![フッターメニューの背景色を変更する手順4から6。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-5_0004.webp)
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「-各メニュー設定」をクリック
- 「スマホフッターメニュー」をクリック
- 「文字色」を「#898b9e」に変更
- 「背景色」を「#e6e8f4」に変更
- 「公開」をクリック
スマホの文字サイズを調整
![スマホの文字サイズを変更する前](https://toach.click/images/affinger6-guide_4-23-6_0005.webp)
![スマホの文字サイズを変更した後](https://toach.click/images/affinger6-guide_4-23-6_0006.webp)
![スマホの文字サイズを変更する手順1と2。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-6_0001.webp)
![スマホの文字サイズを変更する手順3。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-6_0002.webp)
![スマホの文字サイズを変更する手順4。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-6_0003.webp)
![スマホの文字サイズを変更する手順5。詳細は吹き出しボックスに記載](https://toach.click/images/affinger6-guide_4-23-6_0004.webp)
- 「AFFINGER管理」をクリック
- 「全体設定」をクリック
- 「フォントサイズ」をクリック
- 「スマホ(~599px)閲覧時」の「基本(Pタグ 他)」を「16」に変更
- 「Save」をクリック
コメント