KAZU

プレミア特典に新しいデモサイトを追加しました。 今回公開した 「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 ...

Contact Form 7を使ってお問い合わせフォームを作成してみたけど、 「なぜか横幅が狭い」「デザインが崩れる」 などのトラブルに悩んでいませんか？ 特にAFFINGER環境では、フォームのレイアウトがデフォルトのままだとうまく表示されないことがよくあります。 そこで今回は、AFFINGERでContact Form 7が崩れる原因と、その対処法をわかりやすく解説していきます。 AFFINGERでContact Form 7が崩れる理由 Contact Form 7はシンプルで使いやすいフォームプラ ...

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