MENU
カテゴリー

AFFINGER6のカスタマイズ1

こんな悩みありませんか?

  1. あれ?ヘッダーの色変えたはずなのに変わらないぞ…
  2. ん?トップページにスライダーってどうやって表示させるんだ??
  3. カテゴリをタブで切り替えたいのにできない…
  4. アフィンガーのカスタマイズ難しすぎへんか?!

この記事を読み終わる頃にはAFFINGER6を自由自在に操っていることでしょう

目次

この記事(AFFINGER6のカスタマイズ1)と「AFFINGER6のカスタマイズ2」を通して、次のようなブログを作りながらAFFINGER6の基本的な機能や操作方法を覚えていきます。

カスタマイズ後のブログのデザインイメージ

このデザインは、このまま使っても、これをベースに色やレイアウトを変えて使っても問題ないです。自由に使ってください。

AFFINGER6の使い方を覚えるのが目的なので、以降の説明で色指定をしていますが、カラーチャートなどを使って好きな色にしていただいて問題ありません。

カスタマイズを始める前の設定

「カラーとデザイン」をリセットする

カスタマイズをしやすくするため「カラーとデザイン」をリセットします。寝癖を直してから髪セットしたほうがしやすいのと同じようなもんだと思ってください。

カラーをデザインをリセットする手順1と2。詳細は吹き出しボックスに記載
カラーとデザインをリセットする手順3と4。詳細は吹き出しボックスに記載
カラーとデザインをリセットする手順5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「全体設定」をクリック
  3. 「カラーパターン」の「リセット(カラー未設定)」を選択
  4. 「デザインパターン」の「リセット(設定なしカラー含む)」を選択
  5. 「Save」をクリック

「簡単設定を使用しない」にする

簡単設定なんて生ぬるいものは、こちらから三行半をつけてやりましょう。というよりも簡単設定とはいうものの、これのせいで逆に複雑になるので「使用しない」に設定します。

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

ようやくここからAFFINGER6のカスタマイズをしていきます。まずはヘッダー周辺の設定をしていきましょう。

「ヘッダー」の設定

ヘッダーの背景色・背景画像を設定

ヘッダー背景色の変更前
ヘッダー背景色の変更後
ヘッダーの背景色と背景画像を設定する手順1。詳細は吹き出しボックスに記載
ヘッダーの背景色と背景画像を設定する手順2。詳細は吹き出しボックスに記載
ヘッダーの背景色と背景画像を設定する手順3。詳細は吹き出しボックスに記載
ヘッダーの背景色と背景画像を設定する手順4から7。詳細は吹き出しボックスに記載
ヘッダーの背景色と背景画像を設定する手順8。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「基本エリア設定」をクリック
  3. 「ヘッダーエリア」をクリック
  4. 「背景色」を「#f9f4f4」に変更
  5. 「背景色(グラデーション)」を「#e3e6f4」に変更
  6. 「ヘッダー背景の横幅を100%にする」にチェック
  7. 「グラデーションの方向を横向きにする」にチェック
  8. 「公開」をクリック

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

ヘッダータイトルの文字色・ロゴ画像の設定

ヘッダータイトルの文字色変更前
ヘッダータイトルの文字色変更後
ヘッダータイトルを設定する手順1。詳細は吹き出しボックスに記載
ヘッダータイトルを設定する手順2。詳細は吹き出しボックスに記載
ヘッダータイトルを設定する手順3から5。詳細は吹き出しボックスに記載

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

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

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

サイトタイトルを中心に寄せる設定

サイトタイトルを中心に寄せる前
サイトタイトルを中心に寄せた後
サイトタイトルを中心に寄せる手順1と2。詳細は吹き出しボックスに記載
サイトタイトルを中心に寄せる手順3。詳細は吹き出しボックスに記載
サイトタイトルを中心に寄せる手順4。詳細は吹き出しボックスに記載
サイトタイトルを中心に寄せる手順5。詳細は吹き出しボックスに記載
サイトタイトルを中心に寄せる手順6。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「ヘッダー」をクリック
  3. 「ヘッダーエリア」の「PCのみ」の「ヘッダーを分割しない」にチェック
  4. 「Save」をクリック
  5. 「ヘッダーエリアをセンタリング」にチェック
  6. 「Save」をクリック

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

サイトタイトル・キャッチコピー位置を反転

