【保存版】AFFINGER6のカスタマイズ方法をパート別に解説！

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

ぶっちゃけ、『AFFINGER6』のカスタマイズって難しいですよね？

そこで、記事の前半で「AFFINGER6のパート別のカスタマイズ方法」を。

後半では「当サイト限定のカスタマイズ方法」について解説します。

本記事を最後まで読むことで、AFFINGER6のカスタマイズを無料で済ませられますよ！

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

AFFINGER6カスタマイズ後の完成図

本記事で解説するカスタマイズを全部乗せすると、こうなります。

とはいえ、必要ないカスタマイズはスキップしちゃってOK！

パート別

カスタマイズでは次のいずれかをイジります👇

カスタマイズする場所

では、「トップページ」のカスタマイズから始めましょう！

テンプレートでサクッと「おしゃれなデザイン」にしたい方は別記事をどうぞ👇

関連記事【完全無料】AFFINGER6デザインテンプレートの設定方法

前提初期値を設定する

最初にまず「Save」を１回クリックして下さい（初期値が設定されます）。

これでリセットしたときに初期値に戻りますよ。

AFFINGER6のカスタマイズ方法【トップページ編】

AFFINGER6のカスタマイズ方法「トップページ編」は、次のとおり。

この章のもくじ

まずは、サイトの顔「トップページ」のカスタマイズから👇

その①全体カラー

サイト全体のカラーをサクッと決めたいなら、「カラーパターン」が優秀です。

12色展開

「Save」をクリック。

これで以下のカラーが一発で決まります。

キーカラー

とはいえ、これだと細かいカラーリングまでは設定できません。

から「キーカラー」に「カラーコード（#ffffff：白）」を入れることでも設定できますよ。

ブラウザに拡張機能『ColorPick Eyedropper』を追加すれば、カラーコードを取得できるんです。

たとえば、YouTubeロゴのカラーコードは「#FF0001」になります。

その②NEWS（お知らせ）

「お知らせをTOPページの一番上に表示する」に✅を入れるだけ。

デフォルト

これらをカスタマイズすることができます。

その③バナー風ボックス＋ブログカード

から、いちばん右の「ツールバー切り替え」というアイコンをクリックしてください。

の順番にクリック。

「イエロー」と「ブルー」のボックスができましたね。

それぞれに以下の「ショートコード」をコピペしてください。

右上のCopyをクリック

[st-flexbox title="ここにタイトル" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="ここに背景画像" blur="on" margin_bottom="0"][/st-flexbox]

[st-card id="ここに記事ID" readmore="off" thumbnail="on"]

[st-card id="ここに記事ID" readmore="off" thumbnail="on"]

[st-card id="ここに記事ID" readmore="off" thumbnail="on"]

これで「２つのバナー風ボックス」と「６つのブログカード」がトップページに挿入されますよ。

変更してね

コピペしたら、「このテキストは最後に消して下さい（50%）」は削除してOKです。

また、ブログカードに「本文が抜粋」されるのがイヤな人は・・・

任意

ボクはすべて非表示にしています。

その④タブ式カテゴリー記事一覧

カテゴリーごとに記事一覧を「タブ」で表示できる機能です。

２ステップ

これだけで「タブ式カテゴリ一覧」が実装できます。

デザインをカスタマイズ

ほかにも「タブの背景色」や「文字色」も変更できますよ。

AFFINGER6のカスタマイズ方法【ヘッダー編】

AFFINGER6のカスタマイズ方法「ヘッダー編」は、次のとおり。

この章のもくじ

次は、サイト上部「ヘッダー」です。

その①サイトのタイトル＋キャッチフレーズ

ここに「サイトのタイトル」と「キャッチフレーズ」を入力します。

サイトのタイトルを「ロゴ画像」にする場合も入力しておきましょう。

から「ヘッダーナビゲーションをセンタリング」に✅を入れると、サイト名が「中央寄せ」になりますよ。

の「画像を選択」からアップロードすれば、サイトのタイトルが「ロゴ画像」になります。

「ヘッダーロゴ画像を使用する」に✅を入れると、同じ画像が「フッター」にも適用されますよ。

その②インフォメーションバー

に「カスタムHTML」を追加。

