こんな悩みありませんか?
- あれ?ヘッダーの色変えたはずなのに変わらないぞ…
- ん?トップページにスライダーってどうやって表示させるんだ??
- カテゴリをタブで切り替えたいのにできない…
- アフィンガーのカスタマイズ難しすぎへんか?!
この記事を読み終わる頃にはAFFINGER6を自由自在に操っていることでしょう
この記事(AFFINGER6のカスタマイズ1)と「AFFINGER6のカスタマイズ2」を通して、次のようなブログを作りながらAFFINGER6の基本的な機能や操作方法を覚えていきます。
このデザインは、このまま使っても、これをベースに色やレイアウトを変えて使っても問題ないです。自由に使ってください。
AFFINGER6の使い方を覚えるのが目的なので、以降の説明で色指定をしていますが、カラーチャートなどを使って好きな色にしていただいて問題ありません。
カスタマイズを始める前の設定
「カラーとデザイン」をリセットする
カスタマイズをしやすくするため「カラーとデザイン」をリセットします。寝癖を直してから髪セットしたほうがしやすいのと同じようなもんだと思ってください。
- 「AFFINGER管理」をクリック
- 「全体設定」をクリック
- 「カラーパターン」の「リセット(カラー未設定)」を選択
- 「デザインパターン」の「リセット(設定なしカラー含む)」を選択
- 「Save」をクリック
「簡単設定を使用しない」にする
簡単設定なんて生ぬるいものは、こちらから三行半をつけてやりましょう。というよりも簡単設定とはいうものの、これのせいで逆に複雑になるので「使用しない」に設定します。
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「全体カラー設定」をクリック
- 「簡単設定を使用する」の「使用しない」を選択
使用しないにチェックされていれば次へ進む - 「公開」をクリック
ようやくここからAFFINGER6のカスタマイズをしていきます。まずはヘッダー周辺の設定をしていきましょう。
「ヘッダー」の設定
ヘッダーの背景色・背景画像を設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「ヘッダーエリア」をクリック
- 「背景色」を「#f9f4f4」に変更
- 「背景色(グラデーション)」を「#e3e6f4」に変更
- 「ヘッダー背景の横幅を100%にする」にチェック
- 「グラデーションの方向を横向きにする」にチェック
- 「公開」をクリック
背景を画像にしたいときは「ヘッダーエリア背景画像」で選択してください。
ヘッダータイトルの文字色・ロゴ画像の設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「ロゴ画像/サイトのタイトル」をクリック
- 「サイトタイトルとキャッチフレーズの文字色」を「#a8aec1」に変更
- 「スマホヘッダーのタイトル色」を「#a8aec1」に変更
- 「公開」をクリック
タイトルを画像にする場合は、「ロゴ画像」のすぐ下の「画像を選択」にて設定します。
スマホで見たさいにもロゴ画像を表示する場合は、「スマホロゴ画像」の「画像設定」にておこなってください。
サイトタイトルを中心に寄せる設定
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」の「PCのみ」の「ヘッダーを分割しない」にチェック
- 「Save」をクリック
- 「ヘッダーエリアをセンタリング」にチェック
- 「Save」をクリック
サイトタイトル・キャッチコピー位置を反転
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」の「サイト名とキャッチフレーズを上下反対にする(フッター連動)」にチェック
- 「Save」をクリック
キャッチフレーズの削除(非表示)設定
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」項目の「PCのみ」の「ヘッダー(及びフッター)にキャッチフレーズを表示しない」にチェック
- 「Save」をクリック
AFFINGER6のキャッチフレーズの非表示は、人の目に見えなくなるだけで、titleタグとしてHTML内では次の画像のように表示されたままになっています。
つまり「Just another WordPress site」のまま非表示設定にすると、ブログトップが検索結果に表示されたさい、以下のように表示される可能性があります。
なので非表示にするとしても、キャッチフレーズはしっかりと書くようにしましょう。
キャッチフレーズは次の手順で記入することができます。
- 「設定」にカーソルをのせ「一般」をクリック
もしくは次の手順で、キャッチフレーズをtitleタグに含めないようにします。
- 「AFFINGER管理」をクリック
- 「SEO」をクリック
- 「トップタイトルを書き替え(ここに記述したタイトルが優先されます)」にサイト名を入力
- 「Save」をクリック
ちなみに「キャッチフレーズ│サイト名」として出力されるのは、トップページのみです。
個別ページでは「記事タイトル│サイトタイトル」がtitleタグとして出力されるようになっています。
タイトル背景の上下幅の設定
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーエリア」の「PCのみ」の「PCヘッダーの高さ(px)」に「120」と記入
「グローバルナビゲーション」の設定
背景色・ボーダー色の変更
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「-各メニュー設定」をクリック
- 「PCヘッダーメニュー」をクリック
- 「背景色」を「#e3e6f3」に変更
- 「背景色(グラデーション)」を「#f9f4f4」に変更
- 「ボーダー上下色」を「#e3e6f3」に変更
- 「ボーダー左右色」を「#e3e6f3」に変更
- 「ボーダー右色」を「#e3e6f3」に変更
- 「文字色」を「#99a3c1」に変更
- 「公開」をクリック
幅を100%にする・中心に寄せる
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「-各メニュー設定」をクリック
- 「PCヘッダーメニュー」をクリック
- 「メニューをセンター寄せにする」にチェック
- 「メニューの横幅を100%にする」にチェック
- 「公開」をクリック
「トップページ背景」の設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「背景色」をクリック
- 背景色の「色を選択」を「#f2f0f4」に変更
- 「公開」をクリック
「カテゴリー」の設定
背景色・文字色
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「見出しタグ(hx)/テキスト」をクリック
- 「カテゴリ」をクリック
- 「背景色」を「#e8eaf2」に変更
- 「文字色」を「#99a3c1」に変更
- 「公開」をクリック
「ヘッダー下領域」の設定
ヒーローヘッダーを作る
はじめは表示するものもないと思いますが、自信のある商品や見てもらいたいコンテンツなどができたさいには、ヒーローヘッダーを活用することをオススメします。
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「ヘッダー画像」をクリック
- 「ヘッダー画像エリア」の「ヘッダー画像エリア最低の高さ(px)」に「400」と入力
高さは300~400pxぐらいがおすすめ - 「スマホ(599px以下)」に「180」と入力
- 「ヘッダー画像の後ろに配置する背景画像です」の「画像を選択」をクリック
- 「メディアライブラリ」の「header-img-ukidaira.png」を選択
- 「画像を選択」をクリック
- 「背景画像の横位置」の「真ん中」を選択
- 「背景画像の縦位置」の「真ん中」を選択
- 「背景画像を幅100%のレスポンシブにする」にチェック
- 「公開」をクリック
- 「AFFINGER管理」をクリック
- 「ヘッダー」をクリック
- 「ヘッダーコンテンツ設定」をクリック
- なにも記入されていない「コンテンツ内」をクリック
- キーボードの「Shift+Alt+z」を同時に押す
押すと画像のようなスタイル設定バーが表示される - 「タグ」>「テキストパーツ」>「カスタムフォント」と進み「白影」を選択
※選択後、どこもクリックせずに次に進む - 「タグ」>「ショートコード補助」>「定型文」と進み「\バンザイ/」を選択
※別の文章にしたい場合は「\バンザイ/」を削除して別の文字を入力 - いま入力されている文章の下に移動
- 「タグ」>「カスタムボタン」>「ノーマル」と進み「詳しくはコチラ(ブルー)」を選択
- 入力された文章の中にある「url=”#”」の#に飛ばしたいURLを記入
ボタン背景色はurl=”#”のすぐ下のbgcolor=”#39BE5″にて変更可 - 「コンテンツ全体を上下左右を中央寄せ(display:flex)にする」にチェック
白影フォントで文字が見えづらいときは「背景を暗くする」にもチェック - 「Save」をクリック
白影フォントで文字が見えづらくなる場合は、「背景を暗くする」にチェックを入れると見やすくなります。
その他にもヘッダーコンテンツ設定では、記事のように文章を書いたり、ボタンの配置やレイアウトの設定などできるようになっています。
カスタマイズ性が高いところなので、AFFINGER6の設定に慣れてきたら、いろいろ試してみるのも面白いと思います。
ヘッダーカードの設定をする
- 「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」という比率にしています。
「ヘッダーカード」画像がぼやける場合
「アップロード」するさいのサイズが「フルサイズ」になっていないとボヤけてしまうことがあります。
まずはサイズがフルサイズになっているか確認してみてください。
それでもボヤける場合、上記で紹介しているおすすめ画像サイズになっているか確認してみてください。
おすすめサイズになっているのにぼやける場合は、メガネをかけ忘れてたりしていないか確認してみてください。
サムネイルスライドショーの設定
- 「AFINGER管理」をクリック
- 「ヘッダー下 / おすすめ」をクリック
- 「サムネイルスライドショー」をクリック
- 「フロントページ」を選択
投稿ページなどにも表示する場合は「全ページ」を選択 - 「画像を角丸にする」のチェックを外す
- 「画像に影をつける」のチェックを外す
- 「Save」をクリック
サムネスライドショーはブログの見た目がリッチになるので表示させてる人も多いです。
ただ表示させるとブログの表示スピードが少し落ちるので、サムネスライドショーをつけるのが昔からの夢とかじゃなければ、表示は要検討したいところです。
「タブ式 カテゴリー」の設定
- 「投稿」にカーソルをのせ「カテゴリー」をクリック
- 「カテゴリーA」「カテゴリーB」「カテゴリーC」「親カテゴリー」のIDを控える
- 「AFFINGER管理」をクリック
- 「トップページ」をクリック
- 「タブ式 カテゴリ一覧」をクリック
- 「タブ式 カテゴリ一覧をフロントページに表示する」にチェック
- 「カテゴリA~D」に「カテゴリA~DのID」を入力
- 「タブA~D(背景色)」を変更
- 「タブA」→「#a8aec0」
- 「タブB」→「#bfada6」
- 「タブC」→「#acbf80」
- 「タブD」→「#a6bfb9」
- 「タブ文字色」を「#ffffff」に変更
- 「デフォルト」を選択
- 「Save」をクリック
本格的な運用をするさいには、表示させたいカテゴリの ID を入力するようにしてください。
「記事一覧」の設定
サムネイルの枠線の設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「オプション(その他)」をクリック
- 「サムネイル画像」をクリック
- 「一覧のサムネイル画像の枠線」をお好きな色に変更
- 「公開」をクリック
サンプルブログではサムネイルの枠線は非表示にしているので、色の指定はしていません。
サムネイル画像を大きくする設定
その他のサムネイル画像設定
- 「AFFINGER管理」をクリック
- 「全体設定」をクリック
- 「サムネイル画像設定」をクリック
- 「記事一覧」の「PC(960px以上)のサムネイル画像を大きくする」にチェック
- 「Save」をクリック
その他のサムネイル画像設定
「サムネイル画像設定」では以下の設定もできるようになっています。
- サムネイルの非表示
- サムネイル画像を更に大きく
- サムネイルをポラロイド風にする
- サムネイルにセロテープをつける
- サムネイルの位置を変更する
- サムネイルの角を丸くする
記事一覧の記事を区切る線の設定
破線にするにチェック
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「記事一覧の区切りボーダー」をクリック
- 「ボーダーカラー」で色を変更
- 「公開」をクリック
「破線にする」にチェックを入れると点線になります。
「サイドバー」の設定
サイドバーの背景設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「サイドバー」をクリック
- 「サイドの文字色」を「#8b8fa0」に変更
- 「サイドバーウィジェットエリアの背景色」を「#ffffff」に変更
サイドバーの見出しデザイン設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「見出しタグ(hx)/テキスト」をクリック
- ウィジェットタイトル(サイドバー)をクリック
- 「文字色」を「#99a2c0」に変更
- 「背景色」を「#e6e8ef」に変更
- 「ボーダー色」を「#f6f2f4」に変更
- 「ウィジェットタイトルの基本スタイル」で「なし」を選択
- 「公開」をクリック
サイドバーの位置を変更する
- 「AFINGER管理」をクリック
- 「全体設定」をクリック
- 「サイト全体のレイアウト」をクリック
- 「サイドバーを左にする」にチェック
- 「Save」をクリック
左側に移動はできますが、よっぽどの理由がなければ右のほうがいいです。
なぜかというと、パソコンを操作しているときってマウスは右側にあるし、マウスカーソルも基本的には右寄りにあります。
なので右側にサイドバーを置いといたほうが、クリックしやすいし、されやすいんです。
そういう理由でどんなサイトも基本的には右側にメニューを配置するのが基本になります。
「フッター」の設定
フッター文字色・背景色の設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「基本エリア設定」をクリック
- 「フッターエリア」をクリック
- 「フッター文字色」を「#a8aec1」に変更
- 「背景色」を「#e3e6f4」に変更
- 「背景色(グラデーション上部)」「#f9f4f4」に変更
- 「フッターの背景色を100%にする」にチェック
- 「グラデーションの方向を横向きにする」にチェック
- 「公開」をクリック
「トップに戻るボタン」の設定
トップへ戻るボタンの背景色
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「オプション(その他)」をクリック
- 「TOPに戻るボタン」をクリック
- 「背景色」を「#c0c0ce」に変更
- 「公開」をクリック
「プロフィール」の設定
プロフ画像・背景色・ボタンを設定
- 「外観」にカーソルをのせ「カスタマイズ」をクリック
- 「オプション(その他)」をクリック
- 「プロフィールカード」をクリック
- 「アバター画像(プロフィールカード)」で「icon-ukidaira.png」を選択
- 「背景色(プロフィールカード)」を「#f8f3f4」に変更
- 「テキスト色(プロフィールカード)」を「#7f7f7f」に変更
- 「ボタンURL」に「#」と入力
- 「ボタンテキスト」に「プロフィール詳細」と入力
- 「ボタン上部背景色(プロフィールカード)」を「#a8aebf」に変更
- 「公開」をクリック
ちなみにここで使っているアイコン画像は僕が3秒で作ったやる気ペンギンくんです。ライセンスフリーなのでご自由にお使いください。
コメント