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

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

この投稿はパスワードで保護されているため抜粋文はありません。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回ご紹介する方法は、 デフォルトのブログカードではもの足りない…… もっと内部リンクを目立たせたい！ という方におすすめの方法です。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」の変更 「背景色」の変更 枠内に「まるもじ」や「ふきだし」の挿入 が可能になります。 ここでは、大きく分けて2タイプの作り方を紹介します。 グループ化するタイプ マイボックスを使用するタイプ それでは、ブログカード風内部リンクの作り方を詳しく解説していきます。 グループ化タイプのブログカード風内部リンクの作り方 ...

AFFINGER6のデフォルト機能で作れるブログカードを紹介します。 ブログカードの作り方は大きく分けて2つ。 クラシック版の段落ブロックの中で作るブロックエディタで作る AFFINGER6で作れるブログカードは4種類。 それにプラスして、ブログカード風の内部リンクがあります。 クラシック版の段落の中で作るブログカード CHECK（ふきだし）参考 ブロックエディタで作るブログカード 埋め込みラベルあり記事IDを使ったブログカード風の内部リンク それぞれ詳しく解説していきます。 AFFINGER6で作れるブ ...

AFFINGER6には「アニメーション」機能があります。 アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。 たとえば、 注意 ふきだしをバウンドさせたり・・・ 注目 まるもじのアイコンを横揺れさせたり・・・ ポイント ふきだしをふわふわさせつつアイコンをブルブルさせたり・・・ といったことが簡単にできます。 ブロックスタイルにアニメーションを追加する方法 今回アニメーションクラスを追加するのは、段落スタイルの「ふきだし」と「まるもじ」です。 ...

今回は、スマホのヘッダーを「固定」or「スクロール追尾」する方法について書いていきます。 AFFINGER6で設定できるスマホヘッダーの表示パターンは3つ。 【通常】：ヘッダーは固定されません 【固定】：常にページ上部にヘッダーが固定されます 【スクロール追尾】：下へスクロールするとヘッダーは消え、上へスクロールすると消えたヘッダーが現れます 表示パターンのイメージ 通常 固定 スクロール追尾 表示パターンの設定は「カスタマイズ」で行います。 この記事では、 スマホヘッダーの表示パターン設定 「ヘッダー背 ...

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

そんな悩みを解決します。 結論からいうと、 「すべての設定」の中にある「image_dafault_size」という項目を「full」に変更すれば解決できます。 ただ、「すべての設定」は隠しページみたいなものなので、通常のダッシュボードのメニューには表示されていません。 この記事では、 「すべての設定」を表示させる方法「image_dafault_size」を「full」に変更する手順 を解説していきます。 この設定を行えば、挿入した画像はすべてフルサイズ表示させることができますよ。 「すべての設定」を表 ...

ここでは、サーチコンソールのHTMLタグ（メタタグ）を再確認する手順を解説します。 AFFINGER6では、サーチコンソールのHTMLタグ（メタタグ）の一部を入力するだけで、サーチコンソールが使用できます。 必要なのは、以下に表記した部分だけです。 <meta name="google-site-verification" content="ここの部分のみ" /> HTMLタグ（メタタグ）は、「所有者の確認」から確認できます。 「HTMLタグの確認方法がわからない」 という方は参考にしてくださ ...

という悩みを解決します。 サイトのタイトルに影をつけるには、テキストシャドウにヘッダーを指定する必要があります。 といっても難しいことはありません。30秒で終わります。 それでは、ヘッダーに表示するサイトタイトルに「影」を追加する方法について解説していきます。 ※サイトタイトルを大きくする方法もあります！ https://the-affinger.com/title-css/ 参考 サイトのタイトルに影を追加する方法 サイトタイトルの影の追加は、テーマ管理の全体設定で行います。 具体的には、テキストシャド ...

という悩みを解決します。 結論から言うと、普通の設定ではなくCSSコードを追加する必要があります。 「CSSをいじるのは怖いなぁ…」 という方でも大丈夫。 アフィンガーにはCSSを追加できる項目があるので、コードのコピペだけで簡単に完了しますよ（約一分）。 ※サイトタイトルに影をつける方法もあります。 参考：サイトのタイトルに影(テキストシャドウ)を追加する方法 サイトタイトルのサイズを大きくする手順 サイトタイトルのサイズを大きくする手順は以下の通り。 追加するCSSコードをコピーするカスタマイズの「追 ...

という悩みを解決します。 AFFINGER6には、サムネイル画像を大きくする設定があるので、そこを変更するだけでサムネイル画像は大きくなります。 イメージとしては以下のような感じです。 大きさ変更イメージ ただし、サムネイル画像を大きくすることによるデメリットもあります。 そこで今回は、サイドバーのサムネイル画像を大きくする設定と、それに伴うデメリットもあわせて解説します。 サイドバーのサムネイル画像を大きくする設定 サイドバーのサムネイル画像を大きくするための設定は「テーマ管理（AFFINGER 管理） ...

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

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

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

