KAZU

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

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

ブログ記事を書いていて、 「もう少し会話っぽくしたい」「読みやすさを工夫したい」 そんなときに役立つのが AFFINGER6の「会話ふきだし」 です。 AFFINGERの標準機能だけで手軽に会話形式を表現できるので、レビュー記事や解説記事に取り入れると、読みやすさがアップします。 この記事では、 2種類のふきだしの違いと使い分け方 設定方法とカスタマイズ手順 実際に記事に挿入する方法 を順番に解説していきます。 さらに後半では、応用的な活用アイデアもまとめていますので、ぜひ参考にしてください。 2種類ある ...

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

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

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

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

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

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

「ヘッダーエリア全体に画像を表示させたいのに、うまくいかない……」 「ヘッダー画像エリアにしか画像が表示されない……」 そんな悩みを解決します。 ヘッダーエリア全体に画像が表示されないのは、設定場所が間違っているからです。 一つひとつクリアしていき、ヘッダーエリア全体に画像が表示できるようにしていきましょう。 それでは詳しく解説していきます。 ヘッダー画像が表示されない原因設定場所が間違っている AFFINGERの設定項目がたくさんありすぎて、どこに画像を挿入すればいいのかわからない……という気持ちもわか ...