アフィンガーのデザインを追求するサイト

ホームページを作りたいけれど、どのWordPressテーマを選べばいいのか迷っていませんか？ 私も実際に ハンドメイドブランドのデモサイト「COLORËdo」 を制作する中で、AFFINGERを使い、その強みと弱みを体感しました。 結論から言うと、AFFINGERは「ブログ運営」だけでなく「ホームページ制作」にも十分対応できるテーマです。 特に、「ウィジェットエリアの豊富さ」や、専用プラグインによる「分析・改善機能」は、サイトを育てたい人にとって大きな武器になります！ この記事では、実際にAFFINGER ...

WordPressでお問い合わせフォームを作るなら、定番プラグインの Contact Form 7 を使う人が多いと思います。 ただ、そのまま設置すると「なんだか味気ない…」という印象になりがち。。。 私自身も最初はデフォルトのまま使っていましたが、少しCSSを追加するだけで見た目が一気に変わることを実感しました。 この記事では、Contact Form 7をシンプルでおしゃれに見せるカスタマイズ方法 をまとめて紹介します。 AFFINGERを使っている方も、そうでない方もすぐに試せる内容になっていますの ...

WordPressでお問い合わせフォームを作るとき、定番のプラグインが Contact Form 7 です。 しかし実際に設置してみると、 「テスト送信したのにメールが届かない！」 というトラブルに悩む方が非常に多いです。 この記事では、Contact Form 7のメールが届かない原因と解決方法を、わかりやすく整理しました。 同じように困っている方は、ぜひ参考にしてください。 なぜメールが届かないのか？ Contact Form 7から送信されたメールが届かない場合、多くは メールサーバーの仕様や設定ミ ...

AFFINGER6の購入を検討している方へ。 この記事では、実際に8年以上AFFINGERを使ってきた経験をもとに、「AFFINGER6のメリット」を正直に解説します。 あわせて、AFFINGER6のデメリットも公開しているので、両方をチェックして購入判断に役立ててください。 https://the-affinger.com/affinger6-demerit-2/ 私自身、今までに6種類の有料テーマを使ってきましたが、長く使い続けているのはAFFINGERです。 理由はシンプルで、「稼ぐための仕組みが圧 ...

AFFINGER6は「稼ぐ」に特化したWordPressテーマとして、多くのアフィリエイターやブロガーに選ばれています。 実際、私も長く使ってきて「やっぱり収益化に強いテーマだな」と実感しています。 ただし、完璧なテーマというわけではありません。 むしろ、知らずに購入すると「思っていたのと違った…」と後悔する可能性もあるんです。 この記事では、AFFINGER6のデメリット・弱点を整理して、初心者が失敗しないように解説していきます。 AFFINGER6のデメリット6つ 価格が高め AFFINGER6の価格 ...

WordPressテーマを選ぶときに必ず迷うのが AFFINGERとSWELL。 「初心者でも使いやすいのは？」「収益化に強いのは？」 こんな疑問を持っていませんか？ 私自身、両方のテーマを実際に使い分けています。 どちらもとても優れたテーマで、正直に言うとAFFINGERもSWELLもどちらも好きです。 それぞれに良さがあり、サイトの目的に応じて選ぶことで力を発揮してくれます。 結論をシンプルに言えば、 スピード重視なら「SWELL」、収益化重視なら「AFFINGER」。 この記事では、2つのテーマの違 ...

プレミア特典に新しいデモサイトを追加しました。 今回公開した 「COLORËdo（コロレド）」 は、ハンドメイド革製品ブランドを想定して制作した、温かみと高級感を兼ね備えたデザインです。 TOP・固定ページはコピペ用HTMLを特典として提供しているので、設置後すぐにほぼ同じレイアウトを再現できます（※使用画像は各自の写真に置き換えが必要です）。 ▼デモサイトを見るCOLORËdo デモサイト（公開中） デモサイトイメージ

「期間限定の特典を目立たせたい」 「スマホには別デザインを使いたいけど、PCだけに表示したい」 そんなときに便利なのが、無料プラグイン WPFront Notification Bar です。 このプラグインを使うと、記事の上や下に告知バーを表示でき、しかもPCだけに限定表示することも簡単です。 WPFront Notification Barとは？ WPFront Notification Bar は、サイト上部または下部に告知バーを設置できる無料のWordPressプラグインです。 セール情報やキャン ...

AFFINGER6はカスタマイズ項目が豊富ですが、その分「設定しても反映されない」というケースも少なくありません。 特にPCヘッダーの横列メニュー文字色は、設定場所を間違えると全く変わらず、「あれ？反映されない…」と悩む人が多いポイントです。 この記事では、実際に検証して分かった正しい設定箇所と、CSSで強制変更する方法を紹介します。 よくある勘違い PCヘッダーの横列メニュー文字色は、次のような設定では反映されません。 「スマホミドル/横列」 で色を変えてもPC表示には反映されない 「PCヘッダーメニュ ...