今回は、ヘッダーカードを表示させるための設定とカスタマイズについて解説していきます。 ヘッダーカードとは、ヘッダーの下にある、画像にテキストが入っているカードタイプのリンクのことです。 ヘッダーカード ヘッダー下は、ユーザーの目に止まる可能性が高い場所。 ここに見てもらいたいカテゴリのページやタグのページへのリンクを表示させておくことで、回遊率を上げようという作戦です。 これも内部SEO対策のひとつですね。 そこで今回は、 ヘッダーカードを表示させるための設定（AFFINGER管理）ヘッダーカードの画像サ ...

「トップページのヘッダーエリアにYouTube動画を流すにはどうやればいいの？」 という疑問に答えます。 AFFINGER6のヘッダー画像エリアとは、この部分のことです。 もしくは、ヘッダーエリア～ヘッダー画像エリアまでの範囲に動画を流すことも可能です。 こんな感じで！ やることは以下の3つです。 ヘッダーに流すYouTubeのURLを用意する AFFINGER管理での設定 カスタマイズでの設定 今回は、ヘッダー画像エリアのみにYouTube動画を流すための手順を詳しく解説していきます。 ヘッダーに流すY ...

ここでは、ヘッダーの右上にある「ヘッダーメニュー（横列）」を表示させるための手順を解説します。 「ヘッダーメニュー（横列）」とは、ヘッダーの右サイドにあるメニューのことです。 ここにメニューを表示させるには、 ヘッダー横に表示するメニューを作成するAFFINGER管理設定でヘッダーメニュー（横列）を有効化するカスタマイズにて色を設定する この3つが必要です。 それぞれの手順を詳しく解説していきます。 ヘッダー横に表示するメニューを作成する まずはじめに、ヘッダー横に表示するメニューを作成します。 １．左メ ...

ここでは、ヘッダー 横メニュー「ヘッダーメニュー（横列）」にWEBアイコンを表示させる方法を解説します。 WEBアイコンを表示させためた例 ヘッダー横メニューにWEBアイコンを表示させるには、「Font Awesome」のWEBアイコンを使用します。 そのための準備として、 「FontAwesome」のアカウント登録使用するためのコードをheadに貼り付ける この2つを終えていないと「Font Awesome」を使用することができません。 ※WEBアイコンを使えるようにする手順は、以下の記事を参考にしてく ...

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

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

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

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

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

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

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

今回は、ヘッダーカードを表示させるための設定とカスタマイズについて解説していきます。 ヘッダーカードとは、ヘッダーの下にある、画像にテキストが入っているカードタイプのリンクのことです。 ヘッダーカード ヘッダー下は、ユーザーの目に止まる可能性が高い場所。 ここに見てもらいたいカテゴリのページやタグのページへのリンクを表示させておくことで、回遊率を上げようという作戦です。 これも内部SEO対策のひとつですね。 そこで今回は、 ヘッダーカードを表示させるための設定（AFFINGER管理）ヘッダーカードの画像サ ...

流し読みする読者の目を止める方法として、見出しのアイコンを動かす方法があります。 たとえば、 こんな動きもAFFINGER6なら可能です。 それでは具体的な手順を解説していきます。 見出しのアイコンを動かすには？ 見出しのアイコンを動かすには、アニメーションの「CSS クラス」を追加する必要があります。 たとえば、チェックマークを震わせるには「ベル揺れ」のCSSクラス［st-ring-icon］を。 チェックマークを動かす アイコンを点滅させるには、「点滅」 のCSSクラス［st-flash-icon］。 ...

「ボックスのアイコンを動かせたら目立つのにな～」 「どうしても読者に気づかせたい場所がある！」 という場合、AFFINGER6なら簡単にできます。 「追加CSSクラス」アニメーションコードを追加するだけOKです。 ここがポイント こんな感じで、目立たせたいところのアイコンを動かすことができます。 今回紹介する方法で、 メモボックスマイボックス見出し付きボックスバナー風ボックス この4つのアイコンにアニメーションをかけることができます。 これは「メモボックス」です ポイント これは「マイボックス」です 詳細 ...

という悩みを解決します。 まずは結論から。 原因は、「ヘッダーを分割しない」を解除できないのは、アフィンガーの子テーマ「JET」の仕様だからです。 なので、「JET」の設定をちょちょいと弄れば、あっさり解除できます。 ちなみに設定変更の方法は 「JET」の管理画面から設定変更 スタイルシート（CSS）を書き換える この２パターンあります。 今回は、２パターンとも試して影響が出るのか出ないのかも見てみたので、同じように悩んでいる人はぜひ参考にしてみてください。 「ヘッダーを分割しない」を解除する手順（通常） ...