アフィンガー（AFINGER）のトップページなどに「記事一覧」を設置することは多いですが、記事一覧もかわいく（かっこよく）デザインしたいものです。AFFINGER の標準機能でもアイキャッチを大きくしたりなど、ある程度のデザインはできますが、もっと変えていきたいときもあります。

おしゃれなサイトを作る方法

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

記事一覧をかわいくデザインした例

記事一覧をかわいくデザインしたサンプル（例）です、動画でご紹介しています。

再生してご覧くださいませ。

記事一覧のアイコンやフォントを大きくして見やすくするとともに、マウスオーバーで記事一覧の記事部分を背景色を変えて少し浮き上がらせています。

実際のカスタマイズ方法を紹介します。

記事一覧のカスタマイズ方法

■ サムネイル画像を大きくかわいくする

サムネイル画像をかわいくします。大きく表示することでアフィンガー感を無くし、ユーザーにかわいく見せる雰囲気を出します。

WordPress の管理画面から「AFFINGER 管理」→「全体設定」を選択します。

■ カテゴリーアイコンを表示

記事一覧にカテゴリーアイコンを表示します。

WordPress の管理画面から「AFFINGER 管理」→「投稿・固定記事」を選択します。

■ 記事一覧のタイトル文字を大きくする

タイトル文字を大きく見せることで、かわいさを増します。CSSで変更します。

WordPress の管理画面から「AFFINGER 管理」→「全体設定」を選択します。

■ 浮き出る演出

マウスオーバーで記事一覧の背景色が変わり、浮き出る演出です。一気に華やかになりますね。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

追記するコードは以下です。

/* 記事一覧カスタマイズ */
article .kanren dl {
  transition: all 0.3s ease;
  padding : 20px;
}

article .kanren dl:hover  {
  background-color: #FEECD2;
  transform: translateY(-10px);
  border-radius : 20px;
}

■ カテゴリーアイコンをかわいく

カテゴリーアイコンを丸くかわいい感じに変えます。アフィンガーの設定と、CSSで対応します。

「WordPress」の管理画面から、「外観」→「カスタマイズ」→「見出しタグ（hx） / テキスト」→「カテゴリ」を選択します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

追記するコードは以下です。

/* カテゴリアイコン */
span.catname {
  border : 1px solid #ffab57;
  font-size : 14px !important;
}

/* 説明とカテゴリアイコンの間をあける */
article .kanren dl .st-excerpt {
  margin-bottom : 10px;
}

■ 完成

完成です。かわいい感じの記事一覧になりました。

CSS を使うと、いろいろな表現ができて楽しくなりますね。

AFFINGER のお役立ちテクニックはこちら

まとめ：記事一覧をかっこよく（かわいく）デザインする方法

アフィンガーの記事一覧をかっこよく（かわいく）デザインすると、サイトの雰囲気も変わって、さらに楽しくなりますね。本記事では、記事一覧のデザインをかわいくする方法を紹介しました。

かっこいい（かわいい）デザインでサイトを作ってくださいね。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

「AFFINGER」の情報、テクニック一覧はこちらをクリック！

電気通信事業法改正に伴う表記

Copyright © 2026 ENJOY AFFINGER All Rights Reserved.

AFFINGER を使っていて、ある日突然「デザインが崩れた」「見出しやタイトルの背景が白くなった」でお困りの方いますでしょうか？

それは、TOC+（Table of Contents Plus）のアップデートの影響かもしれません。

AFFINGER6 × Table of Contents Plus（バージョン バージョン 2309）で影響が出ます。

おしゃれなサイトを作る方法

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

デザインが崩れる例

実際にデザインがどのように崩れるかを見てみましょう。

基本的に白色背景が多くなり、タイトルや H1～H6 のデザインが初期化されます。スタイルの CSS が適用されなくなった感じですね。これは TOC+（Table of Contents Plus）のバージョンアップをした際に発生する場合があります。

発生する組み合わせ

デザイン崩れの修正方法

■ AFFINGER の設定で直す

AFFINGER の設定で直すことができます。WordPress の管理画面から「AFFINGER 管理」→ 「全体設定」を選択します。

この方法で一発でサイト上のデザインは元に戻りますので、とても簡単です、ただし、１点デメリットがありますので注意が必要です。

デメリットは、「記事編集画面」のデザインが元に戻らない点です。

記事編集画面の見出し（H2～H6）のデザインが適用されず、素っ気ない感じのままです。

■ TOC+ をバージョンダウンする

TOC+ プラグインのバージョンを下げる（2302にする）ことで元に戻すことができます。バージョンを下げる方法です。

step
1プラグイン一覧

WordPress の管理画面から「プラグイン」→「インストール済みプラグイン」を選択します。

step
2プラグイン詳細

step
3プラグイン詳細

新しいウィンドウで、プラグインのページを表示します。

step
4ファイルをダウンロード

