AFFINGER6のカスタマイズ１

1. 「AFFINGER管理」をクリック
2. 「全体設定」をクリック
3. 「カラーパターン」の「リセット（カラー未設定）」を選択
4. 「デザインパターン」の「リセット（設定なしカラー含む）」を選択
5. 「Save」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「全体カラー設定」をクリック
3. 「簡単設定を使用する」の「使用しない」を選択
   使用しないにチェックされていれば次へ進む
4. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「基本エリア設定」をクリック
3. 「ヘッダーエリア」をクリック
4. 「背景色」を「#f9f4f4」に変更
5. 「背景色（グラデーション）」を「#e3e6f4」に変更
6. 「ヘッダー背景の横幅を100%にする」にチェック
7. 「グラデーションの方向を横向きにする」にチェック
8. 「公開」をクリック

背景を画像にしたいときは「ヘッダーエリア背景画像」で選択してください。

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「ロゴ画像／サイトのタイトル」をクリック
3. 「サイトタイトルとキャッチフレーズの文字色」を「#a8aec1」に変更
4. 「スマホヘッダーのタイトル色」を「#a8aec1」に変更
5. 「公開」をクリック

タイトルを画像にする場合は、「ロゴ画像」のすぐ下の「画像を選択」にて設定します。

スマホで見たさいにもロゴ画像を表示する場合は、「スマホロゴ画像」の「画像設定」にておこなってください。

1. 「AFFINGER管理」をクリック
2. 「ヘッダー」をクリック
3. 「ヘッダーエリア」の「PCのみ」の「ヘッダーを分割しない」にチェック
4. 「Save」をクリック
5. 「ヘッダーエリアをセンタリング」にチェック
6. 「Save」をクリック

手順3のチェック後にSaveを押さないと、手順5のチェックはできないのでご注意ください。

1. 「AFFINGER管理」をクリック
2. 「ヘッダー」をクリック
3. 「ヘッダーエリア」の「サイト名とキャッチフレーズを上下反対にする（フッター連動）」にチェック
4. 「Save」をクリック

1. 「AFFINGER管理」をクリック
2. 「ヘッダー」をクリック
3. 「ヘッダーエリア」項目の「PCのみ」の「ヘッダー（及びフッター）にキャッチフレーズを表示しない」にチェック
4. 「Save」をクリック

1. 「AFFINGER管理」をクリック
2. 「ヘッダー」をクリック
3. 「ヘッダーエリア」の「PCのみ」の「PCヘッダーの高さ（px）」に「120」と記入

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「-各メニュー設定」をクリック
3. 「PCヘッダーメニュー」をクリック
4. 「背景色」を「#e3e6f3」に変更
5. 「背景色（グラデーション）」を「#f9f4f4」に変更
6. 「ボーダー上下色」を「#e3e6f3」に変更
7. 「ボーダー左右色」を「#e3e6f3」に変更
8. 「ボーダー右色」を「#e3e6f3」に変更
9. 「文字色」を「#99a3c1」に変更
10. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「-各メニュー設定」をクリック
3. 「PCヘッダーメニュー」をクリック
4. 「メニューをセンター寄せにする」にチェック
5. 「メニューの横幅を100％にする」にチェック
6. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「基本エリア設定」をクリック
3. 「背景色」をクリック
4. 背景色の「色を選択」を「#f2f0f4」に変更
5. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「見出しタグ（hx）/テキスト」をクリック
3. 「カテゴリ」をクリック
4. 「背景色」を「#e8eaf2」に変更
5. 「文字色」を「#99a3c1」に変更
6. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「ヘッダー画像」をクリック
3. 「ヘッダー画像エリア」の「ヘッダー画像エリア最低の高さ（px）」に「400」と入力
   高さは300～400pxぐらいがおすすめ
4. 「スマホ（599px以下）」に「180」と入力
5. 「ヘッダー画像の後ろに配置する背景画像です」の「画像を選択」をクリック
6. 「メディアライブラリ」の「header-img-ukidaira.png」を選択
7. 「画像を選択」をクリック
8. 「背景画像の横位置」の「真ん中」を選択
9. 「背景画像の縦位置」の「真ん中」を選択
10. 「背景画像を幅100%のレスポンシブにする」にチェック
11. 「公開」をクリック

