上級カスタマイズ

AFFINGERで記事上ライター情報のデザインをカスタマイズする方法

記事の冒頭に「この人が書いているんだ」とすぐにわかると、読者は安心して記事を読み進められます。特にAdSenseの審査やSEOの観点からも、ライター情報の整備は信頼性を高める大切なポイントです。ただ、AFFINGERのデフォルト表示だと少し素っ気なく感じることもあるんですよね。実際、私も最初に設定したときは「シンプルすぎて物足りないな…」と思いました。そこでこの記事では、AFFINGERの管理画面でできる設定に加えて、CSSを追加して見栄えをよくする方法をまとめました。初心者でも「コピペ＋ちょっ ...

AFFINGERの記事下｢この記事を書いた人｣を自由にカスタマイズする方法【CSSサンプル付き】

記事の最後に出てくる「この記事を書いた人」。デフォルトのままでも使えますが、ちょっと味気ない…と感じたことはありませんか？このボックスは、読者に安心感や信頼感を与える大事な要素です。実はAFFINGERなら、管理画面の設定だけで見た目を整えることもできるし、CSSを追加すれば、背景色や文字色・枠線・タブの配色まで自由にカスタマイズできます。この記事では、表示／非表示や新着記事リンクの設定方法背景色・文字色・リンク色などの変更（CSSサンプル付き）枠線・角丸・影を使ったカード風デザインプロフ ...

Contact Form 7をおしゃれにカスタマイズするCSS集

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

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

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

AFFINGERカスタムボタンのホバー演出で集客UP！薄く色が変わるCSSテクニック

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

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

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

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

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

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

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