Affinger

【アフィンガー】TOPページや記事装飾デザインカスタマイズまとめ【おしゃれ技あり】

2020年8月1日

・アフィンガーのカスタマイズについて教えて!

・できれば組み合わせ技とかも教えてください!

こんな悩みを解決します。

この記事を書いている人

この記事を書いている僕は、副業ブログで収益6桁を稼ぐ大学生。
Twitter(@you_blog2912)を運営中。

 

このページでは、当サイトでも実際に使用しているWordPressテーマAFFINGER5(アフィンガー5)」のカスタマイズについて紹介します。

検索してもなかなか見つからないカスタマイズ法も紹介します!

ほとんどの作業が、5分以内で初心者でも簡単にできるので、ぜひ参考にしてみてください。

AFFINGER5(アフィンガー5)デザインカスタマイズまとめ

このページでは、以下の2つのカスタマイズ法について紹介します。

  1. トップページデザインカスタム
  2. 記事内デザイン・カスタマイズ

まずは、トップページカスタマイズから見ていきましょう。

AFFINGER5(アフィンガー5) トップページカスタマイズ

トップページカスタマイズでは、以下のカスタマイズについて紹介します。

  • ヘッダーを細くする&影をつける
  • インフォメーションバーの作成
  • コピーライト消去(プラグインなし)
  • カードリンク&おすすめ記事設定

詳しく紹介していきますね!

ヘッダーを細くする&影をつける

デフォルトのヘッダー

デフォルトでは、上のように太めのヘッダーになっていますが、これを以下のように細くすることが出来ます。

ヘッダーを細く

さらに、ヘッダーの下に影をいれることで、より「立体感」のあるヘッダーにすることも可能です。

ヘッダーの下に影をいれることができる

【アフィンガー】ヘッダーを細くする方法をご紹介【影をつけることも可】

・アフィンガーのヘッダー部分を細くするにはどうすればいいの?・影をつけるやり方も教えてください。 こんな悩みを解決します。 この記事を書いている人 この記事を書いている僕は、副業ブログで収益6桁を稼ぐ ...

インフォメーションバーの設置

アフィンガー5(AFFINGER5)でヘッダー上にインフォメーションバーを作る方法

画像が小さいので、拡大してご覧ください

トップページに「インフォメーションバー」をつけることで、特定の記事に誘導したり、収益記事に飛ばすことができます。

「STORK19」や「SANGO」でよく見るインフォメーションバーですが、アフィンガーでも作ることができます。

AFFINGER5(アフィンガー5)ヘッダー上インフォメーションバーの作り方をご紹介

・アフィンガーでヘッダーエリア上に「インフォメーションバー」を表示するには、どうすればいいの? こんな悩みを解決します。 この記事の信頼性 大学で学校の勉強をする傍ら、副業でブログ収益6桁を稼いでいる ...

コピーライト消去(プラグインなし)

デフォルトのコピーライト

デフォルトの状態では、上のように 『All Rights Reserved Powered by AFFINGER5』 となっています。

しかし、このままだとテーマ名がわかってしまうので、ちょっと恥ずかしい。。

実は、以下のように消去することが可能です。

コピーライトを変更

細かい部分ですが、細部にもこだわりを持てる人はブログで成功している人が多いので、変更しておくと差別化できます。

【5分でできる】AFFINGER5(アフィンガー5)のコピーライトをプラグインなしで変更する方法

・アフィンガー5のコピーライトを変更したい!・できればプラグインを使わない方法が知りたいです! こんな悩みを解決します。 この記事の信頼性 大学生として学校の勉強をする傍ら、副業でブログ収益6桁を稼い ...

カードリンク&おすすめ記事設定

アフィンガーヘッダーカードリンク

カード型リンク

当ブログのように、トップページに「カード型リンク」を設置することができます。

おすすめ記事一覧

また、おまけとして「おすすめ記事一覧」の設置方法についても紹介しているので、参考にしてみてください。

AFFINGER5(アフィンガー)のヘッダーにカード型リンクを設置する方法【おすすめ記事の設定あり】

・アフィンガーのヘッダーに「カード型リンク」を設置するのってどうやるの? こんな悩みを解決します。今回、実際に設置するデザインは以下のようなものです。 作り方はすごい簡単なのですが、どうやって調べれば ...

