上級カスタマイズ

カバーブロックの間にできる余白を消す方法【簡単CSSで解決】AFFINGER6対応

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

AFFINGERカスタムボタンの背景を透過する方法｜画像を活かしたおしゃれなデザインに

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

AFFINGER6の「謎の余白」を消す！記事トップの画像やカバーブロックをヘッダー直下に配置する方法

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

スマホヘッダーに影をつけてぼかし強度を変更する方法

「アフィンガーはスマホヘッダーの境界線がわかりにくい…」「SANGOみたいな感じで境界線に影をつけたいな～！」「影の大きさも変更できないかなぁ…」という悩みを解決します。この状態を目指します！これはSANGOのヘッダーです結論からいうと、CSSを追加して数値を変更すれば可能です。この記事では、スマホヘッダーの境界線に影をつける手順影の幅とぼかし強度を変更する方法この2つを解説していきます。スマホヘッダーの境界線に影をつける手順追加するCSSをコピーするまずは以下のCSSをコピーして ...