KAZU
2017年からAFFINGERを使い続け、複数の有料テーマも試してきたサイト運営者。
THE AFFINGERでは、AFFINGERのデザイン、表示設定、カスタマイズを中心に、実際の運営で使える情報を発信。
裏側ではAIと融合した運営にも取り組み、AIエージェントを使った検証・改善・サイト制作の自動化も進めている。
【AFFINGER6】よく使うWebアイコンをまとめました
ブログでよく使うWebアイコンをまとめました。 使用するWebアイコンは、 AFFINGERオリジナルアイコン Font Awesome REMIX ICON この3つです。 ※REMIX ICONを使用する方法は以下の記事を参考にしてください。 https://the-affinger.com/remixicon/ 参考記事 それぞれアイコンの形や大きさなどが微妙に違うんですが、ここではWebアイコンの特性は解説しません。 背景色 AFFINGER専用ブロック ショートコード使用 白 ◎ ○ 薄青 ○ ...
スマホのスライドメニュー内にバナー広告を表示させる方法
という悩みを解決します。 スライドメニュー内にバナー広告を表示させる方法は3パターンあります。 マイブロックに登録しショートコードをウィジェットに貼り付けるウィジェットに直接広告コードを貼り付けるブロックエディタで整形したコードをウィジェットに貼り付ける いちばん簡単なのは ①の「マイブロックに登録しショートコードをウィジェットに貼り付ける方法」です。 今回はこの方法を詳しく解説していきます。 「マイブロック」とは よく使うブロックパターンを登録しておくことで簡単に呼び出せるようになるAFFINGER6専 ...
サイトのタイトルに影(テキストシャドウ)を追加する方法
という悩みを解決します。 サイトのタイトルに影をつけるには、テキストシャドウにヘッダーを指定する必要があります。 といっても難しいことはありません。30秒で終わります。 それでは、ヘッダーに表示するサイトタイトルに「影」を追加する方法について解説していきます。 ※サイトタイトルを大きくする方法もあります！ https://the-affinger.com/title-css/ 参考 サイトのタイトルに影を追加する方法 サイトタイトルの影の追加は、テーマ管理の全体設定で行います。 具体的には、テキストシャド ...
サイトタイトルのサイズを大きくする方法｜CSSコードを追加する
という悩みを解決します。 結論から言うと、普通の設定ではなくCSSコードを追加する必要があります。 「CSSをいじるのは怖いなぁ…」 という方でも大丈夫。 アフィンガーにはCSSを追加できる項目があるので、コードのコピペだけで簡単に完了しますよ（約一分）。 ※サイトタイトルに影をつける方法もあります。 参考：サイトのタイトルに影(テキストシャドウ)を追加する方法 サイトタイトルのサイズを大きくする手順 サイトタイトルのサイズを大きくする手順は以下の通り。 追加するCSSコードをコピーするカスタマイズの「追 ...
【設定2つ】AFFINGERのサムネイル画像サイズを大きくする手順（記事一覧/サイドバー）
という悩みを解決します。 AFFINGER6には、サムネイル画像を大きくする設定があるので、そこを変更するだけでサムネイル画像は大きくなります。 イメージとしては以下のような感じです。 大きさ変更イメージ ただし、サムネイル画像を大きくすることによるデメリットもあります。 そこで今回は、サイドバーのサムネイル画像を大きくする設定と、それに伴うデメリットもあわせて解説します。 サイドバーのサムネイル画像を大きくする設定 サイドバーのサムネイル画像を大きくするための設定は「テーマ管理（AFFINGER 管理） ...
AFFINGER購入特典まとめ｜中身を全部その場で試せます
AFFINGER7の購入特典には、「公式特典」と「限定特典」の2種類があります。 公式特典は、AFFINGERが用意しているプラグインなど。どこから買っても同じものが付きます。 公式特典の中身と、購入ルートによる違いは「AFFINGER7の購入方法」でまとめています。 限定特典は、紹介しているサイトが独自に用意しているもの。サイトごとに中身がまったく違います。 このページで紹介するのは、後者の当サイト限定特典です。 中身は全部、私が自分のサイトで使うために作った自作ツールです。なので、ほかでは手に入りませ ...
保護中: AFFINGER6「ドロップシャドウ」の適応ID及びCSSクラス一覧
この投稿はパスワードで保護されているため抜粋文はありません。
AFFINGER6「番号付きリスト」の数字を途中から始める方法
番号付きリストの数字を途中から始める方法について解説します。 使用するのはブロックエディタです。 よくあるのが、カラムを使って番号付きリストを横並びにするパターン。 例 一番目の説明二番目の説明三番目の説明 四番目の説明五番目の説明六番目の説明 七番目の説明八番目の説明九番目の説明 手順としては簡単で、番号付きリスト設定の「初期値」を変更するだけでOK。 ただし、「スタイル」によっては、途中から始められないものもあります。 そこらへんも詳しく解説していきますね。 番号付きリストの数字を途中から始める方法 ...
AFFINGER6「マイブロック」便利な使い方｜記事作成を効率化するショートコード活用術
そんな疑問をもっている方に向けて、AFFINGER専用機能「マイブロック」活用術 を解説します。 私自身、AFFINGERを長年使ってきて「マイブロックをどう使うか」で記事の執筆スピードも、デザインの統一感も大きく変わると実感してきました。 基本的な登録・挿入方法 ショートコードを使った共通化 効率化のための運用テクニック まで、他の記事では紹介されていない実践ノウハウをまとめています。 この記事を読めば「もう1回同じ設定を繰り返す手間」から解放され、記事執筆がグッと楽になりますよ。 AFFINGER6「 ...
【図解あり】AFFINGER6のタイトル付きフリーボックスの使い方（初心者でも簡単）
今回は、AFFINGER6専用ブロック「タイトル付きフリーボックス」を使いこなす方法 を解説します。 「タイトル付きフリーボックス」は、旧名称「見出し付きフリーボックス」と呼ばれていた機能です。 記事の中で強調したい部分を、見やすく・わかりやすく装飾できる便利なブロックです。 本記事で扱う内容 基本の使い方 写真つきでの操作手順 アニメーションを使った応用例 初心者の方でも理解できるよう、順を追って丁寧に説明していきます。 この機能を使うには、以下の条件が必要です。 使用エディタ： ブロックエディタ（Gu ...