12. 「AFFINGER管理」をクリック
13. 「ヘッダー」をクリック
14. 「ヘッダーコンテンツ設定」をクリック
15. なにも記入されていない「コンテンツ内」をクリック
16. キーボードの「Shift＋Alt＋ｚ」を同時に押す
    押すと画像のようなスタイル設定バーが表示される
17. 「タグ」＞「テキストパーツ」＞「カスタムフォント」と進み「白影」を選択
    ※選択後、どこもクリックせずに次に進む
18. 「タグ」＞「ショートコード補助」＞「定型文」と進み「＼バンザイ／」を選択
    ※別の文章にしたい場合は「＼バンザイ／」を削除して別の文字を入力
19. いま入力されている文章の下に移動
20. 「タグ」＞「カスタムボタン」＞「ノーマル」と進み「詳しくはコチラ（ブルー）」を選択
21. 入力された文章の中にある「url=”#”」の#に飛ばしたいURLを記入
    ボタン背景色はurl=”#”のすぐ下のbgcolor=”#39BE5″にて変更可
22. 「コンテンツ全体を上下左右を中央寄せ（display:flex）にする」にチェック
    白影フォントで文字が見えづらいときは「背景を暗くする」にもチェック
23. 「Save」をクリック

白影フォントで文字が見えづらくなる場合は、「背景を暗くする」にチェックを入れると見やすくなります。

その他にもヘッダーコンテンツ設定では、記事のように文章を書いたり、ボタンの配置やレイアウトの設定などできるようになっています。

カスタマイズ性が高いところなので、AFFINGER6の設定に慣れてきたら、いろいろ試してみるのも面白いと思います。

1. 「AFINGER管理」をクリック
2. 「ヘッダー下 / おすすめ」をクリック
3. 「アップロード」をクリック
4. 「メディアライブラリ」の「ukidaira-hk4-255-127.png」を選択して「投稿に挿入」をクリック
5. 「リンク先URL」に「#」を記入
6. 「Save」をクリック

ここでは画像のみを表示させていますが、テキストも合わせて表示する場合は「テキスト：」「サブテキスト」に入力してください。

ここでは4枚表示させていますが、1~3枚表示させたい場合は、表示させたい分だけ入力するようにします。

なお、枚数別おすすめの画像サイズは以下の通りです。

4枚「縦255px　横127px」
3枚「縦343px　横127px」
2枚「縦520px　横259px」
1枚「縦110px　横1050px」

「ヘッダーカード」に1枚設定することはあまりないと思いますが、あるとすれば横長のバナー的な使い方になると思うので「縦110px　横1050px」という比率にしています。

「アップロード」するさいのサイズが「フルサイズ」になっていないとボヤけてしまうことがあります。

まずはサイズがフルサイズになっているか確認してみてください。

それでもボヤける場合、上記で紹介しているおすすめ画像サイズになっているか確認してみてください。

おすすめサイズになっているのにぼやける場合は、メガネをかけ忘れてたりしていないか確認してみてください。

1. 「AFINGER管理」をクリック
2. 「ヘッダー下 / おすすめ」をクリック
3. 「サムネイルスライドショー」をクリック
4. 「フロントページ」を選択
   投稿ページなどにも表示する場合は「全ページ」を選択
5. 「画像を角丸にする」のチェックを外す
6. 「画像に影をつける」のチェックを外す
7. 「Save」をクリック

サムネスライドショーはブログの見た目がリッチになるので表示させてる人も多いです。

ただ表示させるとブログの表示スピードが少し落ちるので、サムネスライドショーをつけるのが昔からの夢とかじゃなければ、表示は要検討したいところです。

