AFFINGER4カスタマイズ

AFFINGER4

AFFINGER4はシンプルな見た目に仕上げられているため、カスタマイズの少し大変なテンプレートではあります。

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

まずはAFFINGER4のヘッダーカスタマイズから始めていき、メイン・サイド・フッターへとカスタマイズをすすめていきたいと思います。

【限定】という見出しは、当サイトでAFFINGER4を購入いただいた人だけの限定カスタマイズを意味しています。購入者の方はそれぞれ配布されたパスワードを入力して、記事を閲覧されるようにしてくださいね!

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

ヘッダーの役割

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

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

ヘッダー画像を変更する

ヘッダー画像
まずはヘッダー画像を変更します。

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

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

背景画像を設定する

背景を変える

次は背景画像を付けてみましょう!

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

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

メニューを作る

メニューを作る

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

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

メニューをデザインする

メニューデザイン

メニューを配置したはいいけど、デフォルトデザインはあまり気に入らないという人も多いかと思います。そこで、CSSを使ってメニューをデザインしてみましょう!

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

ヘッダー背景をカスタマイズ

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

次はヘッダー背景を設定しましょう。背景色や影をつけるようにすると見た目がグッと引き締まります。

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

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

メインの役割

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

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

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

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

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

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

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

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

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

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

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

【限定】SNSボタンをカスタマイズする

SNS

最後にAFFINGER4のSNSボタンをカスタマイズしてみましょう。

AFFINGER4はフラットデザインなSNSボタンとなっていますが、これをふわっと押せるSNSボタンに仕上げてみたいと思います。押せる風にカスタマイズをすることで、SNSでの拡散を誘おうという作戦ですね。

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

サイドバーの役割

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

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

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

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

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

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

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

【限定】フッター開発の方法

フッター開発

では、フッター開発の方法をお伝えさせていただきましょう。

この記事でご紹介するフッター開発は、AFFINGER4の既存のフッターメニューと連携したものとなっています。

誰でもフッターメニューを設定するだけで、簡単にフッター開発ができるようにカスタマイズさせていただきました!

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

AFFINGER4

AFFINGER4の全カスタマイズ、いかがでしたでしょうか?

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

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

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

この記事をシェアしませんか?

おすすめ記事一覧

cropped-cropped-cropped-af3-3.png 1
超優秀!AFFINGER4の注目すべき機能8つ&購入者特典3つ

AFFINGER4の特徴と機能 当サイトはAFFINGER4の見本サイトです。AFFINGER4にはどのようなサイトを作ることができるのかを視覚的に分かりやすく示すために作られたサイトですね。 なお「 ...

ランキング 2
猿でも出来る!AFFINGER4の「商品ランキング」作成方法

AFFINGER4の独自機能といえば「誰でも簡単に商品ランキングが作れること」ですよね! AFFINGER4ならHTML/CSSをほとんど知らなくてもちゃんとランキング作成ができるようになっています。 ...

投稿日:2016年10月6日 更新日:

Copyright© AFFINGER4の見本サイト , 2018 AllRights Reserved Powered by AFFINGER4.