AFFINGER   ※当サイトのコンテンツには広告が含まれる場合があります。

AFFINGER6トップページのカスタマイズ方法【オシャレに差別化】

2023-12-10 yume-tada

how-to-customize-affinger-top-page

AFFINGER6を使っているサイトと同じようなデザインになってしまう。

Worried
お悩みさん

AFFINGER6をカスタマイズして、人と違うデザインにしたい。

findout
お調べさん
ゆめただのり
ゆめただ

同じテーマを使っていると、どうしても同じようなデザインになりがちです。

なぜなら、「デザインテンプレートをもとに自分好みにカスタマイズするから。」

本記事でわかるコト

本記事では、AFFINGER6で他サイトと違ったでデザインにする方法がわかります。
他のサイトと違うデザインにして、オシャレに差別化しちゃいましょう

この記事を書いた人【ゆめただ】

この記事を書いた人

当サイト使用テーマ

カスタマイズ性」「分析力」「レスポンスデザイン」「サポート」「実績」が凄い!

稼ぐなら、AFFINGER6一択!

【初心者にイチオシ おすすめのテーマ】

action_banar

AFFINGER公式サイトへ行く

忙しいあなたへ

本記事【AFFINGER6トップページのカスタマイズ方法【オシャレに差別化】を

音声で聴けます

ページのカラム数

ゆめただのり
ゆめただ

ページのカラム数は、デザインに影響します。

カラム数について整理します。

カラム数とは?

カラム数とは、Webサイトのページ構成で、縦に並んでいる要素の数のコトです。

このように、ヘッダーとフッターの間に、メインコンテンツがあります。

1カラムは、サイドバーが無いシンプルなデザイン。

2カラムは、横にサイドバーが付く縦に2カラムのデザイン。

3カラムは、両サイドにサイドバーが付くデザインです。

page_column_numbers

カラム数のメリット・デメリット

カラム数の数によって、メリット・デメリットがあります。

カラム数メリットデメリット
画面いっぱい使って記事内容を書けるので、一度に多い記事情報を表示することができるサイドバーがないので、サイト内の回遊率が低下する可能性がある。
記事内容に加えて、サイドバーに「記事を書いた人」や「関連記事」、「人気記事」、「目次」などを同時に表示することができるので、離脱率を改善することができる記事に割り当てられる表示幅が狭まり一度に表示できる内容が制限される。
一度に多くの情報が表示できるので、回遊率が高められる内容が多くなりすぎて、ごちゃごちゃしたデザインになりがち
カラム数のメリット・デメリット
Design team

1カラムをおすすめする理由

yume-tada
yume-tada

ゆめただは、初めにこれを悩みました。

1カラムデザインに決めた理由はコレです。

1カラムに決めた【ポイント1】

SEO対策として、ユーザーにとって有益で高品質なコンテンツを提供するコト。記事内容を最優先に考えると1カラムが有利。

1カラムに決めた【ポイント2】

目次や関連記事は、AFFINGERには標準機能でカバーできる。自動で目次を表示したり、目次に戻れるアイコンを表示したり、関連記事を記事の最後に自動で表示する機能で充分。

1カラムに決めた【ポイント3】

パソコン画面のデザインと、スマートホンのデザインが両方1カラムでほぼ同じになり統一感が出る。

参考

AFFINGER6は、設定画面から設定を変更するだけで1カラム・2カラムを変更することができます。

Website designer

トップアフィリエイターサイトのカラム数

トップアフィリエイターのブログサイトのカラム数も調べて参考にしました。

比較的新しいサイトは、1カラムにしているようです。

トップアフィリエイターサイトカラム数WordPressテーマ
tsuzukiblog2AFFINGER6
hidodeblog2JIN
kyoko先生1SWELL
みんなの副業ブログ2Cocoon
ENJIBLOG1AFFINGER6
副業コンパス2SANGO
マクリン|ガジェット8割家電2割のレビューブログ1SANGO
副業クエスト1002AFFINGER5
作業ロケット2AFFINGER5
manablog2manabu
トップアフィリエイターサイトのカラム数
Influencer

オシャレにカスタマイズする方法

ゆめただのり
ゆめただ

ここからは、1カラムのデザインでオシャレにする方法をまとめました。

当サイトで使っているカスタマイズ方法です。

1カラムに設定しよう

WordPressの管理画面から、「AFFINGER管理」ー「AFFINGER管理」をクリック。

管理画面

【AFFINGER管理】-【AFFINGER管理】

 管理画面の「AFFINGER管理」ー「AFFINGER管理」をクリックします。

AFFINGER6_design_1

「全体設定」を選択します。

「サイト全体のレイアウト」のところで、「サイト全体を1カラムにする」を選択して「保存」します。

注意

既に2カラムでデザインを作っている場合から変更するときは、サイト全体のデザインが崩れる場合があるので、自己責任でお願いします。

ヘッダーエリアをカスタマイズ

ゆめただのり
ゆめただ

ヘッダーエリアをカスタマイズする方法3選です。

1.ヘッダーメニューに検索窓を追加する方法

1カラムデザインは、サイドバーに検索窓を設置できません

このため、次の方法でヘッダーメニューに検索窓を追加します。

navimenu_1

\ヘッダーエリア検索窓を追加する方法はこちらから/

ヘッダーエリアに検索窓を追加する方法
how-to-make-header-searchbox
ヘッダーメニューに検索窓を追加する方法【AFFINGER6】

続きを見る

2.ヘッダー画像を固定表示してパララックス効果

ヘッダー画像を固定表示にして、パララックス効果を得る方法です。

画像が固定されたまま、画面だけスクロールするので奥行を感じることができます

\ヘッダー画像を固定表示にしてパララックス効果を得る方法はこちらから/

ヘッダー画像を固定にする
how-to-pin-header-image
ヘッダー画像を固定表示にする方法【AFFINGER6】

続きを見る

3.ヘッダーエリアにテキストリンクを貼る

ヘッダー画像に、テキストリンクを貼る方法です。

1カラムはサイドバーがないので、追加のリンクをヘッダーに設置するときに使います

当サイトは、ページ途中の管理者にリンクを貼っています

テキストリンク例

\ヘッダーエリアにテキストリンクを貼る方法はこちらから/

テキストリンクをヘッダー画像に挿入する
insert-textlink-in-header-image
テキストリンクをヘッダー画像に挿入する方法【AFFINGER6】

続きを見る

フッターエリアをカスタマイズ

フッター画像を固定表示にして、パララックス効果を得る方法です。

画像が固定されたまま、画面だけスクロールするので奥行を感じることができます

\フッター画像を固定表示にしてパララックス効果を得る方法はこちらから/

フッター画像を固定にする
how-to-make-footer-parallax
フッター背景を透過してパララックス化する方法【AFFINGER6】

続きを見る

ゆめただのり
ゆめただ

カスタマイズしたオリジナルサイトで差別化しちゃいましょう。

関連記事
reason-why-I-recommended-affinger_new2
AFFINGER6(アフィンガー6)を初心者におすすめする5つの理由【後悔しないテーマ選び】

続きを見る

-AFFINGER