右上のCopyをクリック

<a href="ここにURL" style="text-decoration: none;"><strong>ここにテキスト</strong></a>

そこに上記のHTMLコードをコピペしてください。

「<strong>タグ」で太字にしています。

変更してね

あとは「URL」と「テキスト」を変更して「公開」をクリック。

とはいえ、インフォメーションバーの「カラー」も変更したいですよね。

そこにCSSコードをコピペしてください。

右上のCopyをクリック

/* インフォメーションバーの背景色 */
#st-header-top-widgets-box {
background-color: #222;
}
/* インフォメーションバーの文字色 */
#st-header-top-widgets-box .st-content-width a {
color: #fff;
}

それぞれ「好きなカラーコード」に変更してくださいね。

また、こっちのHTMLコードをコピペすると「流れるインフォメーションバー」を実装できますよ。

右上のCopyをクリック

<div><marquee><a href="ここにURL" style="text-decoration: none;"><strong>ここにテキスト</strong></a></marquee></div>

かならずスマホでも表示をチェックしてくださいね！

その③グローバルメニュー

サイト名の下のグローバルメニューは、その名のとおり「メニュー」から設定します。

まずは、「メニュー名」を入力して、「メニューを保存」をクリック。

左の「メニュー項目を追加」から表示したいメニューを選んでください。

追加できるメニュー

「トップページ」「お問い合わせ」「カテゴリー」などを設置するのが一般的ですね。

メニュー設定

この２つに✅を入れると、PCとスマホでグローバルメニューが表示されます。

さいごに「メニューを保存」をクリック。

スマホでは「ハンバーガーメニュー」になるので、確かめてみてくださいね！

さらに、グローバルメニューはこんなカスタマイズもできます👇

メニューのカスタマイズ

それぞれサクッと解説します！

アイコンを設置する

メニュー横のアイコンは『FontAwesome』で実装できます。

から「FontAwesomeIcons4.7.0の読み込み」に✅を入れて、「Save」をクリック。

の「ナビゲーションラベル」のテキストの〝前か後ろ〟にFontAwesomeのコードをコピペすればOK。

アイコンは『FontAwesome4.7.0』から探してくださいね。

右上のCopyをクリック

<i class="fa fa-address-book" aria-hidden="true"></i>

『FontAwesome』のコードはこんな感じです。

サブ項目（子カテゴリー）を設置する

メニューを「サブ項目」に追加することで、「ドロップダウンメニュー」を実装できます。

カテゴリーが「親・子・孫」構造に分かれてる時にいいですね。

リンクを新しいタブで開く

の上部にある「表示オプション」をクリック。

「リンクターゲット」に✅を入れると、「リンクを新しいタブで開く」が選べるようになりますよ。

その④サムネイルスライドショー

スライドショーは「トップページのみ or 全ページ」表示かを選べます。

３パターン

記事を「６本以上」書かないとスライドしないですからね。

カスタマイズの種類

などなどカスタマイズ方法はさまざまです。

その⑤ヘッダーバナー

トップページのヘッダーにカード型リンクを最大４つまで設置できます。

３ステップ

カスタマイズはそれだけでなく・・・

表示設定

さらにさらに・・・

デザイン設定

いろいろ触ってみてくださいね！

AFFINGER6のカスタマイズ方法【サイドバー編】

AFFINGER6のカスタマイズ方法「サイドバー編」は、次のとおり。

この章のもくじ

続いて、PCでは右、スマホではメインの下に来る「サイドバー」のカスタマイズです。

その①サイドバーを非表示にする

から「サイト全体を1カラムにする」に✅を入れると、サイドバーが非表示になります。

「スマホのサイドバーを非表示にする」に✅を入れると、スマホでサイドバーが非表示になりますよ。

その②検索フォーム

左の「利用できるウィジェット」から「検索」を「サイドバー（上部）」に追加してください。

これだけで「検索フォーム」がサイドバーのいちばん上に表示されます。

その③プロフィールカード

左の「利用できるウィジェット」から「11_AFFINGERプロフィールカード」を「サイドバー（上部）」に追加してください。

「検索フォーム」の下がいいですね。

ここから「プロフィールカード」をカスタマイズしていきます。