サイトタイトルとキャッチキャッチフレーズの位置を反転させる前
サイトタイトルとキャッチキャッチフレーズの位置を反転させた後
サイトタイトルとキャッチキャッチフレーズの位置を反転させる手順1と2。詳細は吹き出しボックスに記載
サイトタイトルとキャッチキャッチフレーズの位置を反転させる手順3。詳細は吹き出しボックスに記載
サイトタイトルとキャッチキャッチフレーズの位置を反転させる手順4。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「ヘッダー」をクリック
  3. 「ヘッダーエリア」の「サイト名とキャッチフレーズを上下反対にする(フッター連動)」にチェック
  4. 「Save」をクリック

キャッチフレーズの削除(非表示)設定

キャッチフレーズを非表示にする前
キャッチフレーズを非表示にした後
キャッチフレーズを非表示にする手順1と2。詳細は吹き出しボックスに記載
キャッチフレーズを非表示にする手順3。詳細は吹き出しボックスに記載
キャッチフレーズを非表示にする手順4。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「ヘッダー」をクリック
  3. 「ヘッダーエリア」項目の「PCのみ」の「ヘッダー(及びフッター)にキャッチフレーズを表示しない」にチェック
  4. 「Save」をクリック
注意

AFFINGER6のキャッチフレーズの非表示は、人の目に見えなくなるだけで、titleタグとしてHTML内では次の画像のように表示されたままになっています。

キャッチフレーズを非表示にしてもHTMLには表示されている状態の画像

つまり「Just another WordPress site」のまま非表示設定にすると、ブログトップが検索結果に表示されたさい、以下のように表示される可能性があります。

キャッチフレーズを非表示にしても検索結果に表示されてしまうイメージ画像

なので非表示にするとしても、キャッチフレーズはしっかりと書くようにしましょう。

キャッチフレーズは次の手順で記入することができます。

  1. 「設定」にカーソルをのせ「一般」をクリック

もしくは次の手順で、キャッチフレーズをtitleタグに含めないようにします。

  1. 「AFFINGER管理」をクリック
  2. 「SEO」をクリック
  3. 「トップタイトルを書き替え(ここに記述したタイトルが優先されます)」にサイト名を入力
  4. 「Save」をクリック

ちなみに「キャッチフレーズ│サイト名」として出力されるのは、トップページのみです。

個別ページでは「記事タイトル│サイトタイトル」がtitleタグとして出力されるようになっています。

タイトル背景の上下幅の設定

タイトル背景の上下幅を変更する前
タイトル背景の上下幅を変更した後
タイトル背景の上下幅を変更する手順1と2。詳細は吹き出しボックスに記載
タイトル背景の上下幅を変更する手順3。詳細は吹き出しボックスに記載
タイトル背景の上下幅を変更する手順4。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「ヘッダー」をクリック
  3. 「ヘッダーエリア」の「PCのみ」の「PCヘッダーの高さ(px)」に「120」と記入
グローバルメニューの背景色とボーダー色を変更する前
グローバルメニューの背景色とボーダー色を変更した後
グローバルメニューの背景色とボーダー色を変更する手順1。詳細は吹き出しボックスに記載
グローバルメニューの背景色とボーダー色を変更する手順2。詳細は吹き出しボックスに記載
グローバルメニューの背景色とボーダー色を変更する手順3。詳細は吹き出しボックスに記載
グローバルメニューの背景色とボーダー色を変更する手順4から10。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「-各メニュー設定」をクリック
  3. 「PCヘッダーメニュー」をクリック
  4. 「背景色」を「#e3e6f3」に変更
  5. 「背景色(グラデーション)」を「#f9f4f4」に変更
  6. 「ボーダー上下色」を「#e3e6f3」に変更
  7. 「ボーダー左右色」を「#e3e6f3」に変更
  8. 「ボーダー右色」を「#e3e6f3」に変更
  9. 「文字色」を「#99a3c1」に変更
  10. 「公開」をクリック
グローバルメニューの幅を中心に寄せる前
グローバルメニューの幅を中心に寄せた後
グローバルメニューの幅を100%にして中心に寄せる手順1。詳細は吹き出しボックスに記載
グローバルメニューの幅を100%にして中心に寄せる手順2。詳細は吹き出しボックスに記載
グローバルメニューの幅を100%にして中心に寄せる手順3。詳細は吹き出しボックスに記載
グローバルメニューの幅を100%にして中心に寄せる手順4から6。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「-各メニュー設定」をクリック
  3. 「PCヘッダーメニュー」をクリック
  4. 「メニューをセンター寄せにする」にチェック
  5. 「メニューの横幅を100%にする」にチェック
  6. 「公開」をクリック

