【徹底解説】AFFINGER4カスタマイズのすべてをまとめてみた!

ひつじ
<景品表示法に基づく表記> 当サイトのコンテンツ内には商品プロモーションを含みます。

AFFINGER4

ひつじくん
ひつじくん
この記事ではAFFINGER4のカスタマイズを徹底解説するよ。

AFFINGER4はカスタマイズの少し大変なテンプレートではあります。

しかし全くのHTML/CSS初心者でもカスタマイズできるよう、ほぼコピペだけで済むように工夫させてもらいました。さらに写真/イラストをふんだんに使ってサポートさせて頂きます。

ちなみに完成イメージはこちらになりますので、ここに書いているカスタマイズを行えばこのようなサイトが出来上がるとイメージしてもらえると良いでしょう。

おおかみくん
おおかみくん
レッツカスタマイズ!!
ブログデザインを想いのままに!

【AFFINGER4】ヘッダーカスタマイズ

ヘッダーの役割

ひつじくん
ひつじくん
まずはヘッダーデザインを綺麗にして、オリジナリティを持たせていこうか!

僕がサイトをデザインする時は、まずはヘッダーからカスタマイズしていきます。AFFINGER4も例外なく、ヘッダーからデザインに取り掛かりました。

「ヘッダー」はサイトの顔とも言える部分です。ユーザーに第一印象を与える非常に重要な部分ですので、ここを綺麗に使いやすくデザインしておくのは必須です。また、オリジナリティを持たせてサイトを覚えてもらおうとする努力をすれば尚良しかと思いますね!

ではどうやってAFFINGER4のヘッダー部分をカスタマイズしていくのかをこれからお話ししましょう。

ヘッダー画像を変更する

ヘッダー画像
まずはヘッダー画像を変更します。ヘッダー画像の変更は、管理画面から「カスタマイズ」>「ヘッダー画像」と進めばできますので非常に簡単です。

ヘッダー画像のサイズは幅1060px以上のものが良いでしょう。

画像はフリー素材サイト(ぱくたそフォトリア)などから拾ってきてもいいですし、ココナラなどで外注に頼んでしまうというのも良いですね。もちろん自分で作れるなら作ってしまうのもアリですよ!

背景色を変える

背景を変える

背景色も管理画面から「カスタマイズ」>「背景」と進めばCSSなど不要で簡単に設定することができます。

サイトに使える背景のフリー素材はこちらのサイトのまとめを参考にしながら探してみるといいでしょう。良いフリー素材がたくさん見つかりますので、ここから気に入ったものを選んで、背景としてアップロードしましょう!

メニューを作る

メニューを作る

大方見た目も整ってきたので、ここでメニューを配置してみましょう。

AFFINGER4ではメニューも「カスタマイズ」から簡単に設定できるようになっています。詳しい方法につきましては以下の記事にまとめていますので、こちらを参考にカスタマイズしてみてください!

メニューをデザインする

メニューデザイン

メニューを配置したはいいけど、デフォルトデザインはあまり気に入らないという人も多いかと思います。

そこで、おすすめしたいAFFINGER4のメニューデザインにつきましてもまとめさせてもらいましたので、こちらを参考にカスタマイズしてみてください。HTML/CSSは必要ですが、ほぼコピペでOKに仕上げています。

ヘッダー上部をカスタマイズ

タイトルに背景色をつける

サイトタイトルのあるヘッダー上部に、背景色や影をつけるようにすると見た目がグッと引き締まります。

これらのカスタマイズにもCSSは必要ですが、これもかなり簡単ですのでご安心を。参考記事を読んでいただければ余裕で設定できるはずです。

【AFFINGER4】記事のカスタマイズ

メインの役割

次はAFFINGER4の記事(メイン)部分のカスタマイズに移ります。

記事はサイトの命です。読者に分かりやすく伝えるための工夫を必死に凝らす必要があるので、カスタマイズする上で最もこだわるべき部分かもしれません。

また、記事を読み終えた読者をどうやって誘導するのかも考えてカスタマイズをする必要があります。SNSで拡散してもらいたい、サイトをもっと見て回ってもらいたいと考えるなら、そのためのカスタマイズを取り入れていくべきです。

そこで、ここではAFFINGER4を利用する上で取り入れたい記事カスタマイズをまとめてみました!

見出しをカスタマイズする

AFFINGER4 見出し

まずカスタマイズしたいのはAFFINGER4の見出し部分です。

大見出し、小見出し共に、テンプレートのこのままではお世辞にも個性があるとは言えないような状態です。そこで自分のサイトのテーマにあった見出しを配置するようにしましょう!

AFFINGER4で是非導入したい見出し8選を用意しておきましたので、これを参考にしながら自分にあった見出しをカスタマイズしてみてくださいませ!

商品ランキングを作成する

ランキング作成
AFFINGER4の独自機能といえば「ランキング作成」です。

アフィリエイトに特化して作られたAFFINGER4では、HTML/CSSを知らない人でも簡単にランキング作成ができるようになっているのです。記事内はもちろんのこと、記事下、サイドバーなどに指定してランキングを貼り付けることだってできるのです。その方法も詳しく説明させてもらいます。

【AFFINGER4】サイドバーのカスタマイズ

サイドバーの役割

次はAFFINGER4のサイドバーをカスタマイズしていきましょう。

サイドバーはメインを補助する名脇役です。メインで紹介している商品の販売ページへと誘ったり、ユーザーを興味のある記事へと導いてくれたりするのが主な役割ですね。

そんな脇役のサイドバーも綺麗に整えておくとユーザーにとっても利用しやすいサイトになり、売り上げアップが見込めます。そのためのAFFINGER4カスタマイズもガッツリまとめさせてもらいましたよ!

【AFFINGER4】フッターカスタマイズ

フッターの役割
最後にAFFINGER4のフッターカスタマイズをしましょう。

フッターカスタマイズは任意ではありますが、カスタマイズをしておくとサイトの回遊率は間違いなく上がるでしょう。

サイト下部まで降りた時に何も記事がなかったら離脱をされてしまう可能性が高くなるんですけれど、フッターを開発していれば他の記事に飛んでくれるカモしれませんから、離脱リスクを軽減できるというわけですね!

ではそのためのAFFINGER4カスタマイズを見ていきましょう。

【AFFINGER4】カスタマイズまとめ

ランキング作成

AFFINGER4の全カスタマイズでした。

たとえHTML/CSSの初心者でも苦戦しないように、ほとんどコピペでサイトを仕上げられるように設計をしておきました。なのでアフィリ初心者はもちろん、コーディングが苦手な方でもAFFINGER4を見た目の綺麗なサイトに仕上げられるはずです!

ここまでカスタマイズが出来たら、AFFINGER4のランキング作成機能なども駆使して、アフィリエイトの売り上げをガンガン増やしていきましょう!

ちなみにAFFINGER4は当サイトからであれば9000円の特別価格で購入できます。まだ持っていない人はぜひ今すぐゲットしちゃってください!

記事URLをコピーしました