プロフィールカードの中身はここに入力したものが反映されます。

入力事項

WordPressでは「Twitter」ですが、アイコンは「X」になっています。

また、「プロフィール写真」は以下からも設定可能です。

プロフィール写真の後ろに「ヘッダー画像」を設定することもできますよ。

こっちでもOK

プロフィールカードのカスタマイズはまだまだあります。

カスタマイズの種類

さいごに「公開」をクリックすれば反映されますよ。

さらに、「テーマ管理」からもカスタマイズできます。

任意

「htmlタグを許可する」ことによって、こんなことができるようになります👇

htmlタグを許可すると

ここだけわかりづらいので覚えておいてくださいね。

その④おすすめ記事一覧

「おすすめ記事一覧」のカスタマイズは超かんたん！

３ステップ

「タイトル」と設定したい記事の「ID」を入力して、サイドバーに表示されるように✅を入れるだけ。

キラーページ（収益記事）など、読んでもらいたい記事を設置しましょう！

AFFINGER6のカスタマイズ方法【フッター編】

AFFINGER6のカスタマイズ方法「フッター編」は、次のとおり。

この章のもくじ

続きまして、サイトの下部「フッター」のカスタマイズをどうぞ👇

その①３列にする

に「カスタムHTML」を追加。

これだけでフッターが２列になります（サイトのタイトルが左寄せに）。

同時に、ウィジェットに「フッター（3列目）」が追加されるので、同じく「カスタムHTML」を追加してください。

これでフッターが３列になりました！

その②リンクについて

フッターの２列目・３列目には何を設置してもいいですが、「リンクについて」がおすすめ。

「カスタムHTML」に以下のテキストをコピペしてください。

右上のCopyをクリック

当サイトは、原則リンクフリーです。
リンクを行う場合の許可や連絡は必要ありません。
ただし、リンクの際は「出典元の明記」をお願いしております。

「<br>タグ」で改行しています。

タイトルは「リンクについて」でいいでしょう。

とはいえ、「文字色」や「フォントのサイズ」を変えたい人もいるはず。

以下の「CSSコード」をコピペしてください。

右上のCopyをクリック

/* フッターの文字色 */
#custom_html-6 .custom-html-widget {
color: #fff;
font-size: 14px;
}

好きな「カラーコード」や「フォントサイズ」に変更してくださいね！

また、当ブログのフッターには「バナー」が貼ってありますよね？

被リンクをGET

こうしたバナーを設置することで、各サイトから「被リンク（外部サイトからの発リンクのこと）」がもらえるんです。

ドメインパワーの強いサイトから被リンクをGETすることで、あなたのサイトのドメインパワーもアップ！

とはいえ、読者にとってはジャマなので、フッターに設置するのが望ましいでしょう。

その③フッターメニュー

から「新しいメニューを作成しましょう」をクリック。

３ステップ

あとは「メニュー項目を追加」から追加したいメニューを選ぶだけ。

一般的なメニュー

これらを設置するのが一般的ですね。

AFFINGER6のカスタマイズ方法【スマホ編】

AFFINGER6のカスタマイズ方法「スマホ編」は、次のとおり。

この章のもくじ

スマホは「ヘッダー」と「フッター」をカスタマイズしていきます。

その①検索アイコン【ヘッダー】

から「スマホヘッダーに検索アイコンを追加する」に✅を入れるだけで、スマホのヘッダーに検索アイコンが表示されます。

カスタマイズの種類

いろいろ試してみてくださいね。

その②スマホ用フッターメニュー

まずは、メニューを作成します。

５ステップ

スマホ用フッターメニューに設置するメニューが、次のとおり。

よくあるカスタマイズ

基本的にURLを入れればOKですが、「TOPに戻る」だけは特殊です。

TOPに戻るのカスタマイズ

ナビゲーションラベルは「テキスト」より「アイコン」にしたほうがいいでしょう。

から「スマホ用フッターメニューを表示する」に✅を入れると、スマホのフッターにメニューが表示されますよ。

さらに、「TOPに戻る」を実装した方は・・・

から「jsによるスムーススクロールを使用する」に✅を入れると、「TOP」をタップしたときに上までスッーと戻りますよ。