「トップページ背景」の設定

トップページの背景色を変更する前
トップページの背景色を変更した後
トップページの背景色を変更する手順1。詳細は吹き出しボックスに記載
トップページの背景色を変更する手順2。詳細は吹き出しボックスに記載
トップページの背景色を変更する手順3。詳細は吹き出しボックスに記載
トップページの背景色を変更する手順4と5。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「基本エリア設定」をクリック
  3. 「背景色」をクリック
  4. 背景色の「色を選択」を「#f2f0f4」に変更
  5. 「公開」をクリック

「カテゴリー」の設定

背景色・文字色

カテゴリーの背景色と文字色を変更する前
カテゴリーの背景色と文字色を変更した後
カテゴリーの背景色と文字色を変更する手順1。詳細は吹き出しボックスに記載
カテゴリーの背景色と文字色を変更する手順2。詳細は吹き出しボックスに記載
カテゴリーの背景色と文字色を変更する手順3。詳細は吹き出しボックスに記載
カテゴリーの背景色と文字色を変更する手順4から6。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「見出しタグ(hx)/テキスト」をクリック
  3. 「カテゴリ」をクリック
  4. 「背景色」を「#e8eaf2」に変更
  5. 「文字色」を「#99a3c1」に変更
  6. 「公開」をクリック

「ヘッダー下領域」の設定

ヒーローヘッダーを作る

ヒーローヘッダー設定前
ヒーローヘッダー設定後

はじめは表示するものもないと思いますが、自信のある商品や見てもらいたいコンテンツなどができたさいには、ヒーローヘッダーを活用することをオススメします。

ヒーローヘッダーを作成する手順1。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順2。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順3から5。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順6。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順7。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順8から11。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「ヘッダー画像」をクリック
  3. 「ヘッダー画像エリア」の「ヘッダー画像エリア最低の高さ(px)」に「400」と入力
    高さは300~400pxぐらいがおすすめ
  4. 「スマホ(599px以下)」に「180」と入力
  5. 「ヘッダー画像の後ろに配置する背景画像です」の「画像を選択」をクリック
  6. 「メディアライブラリ」の「header-img-ukidaira.png」を選択
  7. 「画像を選択」をクリック
  8. 「背景画像の横位置」の「真ん中」を選択
  9. 「背景画像の縦位置」の「真ん中」を選択
  10. 「背景画像を幅100%のレスポンシブにする」にチェック
  11. 「公開」をクリック
ヒーローヘッダーを作成する手順12と13。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順14。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順15。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順16。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順17。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順18。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順19。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順20。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順21。詳細は吹き出しボックスに記載
ヒーローヘッダーを作成する手順22と23。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「ヘッダー」をクリック
  3. 「ヘッダーコンテンツ設定」をクリック
  4. なにも記入されていない「コンテンツ内」をクリック
  5. キーボードの「Shift+Alt+z」を同時に押す
    押すと画像のようなスタイル設定バーが表示される
  6. 「タグ」>「テキストパーツ」>「カスタムフォント」と進み「白影」を選択
    ※選択後、どこもクリックせずに次に進む
  7. 「タグ」>「ショートコード補助」>「定型文」と進み「\バンザイ/」を選択
    ※別の文章にしたい場合は「\バンザイ/」を削除して別の文字を入力
  8. いま入力されている文章の下に移動
  9. 「タグ」>「カスタムボタン」>「ノーマル」と進み「詳しくはコチラ(ブルー)」を選択
  10. 入力された文章の中にある「url=”#”」の#に飛ばしたいURLを記入
    ボタン背景色はurl=”#”のすぐ下のbgcolor=”#39BE5″にて変更可
  11. 「コンテンツ全体を上下左右を中央寄せ(display:flex)にする」にチェック
    白影フォントで文字が見えづらいときは「背景を暗くする」にもチェック
  12. 「Save」をクリック

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

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

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

ヘッダーカードの設定をする

ヘッダーカード表示前
ヘッダーカード表示後
ヘッダーカードを設定する手順1と2。詳細は吹き出しに記載
ヘッダーカードを設定する手順3。詳細は吹き出しに記載
ヘッダーカードを設定する手順4。詳細は吹き出しに記載
ヘッダーカードを設定する手順5。詳細は吹き出しに記載
ヘッダーカードを設定する手順6。詳細は吹き出しに記載
  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と2。詳細は吹き出しボックスに記載
