KAZU
2017年からAFFINGERを使い続け、複数の有料テーマも試してきたサイト運営者。
THE AFFINGERでは、AFFINGERのデザイン、表示設定、カスタマイズを中心に、実際の運営で使える情報を発信。
裏側ではAIと融合した運営にも取り組み、AIエージェントを使った検証・改善・サイト制作の自動化も進めている。
PCヘッダー横列メニューの文字色が変わらない時の解決方法｜AFFINGER6
AFFINGER6はカスタマイズ項目が豊富ですが、その分「設定しても反映されない」というケースも少なくありません。 特にPCヘッダーの横列メニュー文字色は、設定場所を間違えると全く変わらず、「あれ？反映されない…」と悩む人が多いポイントです。 この記事では、実際に検証して分かった正しい設定箇所と、CSSで強制変更する方法を紹介します。 よくある勘違い PCヘッダーの横列メニュー文字色は、次のような設定では反映されません。 「スマホミドル/横列」 で色を変えてもPC表示には反映されない 「PCヘッダーメニュ ...
カバーブロックの間にできる余白を消す方法【簡単CSSで解決】AFFINGER6対応
カバーブロックを連続で使ったとき、上下に謎の余白ができてしまう… そんな悩みを解決する方法を、AFFINGER6ユーザー向けにわかりやすく解説します。 なぜ余白ができるのか？ WordPressのカバーブロック（Coverブロック）には、デフォルトで上下にマージン（外側の余白）が設定されています。 このため、複数のカバーブロックを連続して配置すると、間にスペースが生まれてしまいます。 解決方法：CSSで余白を消す 次のコードを「外観 → カスタマイズ → 追加CSS」に貼り付けるだけでOKです。 /* カ ...
AFFINGERカスタムボタンのホバー演出で集客UP！薄く色が変わるCSSテクニック
AFFINGERを使っている方の中には、カスタムボタンを「クリックされる導線」として活用している方も多いと思います。 でも、ホバー演出（マウスを乗せたときの反応）がデフォルトのままだと、少し物足りないと感じたことはありませんか？ この記事では、ホバー時に“うっすら”と背景色が変化するCSS演出をご紹介します。 ユーザーの視線を自然に引きつけ、クリック率の向上にもつながる実践的なテクニックです。 ▼ボタン背景を透過する方法は以下の記事を参考にしてください。 https://the-affinger.com/ ...
AFFINGERカスタムボタンの背景色を透過する方法｜画像を活かしたおしゃれなデザインに
AFFINGERの「カスタムボタン」は非常に便利で、デザイン性の高いリンクボタンが簡単に作れます。 でも、背景に画像や動画を使っている場合、ボタンの背景色が邪魔してしまうこともありますよね。 この記事では、AFFINGERカスタムボタンの背景を完全に透過し、背景画像を活かしたデザインにする方法をわかりやすく解説します。 ▼ホバー演出のカスタマイズは以下の記事を参考にしてください。 https://the-affinger.com/affinger-custom-button-hover-color/ 参考 ...
AFFINGER6の「謎の余白」を消す！記事トップの画像やカバーブロックをヘッダー直下に配置する方法
このような悩みを解決します。 具体的には、「カスタマイザーで設定したヘッダー画像はヘッダー直下に表示されるのに、WordPressのブロックエディタで配置した画像やカバーブロックだと、なぜか上に余白ができてしまう…」という問題の対処法をご紹介します。 カスタマイザーを使わず、カバーブロックなどでヘッダー周りのデザインを自由に作りたい方にぴったりの記事です。 この記事では、「記事トップの余白」を確実に0にするための具体的なCSSの解決策を、わかりやすく解説します。 なぜ記事トップに余白が発生するのか？ まず ...
【初心者向け】AFFINGERの問い合わせフォームにサンクスページを設定する方法【CF7対応】
という方のために、簡単なやり方をご紹介します。 やり方としては、 JavaScriptを使う プラグインを使う この2パターンありますが、今回は「プラグインを使う方法」をおすすめします。なぜなら、コードを書く必要がなく、初心者でもかんたんに設定できるからです。 使うプラグインは「Redirection for Contact Form 7」。 この記事では、 サンクスページの作り方 プラグインのインストール〜設定方法 サンクスページに使える例文 これらをわかりやすく解説していきます。 この記事は、Cont ...
AFFINGER×Contact Form 7の横幅・デザイン崩れ対策まとめ
Contact Form 7を使ってお問い合わせフォームを作成してみたけど、 「なぜか横幅が狭い」「デザインが崩れる」 などのトラブルに悩んでいませんか？ 特にAFFINGER環境では、フォームのレイアウトがデフォルトのままだとうまく表示されないことがよくあります。 そこで今回は、AFFINGERでContact Form 7が崩れる原因と、その対処法をわかりやすく解説していきます。 AFFINGERでContact Form 7が崩れる理由 Contact Form 7はシンプルで使いやすいフォームプラ ...
【AFFINGER】ステップ機能の使い方と活用法｜「手順」や「流れ」をわかりやすく伝えよう！
という方のために、AFFINGER（アフィンガー）の「ステップ」機能をご紹介します。 AFFINGERには、 見出しブロックの「ステップ」スタイル クラシックブロックの「ステップ」パーツ この2パターンのステップ機能が存在します。 これらの機能を使えば、読者に「手順」や「流れ」をわかりやすく伝えることができるのですが、使い方にはコツが必要です。 それではAFFINGERの「ステップ」機能の使い方と、効率的な使い方を詳しく解説していきます AFFINGERの「ステップ」機能とは？ AFFINGERの「ステッ ...
保護中: ステップ機能コピペ用コード｜マイブロック登録の手順～記事に挿入する手順までを解説
この投稿はパスワードで保護されているため抜粋文はありません。
AFFINGER6：デザイン済みデータの作成方法
サイトの見た目を格好よくしたいけど、どうやっていいのかわからない… AFFINGER6のデザイン済みデータを使えば、誰でも簡単にプロ級のデザインを自分のサイトに取り入れることができます。 この記事では、初心者の方でも迷わずにできるデザイン済みデータの作成方法を解説していきます。 まずはここからスタートして、あなたのサイトをもっと魅力的に変身させましょう！ AFFINGER6のデザイン済みデータとは デザイン済みデータとは、AFFINGERユーザーが簡単にサイトの見た目を整えることができるよう設計された「完 ...