AFFINGER5(アフィンガー5) 記事内デザインカスタマイズ

次に、記事内で使えるデザインやカスタマイズ方法について紹介します。

  • 吹き出しとボックスを重ねる
  • 見出しの中に小さな文字を挿入
  • 吹き出しに枠線をつける
  • アフィリエイトボタンをカスタム

吹き出しとボックスを重ねる

吹き出しの中の言葉

  1. 箇条書き➀
  2. 箇条書き➁

上のように「吹き出し」と「ボックス」を重ねる方法について紹介しします。

実は、普通に作ろうとすると下のようになってしまいます。

吹き出しの中の言葉

  1. 箇条書き➀
  2. 箇条書き➁

少し吹き出しを重ねるだけで、おしゃれな感じになるので、使ってみたい人は、以下の記事を参考にしてみてください。

【アフィンガー5】吹き出しとボックスを重ねるカスタマイズ方法

・アフィンガー5で吹き出しをボックスを重ねて表示する、カスタマイズ方法を教えてください! こんな悩みを解決します。 この記事を書いている人 この記事を書いている僕は、副業ブログで収益6桁を稼ぐ大学生。 ...

見出しの中に小さな文字を挿入

アフィンガーを使っている人で、以下のような見出しを使っていることありませんか?

アフィンガー5のカスタマイズ見出しの中に小さな文字を入れる方法

普通に入力してしまうと、見出しが長くなる場合に「ある方法」を使うと、上のようにスッキリ見せることができます。

やり方を知っておくだけで、周りと差別化できますし見た目もよくなるので、気になる人は使ってみてください。

【アフィンガー5】誰でも簡単に見出しの中に小さな文字を入れる方法

・アフィンガーで、見出しの中に小さな文字を入れるにはどうすればいいの? こんな悩みを解決します。 この記事を書いている人 この記事を書いている僕は、副業ブログで収益6桁を稼ぐ大学生。Twitter(@ ...

吹き出しに枠線をつける

アフィンガーでは「吹き出し」を使って、記事内で会話風の装飾をすることができます。

デフォルトでは、会話部分が薄い色で塗りつぶしになっているのですが、枠線をつけることが可能です。

こんな感じで、吹き出しに枠線が付きます!

吹き出しの中を塗りつぶすか、枠線をつけるかは好みなので、僕みたいにしたい場合は、以下の記事を参考にしてみてください。

AFFINGER5の会話の吹き出しに枠線をつける方法!【吹き出しの設定方法も】

・AFFINGER5の吹き出しに枠線をつける方法は?・吹き出しの設定方法を教えてください! こんな悩みを解決します。 この記事の信頼性 大学で学校の勉強をする傍ら、副業でブログ収益6桁を稼いでいる僕が ...

アフィリエイトボタンをカスタマイズ

アフィンガーでは、以下のような色のボタンがすでに用意されています。

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう


太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

上のまま使用してもいいのですが、サイトカラーや商品にボタンの色を合わせることで、収益upを狙うことが可能です。

コスパ最強チェックツール /

Rank Trackerを体験

ディナー1回分でブログ運営を効率化


Amazonや楽天アフィリエイト /

もしもアフィリエイトに登録

5分で簡単無料登録(複数回申請可)

ボタンの色にこだわりを持てると、より収益化に近づくことができますよ。

【AFFINGER5】カスタムMCボタンをカスタマイズ【アフィリエイト収益をUPする方法】

・アフィリエイトボタンをおしゃれにカスタマイズしたい こんな悩みを解決します。 ✔この記事の内容・収益upのボタンリンクカスタマイズ法 この記事を書いている人Twitter(@you_b ...

まとめ:アフィンガーをカスタムして他の人と差別化しよう!

今回は、アフィンガー5のデザインカスタマイズについて紹介しました。

最近では、アフィンガーを使う人が増えてきているので、見た目を差別化する必要があります。

今回紹介したカスタマイズの中で、気に入ったものがあれば自分のブログに取り入れてみてください。

ブックマークして、何度も見返せるようにしておきましょう!

関連記事
【限定特典付き】AFFINGER5(アフィンガー5)の評判・口コミを徹底解説

ブログ情報一覧

-Affinger