サムネイルスライドショーを表示させる手順3。詳細は吹き出しボックスに記載
サムネイルスライドショーを表示させる手順4から6。詳細は吹き出しボックスに記載
サムネイルスライドショーを表示させる手順7。詳細は吹き出しボックスに記載
  1. 「AFINGER管理」をクリック
  2. 「ヘッダー下 / おすすめ」をクリック
  3. 「サムネイルスライドショー」をクリック
  4. 「フロントページ」を選択
    投稿ページなどにも表示する場合は「全ページ」を選択
  5. 「画像を角丸にする」のチェックを外す
  6. 「画像に影をつける」のチェックを外す
  7. 「Save」をクリック

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

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

「タブ式 カテゴリー」の設定

タブ式カテゴリーを表示させる前
タブ式カテゴリーを表示させた後
タブ式カテゴリーを表示させる手順1。詳細は吹き出しボックスに記載
タブ式カテゴリーを表示させる手順2。詳細は吹き出しボックスに記載
タブ式カテゴリーを表示させる手順3と4。詳細は吹き出しボックスに記載
タブ式カテゴリーを表示させる手順5。詳細は吹き出しボックスに記載
タブ式カテゴリーを表示させる手順6から11。詳細は吹き出しボックスに記載
  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 を入力するようにしてください。

「記事一覧」の設定

サムネイルの枠線の設定

記事一覧のサムネイルに枠線を表示させる手順4と5。詳細は吹き出しボックスに記載
記事一覧のサムネイルに枠線を表示させていない状態
記事一覧のサムネイルに枠線を表示させた状態
記事一覧のサムネイルに枠線を表示させる手順1。詳細は吹き出しボックスに記載
記事一覧のサムネイルに枠線を表示させる手順。詳細は吹き出しボックスに記載
記事一覧のサムネイルに枠線を表示させる手順3。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「サムネイル画像」をクリック
  4. 「一覧のサムネイル画像の枠線」をお好きな色に変更
  5. 「公開」をクリック

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

サムネイル画像を大きくする設定

その他のサムネイル画像設定

サムネイル画像を大きくする手順1と2。詳細は吹き出しボックスに記載
サムネイル画像を大きくする手順3。詳細は吹き出しボックスに記載
サムネイル画像を大きくする手順4。詳細は吹き出しボックスに記載
サムネイル画像を大きくする手順5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「全体設定」をクリック
  3. 「サムネイル画像設定」をクリック
  4. 「記事一覧」の「PC(960px以上)のサムネイル画像を大きくする」にチェック
  5. 「Save」をクリック

その他のサムネイル画像設定

サムネイルを非表示にしたイメージ画像

サムネイルをさらに大きくしたイメージ画像

サムネイルをポラロイド風にしたイメージ画像

サムネイルにセロテープをつけたイメージ画像

サムネイルの位置を左から右にした状態のイメージ画像

サムネイル画像の角を丸くした状態のイメージ画像

「サムネイル画像設定」では以下の設定もできるようになっています。

  • サムネイルの非表示
  • サムネイル画像を更に大きく
  • サムネイルをポラロイド風にする
  • サムネイルにセロテープをつける
  • サムネイルの位置を変更する
  • サムネイルの角を丸くする

記事一覧の記事を区切る線の設定

記事を区切る線の色を変更する前の状態のイメージ画像
記事を区切る線の色を変更した状態のイメージ画像
記事一覧の記事を区切る線を変更する手順1。詳細は吹き出しボックスに記載
記事一覧の記事を区切る線を変更する手順2。詳細は吹き出しボックスに記載
記事一覧の記事を区切る線を変更する手順3。詳細は吹き出しボックスに記載
記事一覧の記事を区切る線を変更する手順4と5。詳細は吹き出しボックスに記載

破線にするにチェック

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

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

サイドバーの変更前
サイドバーの変更後
サイドバーの背景変更の手順1。詳細はボックス内に記載
サイドバーの背景変更の手順2。詳細はボックス内に記載
サイドバーの背景変更の手順3。詳細はボックス内に記載
サイドバーの背景変更の手順4から6。詳細はボックス内に記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「基本エリア設定」をクリック
  3. 「サイドバー」をクリック
  4. 「サイドの文字色」を「#8b8fa0」に変更
  5. 「サイドバーウィジェットエリアの背景色」を「#ffffff」に変更