ファイル「table-of-contents-plus.2302.zip」がダウンロードされます。

step
5プラグインの適用（バージョンダウン）

WordPress の管理画面から「プラグイン」→「新規追加」を選択し、「プラグインのアップロード」をクリックします。

step
6インストールを実行する

step
7完了

完了です。動作確認してください。

AFFINGER のお役立ちテクニックはこちら

まとめ：アフィンガーのデザインが崩れた場合（TOC+ の影響）

AFFINGER6 × Table of Contents Plus（バージョン バージョン 2309）を設定した場合にデザインが崩れます。修正するには、以下２点のいずれかを実施します。

表示が崩れたときはかなり焦りますが、地道にちゃんと対応すれば元に戻せますので、安心してください。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR

PR

• サイト全体と記事ごとのアクセス推移
• ユーザーの導線の確認
• 人気記事の把握
• アクセス元の把握
• リンクや広告の効果測定（表示回数 / クリック数）
• クリックされた記事の把握

PR

＼気になったら、とりあえず見てみよう／

詳しくはこちら

「AFFINGER」の情報、テクニック一覧はこちらをクリック！

電気通信事業法改正に伴う表記

Copyright © 2026 ENJOY AFFINGER All Rights Reserved.

ブログ・アフィリエイトでは記事に「広告」と表記するよう求められる時代になってきました。

見たいメニューをクリックしてください。

おしゃれなサイトを作る方法

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

「広告」表示のサンプル

本記事では、AFFINGER の標準機能で実現した場合と、CSS または、JavaScript で自作したケースの３通りの方法を紹介します。

ポイント

AFFINGER の標準機能で表示するサンプル

AFFINGER の標準機能で実施した場合です。

タイトルの上（カテゴリ表記の左）に「広告」文字を表示します。

ポイント

更新日時の右に表示するように自作したケース

CSS、JavaScript で自作したケースです。

更新日（日時）の右側に「（記事内広告アリ）」を表示しています。

※表示文字は変更できます。

ポイント

タイトルの下に表示するように自作したケース

JavaScript で自作したタイトルの下に表示したケースです。

タイトルの下に文字を若干小さくして表示しています。

※表示文字は変更できます。

AFFINGER 標準機能を使う場合

AFFINGER 標準機能での実現方法です。CSS や JavaScript を使わないので、簡単で安心です。

■ AFFINGER の標準ウィジェット（タイトル下）を使う

AFFINGER の標準ウィジェットを使うケースです。表示する文言を変更できることと、タイトルの下に表示できることがメリットです。

WordPress の管理画面から「外観」→「ウィジェット」を選択します。

テキストウィジェット、またはカスタムHTMLウィジェットを用いて表記します。カスタムHTMLウィジェットの場合、文字列の下にタグ <hr> を入れると図のように横線を引けるので、ワンポイントにもなります。

■ 「広告」表示（AFFINGER 標準）

AFFINGER 標準機能で「広告」文字を表示します。

WordPress の管理画面から「AFFINGER管理」→「Google・広告 / AMP」を選択します。

CSS を使う

CSS を使って簡単に表示することも可能です。ある程度狙いたい場所に表示できるメリットがあります。

■ 更新日時（登録日時）の右側に表示する場合

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

設置するコードは以下です。

.updated::after {
    content: "（ ページ内にてアフィリエイト広告を利用しています ）";
}

■ タイトル（H1）の下に表示する場合

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

設置するコードは以下です。

body:not(.home) h1::after {
    content: "（ ページ内にてアフィリエイト広告を利用しています ）";
    display: block;
    font-size: 14px;
    margin-top: 5px;
    font-weight: normal;
}

ポイントを解説します。

JavaScript で自作する

JavaScript で自作するケースです。表示する文言を変更できることと、タイトルの下に表示できることがメリットです。

代わりに JavaScript を使いますので実装が面倒であるのがデメリットです。

■ 更新日時（登録日時）の右側に表示する場合

JavaScript で実現します。JavaScript は functions.php にてサイト記事に自動追記するように用意します。