最後に、「Save」をクリックするのもお忘れなく。

AFFINGER6のカスタマイズ方法【その他編】

AFFINGER6のカスタマイズ方法「その他編」は、次のとおり。

この章のもくじ

最後に、「サイトアイコン」と「フォント」のカスタマイズをどうぞ👇

その①サイトアイコン（ファビコン）

サイトアイコン（favicon）とは、PC「ブラウザのタブ」やスマホ「アプリのアイコン」に表示される画像のこと。

から「512 × 512px以上の正方形の画像」をアップロードすればOKです。

その②フォント

から「全体」と「記事タイトル・見出し（h2～3）・ウィジェットボタンなど」でフォントを変更できます。

ボクは「その他（優先）」に以下をコピペしています。

右上のCopyをクリック

font-family: Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

『manablog』と同じです。

【限定特典】AFFINGER6カスタマイズの教科書

当サイト経由で『AFFINGER6』を購入してくれた方に【限定特典】をプレゼントしています🎁

本記事の〝５倍以上〟のボリュームで、「AFFINGERのカスタマイズ方法」を完全解説しています。

とはいえ、『AFFINGERカスタマイズの教科書』は〝20大特典の一つ〟でしかありません。

特典はまだまだ増やす予定です👇

フッター編で解説した「被リンクを無料でGETできるサイト集」や「ブログアフィリエイトの教科書」などなど・・・

カスタマイズだけでなく、マネタイズに特化した特典も盛り沢山！

「ブログ５年間のすべて」を惜しげもなく公開しています👇

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

関連記事【20大特典】AFFINGER6本音レビュー！３年使ったメリット

【20大特典】AFFINGER6本音レビュー！３年使ったメリット

【Q&A】AFFINGER6のカスタマイズに関するよくある質問

AFFINGER6のカスタマイズに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：AFFINGER6の目次のカスタマイズ方法は？

A次の２通りがおすすめです。

２パターン

今『AFFINGER6』を購入すると、公式特典としてプラグイン『SUGOI MOKUJI（すごいもくじ）』のLITE版がもらえます。

PRO版は「5,980円」。

自作にはできないこと

サイドバーに目次を表示したいなら、『SUGOI MOKUJI（すごいもくじ）』一択ですね！

とはいえ、ボクは『AFFINGER5』のときに購入したのでもらってません😇

なので、自作した目次を使っていますよ👇

関連記事【コピペOK】ブログの目次の作り方｜プラグインなしで自作しよう！

Q2：AFFINGER6をさらにカスタマイズするには？

AAFFINGER6 EXにアップグレードすることで、カスタマイズの幅はさらに広がります。

EXの機能はAFFINGERユーザー限定公開ですが、一部ネタバレしますね👇️

EXの限定機能７選

ほかにも20種類以上の機能と、６種類のEX限定デザインテンプレートが開放されます。

ボクもやっと『AFFINGER6 EX』にアップグレードしました！

アフィリエイト報酬も「倍以上」なので、一考の価値ありですよ👇️

関連記事AFFINGER6 EXその「違い」を完全解説【ACTION PACK3】

AFFINGER6 EXその「違い」を完全解説【ACTION PACK3】

Q3：カスタマイズしなくても優秀なWordPressテーマは？

A『SWELL』です。

『AFFINGER6』と違って、カスタマイズしなくてもデフォルトでおしゃれなんですよね。

カスタマイズ性は劣りますが、そのぶん使いやすい人気テーマですよ👇️

関連記事【比較表あり】AFFINGER6とSWELLどっち？二刀流が解説

関連記事ブログにおすすめのWordPressテーマ５選【無料・有料】

【まとめ】AFFINGER6のカスタマイズに困ったら

「AFFINGER6のカスタマイズ方法」について解説しました。

まとめ

『AFFINGER6』ってカスタマイズに終わりがないですよね。

本記事をブックマークして、カスタマイズに困ったら見返してくださいね！

カスタマイズが終わったら、「AFFINGER6の初期設定と使い方マニュアル」をどうぞ👇

関連記事AFFINGER6の使い方と初期設定｜初心者向け非公式マニュアル

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

AFFINGERを導入したい方へ