AFFINGER6専用機能

PCのヘッダー境界線に影をつける方法【CSS不要】

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

AFFINGER6で見出しに自動で番号を入れる方法(３パターン)【ブロックエディタ】

AFFINGER6には「自動カウント」という機能があります。これは、見出しの頭に数字を打ち込まなくても「自動」で連続した番号を表示してくれるという、非常に便利な機能です。自動カウントと一口に言っても、見出しスタイル（ステップ・カウント）連番（CT）この2つは使い方が異なります。それぞれの使い方について、詳しく解説していきます。見出しスタイルで自動カウントを使う見出しスタイルとは、見出しのブロック設定にある12個のスタイルのことです。この中の「ステップ」と「カウント」を使うことで、自動カウ ...

AFFINGER6の見出し自動カウント(ステップ番号)をリセットする方法

今回は、自動カウントのリセット方法について、詳しく解説します。見出しに番号を表示させる方法は以下の3つ。ステップ（見出しスタイル）カウント（見出しスタイル）連番（CT）自動カウントをリセットするためには、リセットコードを「追加 CSS クラス」に追加する必要があります。「追加 CSS クラス」というとむずかしそうに聞こえますが、投稿編集ページで簡単にできるので安心してください。それでは手順を詳しく解説していきます。自動カウントの特徴まずはじめに、自動カウントを知らない方のために、特徴を簡 ...

ドロップシャドウの「適応ID及びクラス」を個別に設定する方法

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

カスタムボタンに影＆ドロップシャドウをつける方法

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

ヘッダーカードの設定方法と画像サイズを解説

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

AFFINGER6で見出しのチェックマークを動かす方法

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

AFFINGER6でボックスの「アイコン」を動かす方法

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

「ヘッダーを分割しない」を解除できるようにする方法【アフィンガーJET】

[st-kaiwa-2576]ヘッダーロゴを左に寄せて右側にメニューを表示させたい！なのに「ヘッダーを分割しない」が解除できないからできないよ～～～( ﾉД`)ｼｸｼｸ…[/st-kaiwa-2576] まずは結論から。原因は、「ヘッダーを分割しない」を解除できないのは、アフィンガーの子テーマ「JET」の仕様だからです。なので、「JET」の設定をちょちょいと弄れば、あっさり解除できます。ちなみに設定変更の方法は「JET」の管理画面から設定変更スタイルシート（CSS）を書き換えるこの２パターン ...

AFFINGER6専用機能

【AFFINGER6 デメリットまとめ】ダメなところ全部正直に答えます！

【初心者向け】デザインがおしゃれで使いやすいWordPress有料テーマ３選

【稼ぎたいブログ初心者向け】買って損しないWordPress有料テーマはこれ一択

保護中: 手順説明に使うスクショ画像をわかりやすく編集する方法

AFFINGER6は初心者には難しい？使いこなせないのは本当か？

＼ここでしか手に入らない／当サイト限定の豪華特典プレゼント