WordPress の管理画面から「外観」→「テーマファイルエディター」を選択します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_targettag() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var targetTag = document.querySelector('.updated');

                if (targetTag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('span');
                    adElement.textContent = '（記事内広告あり）';

                    // スタイルを適用
                    // adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    targetTag.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_targettag');

ポイントを解説します。

表示しているもの（一番右側）が更新日ではなく、登録日の場合も同じコードで動きます。

■ タイトル（H1）の下に表示する場合

同じくWordPress の管理画面から「外観」→「テーマファイルエディター」の「functions.php」に設定します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_targettag() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var targetTag = document.querySelector('h1');

                if (targetTag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内に広告を表示しています）';

                    // スタイルを適用
                    adElement.style.fontSize = 'smaller';
                    adElement.style.marginBottom = '10px';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    targetTag.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_targettag');

ポイントを解説します。

AFFINGER のお役立ちテクニックはこちら

まとめ：広告（あり）」文字などを表示する方法

AFFINGERで記事上部に「広告」と文字表示する方法です。

表示するべきことは表示していきましょう。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR

PR

• サイト全体と記事ごとのアクセス推移
• ユーザーの導線の確認
• 人気記事の把握
• アクセス元の把握
• リンクや広告の効果測定（表示回数 / クリック数）
• クリックされた記事の把握

PR

＼気になったら、とりあえず見てみよう／

詳しくはこちら

「AFFINGER」の情報、テクニック一覧はこちらをクリック！

電気通信事業法改正に伴う表記

Copyright © 2026 ENJOY AFFINGER All Rights Reserved.

AFFINGER の「STINGER：カスタムボタン」は便利ですね。しかし、マウスオーバーでも強調されないので若干気が付きにくい。

おしゃれなサイトを作る方法

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

AFFINGER の「カスタムボタン」の色反転のサンプル

AFFINGER のカスタムボタンでマウスオーバーで色を反転するサンプルです。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

パソコンで表示した場合、マウスオーバーで色を反転させています。スマホの場合はタップで他URLに移動してしまうので、ちょっとわかりにくいですね。

「カスタムボタン」の色反転を作る方法

実際に作る方法です。CSS を使って実現します。

step
1カスタムボタンを作る

AFFINGER の部品「STINGER：カスタムボタン」を使ってボタンを作ります。

色を反転させたときに全体に色が付いて見栄えをよくするために、もともとのボタンの色は枠線＋文字色で背景白のボタンに設定しています。

step
2CSS を設定する

ボタンに「クラス名」を付与する。

step
2CSS を設定する

CSS を設定して色の反転を実現します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

設定する CSS は以下です。

.my-custom-button-red:hover {
    background:#E92F3D !important;
}

.my-custom-button-red a{
    transition: 0s !important;
}

.my-custom-button-red:hover a{
    color : #ffffff !important;
    opacity : 1.0 !important;
}

ポイントを説明します。

※青色のボタンの場合は背景色を「 #0693E3 」に設定します。

完成です。

AFFINGER のお役立ちテクニックはこちら

まとめ：カスタムボタンをマウスオーバーで色を反転させる方法

AFFINGER のカスタムボタンでマウスオーバーで色を反転する場合は、CSS で設定します。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

かっこいい記事デザインでサイトを作ってくださいね。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

「AFFINGER」の情報、テクニック一覧はこちらをクリック！

電気通信事業法改正に伴う表記

Copyright © 2026 ENJOY AFFINGER All Rights Reserved.

WordPress のテーマ「AFFINGER」には、下線傾向マーカー機能があり、文章中に強調したい箇所にマーカーを付けることができます。

マーカーは青や赤など色鮮やかですが、マーカーを付けると文字がボールド（太字）になり、主張が強くなりすぎると感じる場合があります。

ポイント

通常利用の場合（太字）

ポイント

太字やめた場合

太字を辞めたほうがすっきり見えます。（ただし強調度合いは下がります）

おしゃれなサイトを作る方法

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

AFFINGAR のマーカー

AFFINGER のマーカーは２種類（合計６色）設定できます。

■ ブロックエディタでマーカーを使う方法（２種類）

ブロックエディタの場合は、文章を選択し、ツールバーから「マイ細マーカーＡ」もしくは「マイ細マーカーＢ」を指定することで下線傾向マーカーを利用します。

■ クラシックブロック（クラシックエディタ）の場合（４種類）

クラシックブロック（クラシックエディタ）の場合は、文章を選択し、スタイルからマーカーで各色を指定することで下線傾向マーカーを利用します。

AFFINGAR のマーカーの太字を止める方法

AFFINGAR のマーカーの太字を止めたい場合は、CSS を利用して設定を上書きします。

各マーカーのクラス名

フォントをボールドから通常文字（ノーマル）に指定を変える場合は、「font-weight:normal」を利用します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を表示します。

追加CSSに、通常文字に変更するためのCSSを入力します。

通常文字に変更するためのCSSコード

.st-mymarker-s{
    font-weight:normal;
}
.st-mymarker-s-b{
    font-weight:normal;
}
.ymarker-s{
    font-weight:normal;
}
.rmarker-s{
    font-weight:normal;
}
.bmarker-s{
    font-weight:normal;
}
.gmarker-s{
    font-weight:normal;
}

保存して完成です。表示して確認しましょう。

AFFINGER のお役立ちテクニックはこちら

まとめ：下線蛍光マーカーを強制的に通常文字する方法

「AFFINGER」の下線蛍光マーカーを強制的に通常文字（太字ではない）にする方法です。

AFFINGER を使って素敵なサイトをデザインしてくださいね。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

「AFFINGER」の情報、テクニック一覧はこちらをクリック！

電気通信事業法改正に伴う表記

Copyright © 2026 ENJOY AFFINGER All Rights Reserved.