サイドバー内のデザインを変更する前
サイドバー内のデザインを変更した後
サイドバー内を設定する手順1。詳細は吹き出しボックスに記載
サイドバー内を設定する手順2。詳細は吹き出しボックスに記載
サイドバー内を設定する手順3。詳細は吹き出しボックスに記載
サイドバー内を設定する手順4から7。詳細は吹き出しボックスに記載
サイドバー内を設定する手順8。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「見出しタグ(hx)/テキスト」をクリック
  3. ウィジェットタイトル(サイドバー)をクリック
  4. 「文字色」を「#99a2c0」に変更
  5. 「背景色」を「#e6e8ef」に変更
  6. 「ボーダー色」を「#f6f2f4」に変更
  7. 「ウィジェットタイトルの基本スタイル」で「なし」を選択
  8. 「公開」をクリック
サイドバーを右に表示させているイメージ画像
サイドバーを左に表示させているイメージ画像
サイドバーの位置を変更する手順1と2。詳細は吹き出しボックスに記載
サイドバーの位置を変更する手順3。詳細は吹き出しボックスに記載
サイドバーの位置を変更する手順4。詳細は吹き出しボックスに記載
サイドバーの位置を変更する手順5。詳細は吹き出しボックスに記載
  1. 「AFINGER管理」をクリック
  2. 「全体設定」をクリック
  3. 「サイト全体のレイアウト」をクリック
  4. 「サイドバーを左にする」にチェック
  5. 「Save」をクリック

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

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

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

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

フッターデザインの変更前
フッターデザインの変更後
フッターの文字色と背景色を変更する手順1。詳細は吹き出しボックスに記載
フッターの文字色と背景色を変更する手順2。詳細は吹き出しボックスに記載
フッターの文字色と背景色を変更する手順3。詳細は吹き出しボックスに記載
フッターの文字色と背景色を変更する手順4から9。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「基本エリア設定」をクリック
  3. 「フッターエリア」をクリック
  4. 「フッター文字色」を「#a8aec1」に変更
  5. 「背景色」を「#e3e6f4」に変更
  6. 「背景色(グラデーション上部)」「#f9f4f4」に変更
  7. 「フッターの背景色を100%にする」にチェック
  8. 「グラデーションの方向を横向きにする」にチェック
  9. 「公開」をクリック

「トップに戻るボタン」の設定

トップへ戻るボタンの背景色

トップに戻るボタンを変更する前
トップに戻るボタンを変更した後
トップに戻るボタンのデザイン変更手順1。詳細は吹き出しボックスに記載
トップに戻るボタンのデザイン変更手順2。詳細は吹き出しボックスに記載
トップに戻るボタンのデザイン変更手順3。詳細は吹き出しボックスに記載
トップに戻るボタンのデザイン変更手順4と5。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「TOPに戻るボタン」をクリック
  4. 「背景色」を「#c0c0ce」に変更
  5. 「公開」をクリック

「プロフィール」の設定

プロフ画像・背景色・ボタンを設定

プロフィール欄のデザイン変更前
プロフィール欄のデザイン変更後
プロフィール欄のデザイン変更手順1。詳細は吹き出しボックスに記載
プロフィール欄のデザイン変更手順2。詳細は吹き出しボックスに記載
プロフィール欄のデザイン変更手順3。詳細は吹き出しボックスに記載
プロフィール欄のデザイン変更手順4から10。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「プロフィールカード」をクリック
  4. 「アバター画像(プロフィールカード)」で「icon-ukidaira.png」を選択
  5. 「背景色(プロフィールカード)」を「#f8f3f4」に変更
  6. 「テキスト色(プロフィールカード)」を「#7f7f7f」に変更
  7. 「ボタンURL」に「#」と入力
  8. 「ボタンテキスト」に「プロフィール詳細」と入力
  9. 「ボタン上部背景色(プロフィールカード)」を「#a8aebf」に変更
  10. 「公開」をクリック

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

AFFINGER6の使い方まとめ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

アフィリエイト切っ掛けでWEB業界にどっぷり浸かり、10年以上WEB関連のお仕事で食べてる人。個人から法人成りし新規で始めたサービスがうけて誰しもが知るビックネーム企業数社と契約することに成功。勝ち確定や!と思われたやさきコロナ化に突入。フルマラソンで調子良く走ってたら空から隕石が降ってきたぐらいの衝撃を受ける。ビックネーム企業との契約が見事に全部打ち切り。「わいにBtoBは向いてなかったんや・・」と現在は猫3匹と自由気ままに生きる毎日。

コメント

コメントする

目次
閉じる