カバーブロックを連続で使ったとき、上下に謎の余白ができてしまう… そんな悩みを解決する方法を、AFFINGER6ユーザー向けにわかりやすく解説します。 なぜ余白ができるのか？ WordPressのカバーブロック（Coverブロック）には、デフォルトで上下にマージン（外側の余白）が設定されています。 このため、複数のカバーブロックを連続して配置すると、間にスペースが生まれてしまいます。 解決方法：CSSで余白を消す 次のコードを「外観 → カスタマイズ → 追加CSS」に貼り付けるだけでOKです。 /* カ ...

AFFINGERを使っている方の中には、カスタムボタンを「クリックされる導線」として活用している方も多いと思います。 でも、ホバー演出（マウスを乗せたときの反応）がデフォルトのままだと、少し物足りないと感じたことはありませんか？ この記事では、ホバー時に“うっすら”と背景色が変化するCSS演出をご紹介します。 ユーザーの視線を自然に引きつけ、クリック率の向上にもつながる実践的なテクニックです。 追加CSSでホバー演出を定義 まずはWordPressの管理画面で、以下のCSSを追加します。 操作手順 「外観 ...

AFFINGERの「カスタムボタン」は非常に便利で、デザイン性の高いリンクボタンが簡単に作れます。 でも、背景に画像や動画を使っている場合、ボタンの背景が邪魔してしまうこともありますよね。 この記事では、AFFINGERカスタムボタンの背景を完全に透過し、背景画像を活かしたデザインにする方法をわかりやすく解説します。 カスタムCSSを追加する WordPress管理画面から以下の操作を行います。 「外観」→「カスタマイズ」へ進む 左メニューから「追加CSS」を選択 以下のコードを貼り付けます .trans ...

このような悩みを解決します。 具体的には、「カスタマイザーで設定したヘッダー画像はヘッダー直下に表示されるのに、WordPressのブロックエディタで配置した画像やカバーブロックだと、なぜか上に余白ができてしまう…」という問題の対処法をご紹介します。 カスタマイザーを使わず、カバーブロックなどでヘッダー周りのデザインを自由に作りたい方にぴったりの記事です。 この記事では、「記事トップの余白」を確実に0にするための具体的なCSSの解決策を、わかりやすく解説します。 なぜ記事トップに余白が発生するのか？ まず ...

という方のために、簡単なやり方をご紹介します。 やり方としては、 JavaScriptを使う プラグインを使う この2パターンありますが、今回は「プラグインを使う方法」をおすすめします。なぜなら、コードを書く必要がなく、初心者でもかんたんに設定できるからです。 使うプラグインは「Redirection for Contact Form 7」。 この記事では、 サンクスページの作り方 プラグインのインストール〜設定方法 サンクスページに使える例文 これらをわかりやすく解説していきます。 この記事は、Cont ...

AFFINGERを使っている方の中には、カスタムボタンを「クリックされる導線」として活用している方も多いと思います。 でも、ホバー演出（マウスを乗せたときの反応）がデフォルトのままだと、少し物足りないと感じたことはありませんか？ この記事では、ホバー時に“うっすら”と背景色が変化するCSS演出をご紹介します。 ユーザーの視線を自然に引きつけ、クリック率の向上にもつながる実践的なテクニックです。 追加CSSでホバー演出を定義 まずはWordPressの管理画面で、以下のCSSを追加します。 操作手順 「外観 ...

という方のために、AFFINGER（アフィンガー）の「ステップ」機能をご紹介します。 AFFINGERには、 見出しブロックの「ステップ」スタイル クラシックブロックの「ステップ」パーツ この2パターンのステップ機能が存在します。 これらの機能を使えば、読者に「手順」や「流れ」をわかりやすく伝えることができるのですが、使い方にはコツが必要です。 それではAFFINGERの「ステップ」機能の使い方と、効率的な使い方を詳しく解説していきます AFFINGERの「ステップ」機能とは？ AFFINGERの「ステッ ...

サイトの見た目を格好よくしたいけど、どうやっていいかわからない… AFFINGER6のデザイン済みデータを使えば、誰でも簡単にプロ級のデザインを自分のサイトに取り入れることができます。 この記事では、初心者の方でも迷わずにできるデザイン済みデータの作成方法を解説していきます。 まずはここからスタートして、あなたのサイトをもっと魅力的に変身させましょう！ AFFINGER6のデザイン済みデータとは デザイン済みデータとは、AFFINGERユーザーが簡単にサイトの見た目を整えることができるよう設計された「完成 ...

この記事では「AFFINGER6（アフィンガー６）」に、デザイン済みデータを反映させるための手順を詳しく解説しています。 デザイン済みデータは、初心者でも容易に美しいデザインを反映できるアフィンガー専用データです。 このデータ設定は慣れれば簡単ですが、初回は操作に戸惑うことがあります。 そこで今回は、初心者向けにデザイン済みデータの適用手順を詳しく解説していきます。 AFFINGER6 のデザイン済みデータは全部で11種類 通常のAFFINGER6用 SIMPLE START Tidy2 MUKU clo ...

AFFINGER6には、「自動カウント」という機能があります。 これは、見出しの頭に数字を入力しなくても、自動で連続した番号を表示してくれるという、非常に便利な機能です。 自動カウントには大きく、 「見出しスタイル（ステップ・カウント）」を使った方法 「連番（CT）」を使った方法 の2種類があり、それぞれ使い方も見た目も異なります。 それぞれ詳しく解説していきます。 自動カウントの特徴 はじめに、自動カウントを知らない方のために、自動カウントの特徴を簡単に説明しておきます。 自動カウントには、以下の2つの ...

この記事では、 「PCのヘッダーとメニューの境目がわかりにくい」 「ヘッダーの境界線に影をつけられないかなぁ」 という悩みを解決します。 PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。 やることは ドロップシャドウの設定に適応IDを追加するだけです。 ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。 スマホのヘッダーにも影をつけた ...

アフィンガー6をインストールすると、ダッシュボードメニューの1番上に「マイブロック」が表示されます。 「これってどんな機能？」 「再利用ブロックと何が違うの？」 という疑問をもっている方が多いんではないでしょうか。 アフィンガー6を購入してマイブロックを使わないのは、非効率の極みと言っていいほど損しています。 そこで今回は、「マイブロック」の便利な使い方について、詳しく解説していきます。 マイブロックと再利用ブロックの違い まずは、「マイブロック」と「再利用ブロック」の違いについて簡単に説明します。 マイ ...

今回は、ブロックエディタで「見出し付きフリーボックスを使いこなす方法（初級編）」として解説していきます。 見出し付きフリーボックスとは、AFFINGER6の専用ブロックのひとつです。 ここでは、初心者の方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。 使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。 AFFINGER6専用「Gutebergプラグイン2」を必ず有効化してください。 見出し付きフリーボックスの装飾例 まずはじめに、見出し付きフリーボッ ...

今回は、ブロックエディタでAFFINGER専用メモボックス（メモブロック）を使いこなす方法（基本編）として解説していきます。 メモボックスとは、AFFINGER6の専用ブロックのひとつ。 メモボックスは2種類に分かれます。 段落スタイルのメモボックスAFFINGER専用ブロックのメモボックス ここでは、AFFINGER専用ブロックのメモボックスの使い方について、詳しく解説していきます。 段落スタイルのメモボックスの使い方については、以下の記事に詳しく書いているので、2種類を使い分けたい方はぜひチェックして ...

今回は、ブロックエディタでマイボックスを使いこなす方法（初級編）として解説していきます。 マイボックスとは、AFFINGER6の専用ブロックのひとつです。 AFFINGER6で使えるボックスの中でも「マイボックス」は使い勝手がいいのでよく使います。 ここでは、AFFINGERの使い方にまだなれていない方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。 使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。 AFFINGER6専用「Gutebergプラグイン ...

ドロップシャドウとは、文字や画像に対する視覚効果のひとつで、対象の輪郭の脇に影が落ちているような演出を行うことです。 簡単に言うと、影を演出することで浮いているように見せられる効果のことです。 AFFINGER6は、ドロップシャドウを追加したい装飾ブロックを、ピンポイントで設定することができます。 段落スタイルのボックスとAFFINGER専用のボックスにメリハリをつけたい！ドロップシャドウありとなしをうまく使い分けたい！AFFINGER6を使っている他の人と差別化したい！ という方はぜひ参考にしてください ...

AFFINGER6のカスタムボタンには、「影」または「ドロップシャドウ」をつけることができます。 「影」と「ドロップシャドウ」はまったく別物。 簡単に説明すると、 「影」→ボタンが立体的に見える「ドロップシャドウ」→ボタンが浮いて見える という違いがあります。 それではそれぞれの設定を解説していきます。 カスタムボタンに「影」をつける手順 カスタムボタンに影を追加するのは、ブロック編集の「レイアウト・デザイン設定」にて行います。 １．新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿入 ...

ここでは、「簡易会話」と「会話ふきだし」に影（ドロップシャドウ）を追加する方法について解説します。 「簡易会話」とは、段落のスタイルから挿入できるふきだしのこと。 「会話ふきだし」とは、AFFINGER専用のふきだしブロックです。 この2種類のふきだしの使い分けについては、こちらの記事に詳しく書いています。 参考 会話ふきだしに影を追加するには、ドロップシャドウを追加する必要があります。 簡易会話であれば、ボックスなどと一緒にドロップシャドウを追加することができるんですが、会話ふきだしは個別に設定しないと ...

この記事では、 AFFINGER6のデフォルトで使える「ふきだし」の 使い分け設定使い方 この3つについて解説していきます。 2種類ある「ふきだし」の使い分け AFFINGER6のデフォルトで使えるふきだしは2種類あります。 会話ふきだしブロック段落スタイルの簡易会話 この2つの違いについては以下の通り。 項目会話ふきだしブロック簡易会話名前の表示○✕向きの変更○✕テキストの改行○✕アイコンの選択8種類2種類ドロップシャドウ✕○ふきだしのボーダー○✕ 表を見てもらえればわかるように、簡易会話より会話ふきだ ...