1. 「投稿」にカーソルをのせ「カテゴリー」をクリック
2. 「カテゴリーA」「カテゴリーB」「カテゴリーC」「親カテゴリー」のIDを控える
3. 「AFFINGER管理」をクリック
4. 「トップページ」をクリック
5. 「タブ式 カテゴリ一覧」をクリック
6. 「タブ式 カテゴリ一覧をフロントページに表示する」にチェック
7. 「カテゴリA～D」に「カテゴリA～DのID」を入力
8. 「タブA～D（背景色）」を変更
   • 「タブA」→「#a8aec0」
   • 「タブB」→「#bfada6」
   • 「タブC」→「#acbf80」
   • 「タブD」→「#a6bfb9」
9. 「タブ文字色」を「#ffffff」に変更
10. 「デフォルト」を選択
11. 「Save」をクリック

本格的な運用をするさいには、表示させたいカテゴリの ID を入力するようにしてください。

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「オプション（その他）」をクリック
3. 「サムネイル画像」をクリック
4. 「一覧のサムネイル画像の枠線」をお好きな色に変更
5. 「公開」をクリック

サンプルブログではサムネイルの枠線は非表示にしているので、色の指定はしていません。

1. 「AFFINGER管理」をクリック
2. 「全体設定」をクリック
3. 「サムネイル画像設定」をクリック
4. 「記事一覧」の「PC（960px以上）のサムネイル画像を大きくする」にチェック
5. 「Save」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「基本エリア設定」をクリック
3. 「記事一覧の区切りボーダー」をクリック
4. 「ボーダーカラー」で色を変更
5. 「公開」をクリック

「破線にする」にチェックを入れると点線になります。

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「基本エリア設定」をクリック
3. 「サイドバー」をクリック
4. 「サイドの文字色」を「#8b8fa0」に変更
5. 「サイドバーウィジェットエリアの背景色」を「#ffffff」に変更

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「見出しタグ（hx）/テキスト」をクリック
3. ウィジェットタイトル（サイドバー）をクリック
4. 「文字色」を「#99a2c0」に変更
5. 「背景色」を「#e6e8ef」に変更
6. 「ボーダー色」を「#f6f2f4」に変更
7. 「ウィジェットタイトルの基本スタイル」で「なし」を選択
8. 「公開」をクリック

1. 「AFINGER管理」をクリック
2. 「全体設定」をクリック
3. 「サイト全体のレイアウト」をクリック
4. 「サイドバーを左にする」にチェック
5. 「Save」をクリック

左側に移動はできますが、よっぽどの理由がなければ右のほうがいいです。

なぜかというと、パソコンを操作しているときってマウスは右側にあるし、マウスカーソルも基本的には右寄りにあります。

なので右側にサイドバーを置いといたほうが、クリックしやすいし、されやすいんです。

そういう理由でどんなサイトも基本的には右側にメニューを配置するのが基本になります。

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「基本エリア設定」をクリック
3. 「フッターエリア」をクリック
4. 「フッター文字色」を「#a8aec1」に変更
5. 「背景色」を「#e3e6f4」に変更
6. 「背景色（グラデーション上部）」「#f9f4f4」に変更
7. 「フッターの背景色を100％にする」にチェック
8. 「グラデーションの方向を横向きにする」にチェック
9. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「オプション（その他）」をクリック
3. 「TOPに戻るボタン」をクリック
4. 「背景色」を「#c0c0ce」に変更
5. 「公開」をクリック

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「オプション（その他）」をクリック
3. 「プロフィールカード」をクリック
4. 「アバター画像（プロフィールカード）」で「icon-ukidaira.png」を選択
5. 「背景色（プロフィールカード）」を「#f8f3f4」に変更
6. 「テキスト色（プロフィールカード）」を「#7f7f7f」に変更
7. 「ボタンURL」に「#」と入力
8. 「ボタンテキスト」に「プロフィール詳細」と入力
9. 「ボタン上部背景色（プロフィールカード）」を「#a8aebf」に変更
10. 「公開」をクリック

ちなみにここで使っているアイコン画像は僕が3秒で作ったやる気ペンギンくんです。ライセンスフリーなのでご自由にお使いください。