KAZU
2017年からAFFINGERを使い続け、複数の有料テーマも試してきたサイト運営者。
THE AFFINGERでは、AFFINGERのデザイン、表示設定、カスタマイズを中心に、実際の運営で使える情報を発信。
裏側ではAIと融合した運営にも取り組み、AIエージェントを使った検証・改善・サイト制作の自動化も進めている。
今回は、ブロックエディタでAFFINGER専用メモボックス(メモブロック)を使いこなす方法(基本編)として解説していきます。 メモボックスは2種類に分かれます。 段落スタイルのメモボックス AFFINGER専用ブロックのメモボックス ここでは、AFFINGER専用ブロックのメモボックスの使い方について、詳しく解説していきます。 段落スタイルのメモボックスの使い方については、以下の記事に詳しく書いているので、2種類を使い分けたい方はぜひチェックしてください。 使用するのは「ブロックエディタ」です。「クラシッ ...
今回は、ブロックエディタでマイボックスを使いこなす方法(基本編)として解説していきます。 マイボックスとは、AFFINGER6の専用ブロックのひとつです。 AFFINGER6で使えるボックスの中でも「マイボックス」は使い勝手がいいのでよく使います。 ここでは、AFFINGERの使い方にまだなれていない方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。 使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。 AFFINGER6専用「Gutenbergプラグイ ...
ドロップシャドウとは、文字や画像に対する視覚効果のひとつで、対象の輪郭の脇に影が落ちているような演出を行うことです。 簡単に言うと、影を演出することで浮いているように見せられる効果のことです。 AFFINGER6は、ドロップシャドウを追加したい装飾ブロックを、ピンポイントで設定することができます。 段落スタイルのボックスとAFFINGER専用のボックスにメリハリをつけたい!ドロップシャドウありとなしをうまく使い分けたい!AFFINGER6を使っている他の人と差別化したい! という方はぜひ参考にしてください ...
AFFINGER6のカスタムボタンには、「影」または「ドロップシャドウ」をつけることができます。 「影」と「ドロップシャドウ」はまったく別物。 簡単に説明すると、 「影」→ボタンが立体的に見える「ドロップシャドウ」→ボタンが浮いて見える という違いがあります。 それではそれぞれの設定を解説していきます。 カスタムボタンに「影」をつける手順 カスタムボタンに影を追加するのは、ブロック編集の「レイアウト・デザイン設定」にて行います。 1.新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿入 ...
ここでは、「簡易会話」と「会話ふきだし」に影(ドロップシャドウ)を追加する方法について解説します。 「簡易会話」とは、段落のスタイルから挿入できるふきだしのこと。 「会話ふきだし」とは、AFFINGER専用のふきだしブロックです。 この2種類のふきだしの使い分けについては、こちらの記事に詳しく書いています。 参考 会話ふきだしに影を追加するには、ドロップシャドウを追加する必要があります。 簡易会話であれば、ボックスなどと一緒にドロップシャドウを追加することができるんですが、会話ふきだしは個別に設定しないと ...
ブログ記事を書いていて、 「もう少し会話っぽくしたい」「読みやすさを工夫したい」 そんなときに役立つのが AFFINGER6の「会話ふきだし」 です。 AFFINGERの標準機能だけで手軽に会話形式を表現できるので、レビュー記事や解説記事に取り入れると、読みやすさがアップします。 この記事では、 2種類のふきだしの違いと使い分け方 設定方法とカスタマイズ手順 実際に記事に挿入する方法 を順番に解説していきます。 さらに後半では、応用的な活用アイデアもまとめていますので、ぜひ参考にしてください。 2種類ある ...
今回は、ヘッダーカードを表示させるための設定とカスタマイズについて解説していきます。 ヘッダーカードとは、ヘッダーの下にある、画像にテキストが入っているカードタイプのリンクのことです。 ヘッダーカード ヘッダー下は、ユーザーの目に止まる可能性が高い場所。 ここに見てもらいたいカテゴリのページやタグのページへのリンクを表示させておくことで、回遊率を上げようという作戦です。 これも内部SEO対策のひとつですね。 そこで今回は、 ヘッダーカードを表示させるための設定(AFFINGER管理)ヘッダーカードの画像サ ...
「デフォルトのブログカードではもの足りない……」 「もっと内部リンクを目立たせたい!」 という方におすすめの方法を紹介します。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」の変更 「背景色」の変更 枠内に「まるもじ」や「ふきだし」の挿入 これらが可能になります。 ここでは、大きく分けて2タイプの作り方を紹介します。 グループ化するタイプ マイボックスを使用するタイプ それでは、ブログカード風内部リンクの作り方を詳しく解説していきます。 グループ化タイプのブログカード風内部リンクの作り方 ...
AFFINGER6のデフォルト機能で作れるブログカードを紹介します。 ブログカードの作り方は大きく分けて2つ。 クラシック版の段落ブロックの中で作るブロックエディタで作る AFFINGER6で作れるブログカードは4種類。 それにプラスして、ブログカード風の内部リンクがあります。 クラシック版の段落の中で作るブログカード CHECK(ふきだし)参考 ブロックエディタで作るブログカード 埋め込みラベルあり記事IDを使ったブログカード風の内部リンク それぞれ詳しく解説していきます。 AFFINGER6で作れるブ ...
AFFINGER6には「アニメーション」機能があります。 アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。 たとえば、 注意 ふきだしをバウンドさせたり・・・ 注目 まるもじのアイコンを横揺れさせたり・・・ ポイント ふきだしをふわふわさせつつアイコンをブルブルさせたり・・・ といったことが簡単にできます。 ブロックスタイルにアニメーションを追加する方法 今回アニメーションクラスを追加するのは、段落スタイルの「ふきだし」と「まるもじ」です。 ...