AFFINGER7 EX / POST LIST / RESPONSIVE CARD DESIGN AFFINGER7 EXで記事一覧をカード化する方法 PC・スマホ対応の設定と注意点
「新着記事やカテゴリーの記事をカード型にしたい」「スマホだけ1列にしたい」「EX版のカード化は通常版と何が違う?」と迷っていませんか。
はまちゃんねるでもAFFINGER7 EXを使用しています。この記事では、テーマのカード表示機能と記事一覧(ID)ブロックを分け、設定手順とおすすめの列数を図解付きで解説します。
通常版とEXの違い PC・スマホの列数 ブロックのカード化 2026年版
記事一覧のデザインは、写真をきれいに並べることだけが目的ではありません。読者が「自分の知りたい記事」をすぐに見つけられることが大切です。
QUICK ANSWER / 先に結論 トップページやカテゴリーの標準記事一覧なら、AFFINGER7通常版でもカード表示が可能です。 この記事の実例は「3,3,1」(PC・中間幅3列、スマホ1列)です。中間幅で窮屈なら「3,2,1」に調整すると読みやすくなります。任意の記事を選んでカード化する「記事一覧(ID)ブロック」はEXの専用機能です。
✓ サイト全体の標準記事一覧:AFFINGER7通常版・EXの両方が対応 ✓ 記事内の「記事一覧(ID)ブロック」のカード化:EX専用 ✓ スマホは1列から試して、タイトルの読みやすさを優先 ✓ 2026年版の設定場所は「AFFINGER管理 → トップ/記事一覧」を確認
VISUAL GUIDE / 00 カード化の目的は、目的の記事をすぐに見つけてもらうこと
VISUAL 写真 内容を想像しやすく
TITLE 題名 疑問を見つけやすく
LAYOUT 列数 画面幅に合わせる
この記事で分かること
01|カード化とは? 02|通常版とEXの機能の違い 03|標準記事一覧をカード化する手順 04|PC・スマホの列数設定 05|アイキャッチとタイトルの整え方 06|EX限定の記事一覧ブロック 07|はまちゃんねるの実例 08|見やすいカードの5つの工夫 09|表示崩れの原因と対策 10|公開前の表示・SEO確認 11|EXを購入すべきか 12|よくある質問 SUMMARY 関連記事 01 / FIRST STEP
AFFINGER7 EXの記事一覧カード化とは? 記事一覧のカード化とは、アイキャッチ画像と記事タイトルなどをまとまりとして並べ、一覧から気になる記事を探しやすくする表示方法です。ブログのトップページやカテゴリー一覧で、写真と見出しを見比べたいときに向いています。
例えば、ガジェットのレビュー、WordPressの設定解説、家族向けの暮らし情報など、複数ジャンルがあるブログでは、一覧の中で記事の違いをすぐに判断できることが重要です。
LIVE PREVIEW / 実際の記事カード 下の実例には、はまちゃんねるの投稿データから記事タイトルとアイキャッチを自動取得するAFFINGER7のカテゴリー記事スライドショー を設置しています。作例の画像ではなく、表示されたカードから実際の記事へ移動できます。
実際に動く記事カードを見る
見た目をカード化するだけでSEOが上がる? カード表示に変更しただけで検索順位が上がるとは限りません。記事の内容や内部リンクに加え、一覧から目的の記事へ進みやすいこと、画像の読み込みが重くなりすぎないことが大切です。
02 / STANDARD VS EX AFFINGER7通常版とEX版でカード化できる範囲は違う 2026年のAFFINGER7では、トップページ・カテゴリーなどの標準記事一覧のカード表示が通常版にも対応しています。 一方、任意の記事を選んで表示する「記事一覧(ID)ブロック」のカード化は、公式マニュアルでEX限定となります。
機能・表示する場所 AFFINGER7通常版 AFFINGER7 EX トップページの標準記事一覧 対応 対応 カテゴリー・アーカイブの標準一覧 対応 対応 標準一覧のPC・スマホ列数指定 対応 対応 「記事一覧(ID)ブロック」のカード化 EX専用機能は非搭載 対応 記事一覧(ID)ブロックのスライド表示 EX専用機能は非搭載 対応 独自HTML・CSSによる記事カード 実装可能(手動管理) 実装可能(手動管理)
VISUAL GUIDE / 02 カード化は2種類。まず「どこに表示するか」を選ぶ
DEFAULT POST LIST 自動で並ぶ記事一覧 トップ・カテゴリー・アーカイブの一覧。通常版とEXの両方が対象です。
SELECTED POST BLOCK 指定した記事の一覧 記事IDを選んで並べるブロック。カード化・スライド表示はEX向けです。
公式リリース情報と記事一覧ブロックのマニュアルをもとに整理しています。 テーマそのものの違いを詳しく知りたい方には、私が整理したAFFINGER7 EXと通常版の機能比較 もご参考いただけます。
AFFINGER7/EXの公式リリース案内 にも、標準一覧のカード化に関する更新内容が掲載されています。
03 / SETTINGS 標準の記事一覧をカード化する設定手順 トップページやカテゴリー一覧を変えたい場合は、記事編集画面でカードを1枚ずつ作る必要はありません。AFFINGER管理画面から標準一覧の表示設定を変更します。
01 現在のテーマを確認する WordPress管理画面の「外観」→「テーマ」でAFFINGER7/AFFINGER7 EXを使用しているか確認します。既存サイトでは設定変更前にバックアップを取っておきましょう。
02 AFFINGER管理を開く 管理画面の「AFFINGER管理」から「トップ/記事一覧」を確認します。2026年版ではカードデザインの設定項目がこのタブへ移動しています。
03 記事一覧のカードデザイン化を有効にする 「記事一覧のカードデザイン化」関連の項目を探し、適用する表示範囲と列数を選びます。使用しているバージョンにより名称や配置が異なる場合があります。
04 PC・タブレット・スマホの列数を設定 たとえば「3,2,1」のように、3つの画面幅に対応した列数を半角カンマで区切って指定します。
05 保存後、トップ・カテゴリー・関連記事を確認 パソコンとスマートフォンで、画像の切れ方・タイトル・余白・記事へのリンク先をチェックします。
旧マニュアルの画面と違う場合 従来の説明には「テーマ管理 → 投稿・固定記事」と記載されたものがあります。AFFINGER7のリリース情報では「トップ/記事一覧」への移動が案内されているため、現在の管理画面に合わせて設定してください。
VISUAL GUIDE / 03 設定場所の見つけ方(管理画面の概念図)
AFFINGER管理
設定タブ トップ/記事一覧
対象機能 記事一覧のカードデザイン化
列数の例 3,2,1
確認 トップページ・カテゴリー・関連記事
実際のWordPress管理画面を再現したものではありません。設定項目名・配置はテーマのバージョンにより変わる場合があります。
04 / RESPONSIVE PC・タブレット・スマホの列数は「3,2,1」が基本 AFFINGERのカード表示では、閲覧幅によって列数を切り替えられます。公式マニュアルでは、960px以上・600〜959px・599px以下の順に指定する方式です。下の実例はご指定の「3,3,1」を使用しています。
ACTUAL SETTING / 今回使用する表示数 パソコン3列・中間幅3列・スマホ1列(3,3,1) を実際のカテゴリー記事スライドショーに設定しています。小さい画面では1枚ずつスライドするため、長い記事タイトルも確認しやすい構成です。
中間幅で3列が窮屈な場合は、公式マニュアルが案内する 3,2,1 に変更する方法もあります。実際のカードを表示する
設定例 PC 中間幅 スマホ 向いているサイト 3,3,1(今回の実例) 3列 3列 1列 提供いただいたショートコードの実際の設定 3,2,1 3列 2列 1列 写真と記事タイトルの見やすさを優先 2,2,1 2列 2列 1列 タイトルが長い解説・レビュー記事 3,3,2 3列 3列 2列 短いタイトル・統一画像のギャラリー型
スマホ2列は一度に多くの記事を見せられますが、長いタイトルが窮屈になりやすい点に注意が必要です。今回の実例は「3,3,1」です。中間幅も含めた読みやすさを優先する場合は、「3,2,1」または「2,2,1」と見比べてください。
設定のルール 公式マニュアルでは「1,2,3」のように小さな画面ほど列が増える並びは指定できません。また599px以下は最大2列です。
05 / THUMBNAIL アイキャッチ画像とタイトルを整えると一覧が読みやすい カード化したときに最初に目に入るのはアイキャッチ画像です。記事ごとに比率がばらばらだと、一覧の高さや視線の動きが不揃いになりやすくなります。
01 記事ごとにアイキャッチを設定 記事内容を正しく示す画像を用意します。小さなカードでは文字数を増やしすぎない方が伝わりやすくなります。
02 画像の縦横比を確認 AFFINGER管理の「全体設定」にある「スライド・カード型 サムネイル画像の縦横比」の設定を確認します。
03 記事タイトルの長さを見直す 一覧では後半が省略される場合もあります。何を解説する記事なのか、タイトル前半から伝わる形にしておきます。
04 画像サイズと読み込みを確認 アイキャッチ画像が大きすぎるとページの読み込みが重くなるため、適切な解像度と圧縮を意識します。
VISUAL GUIDE / 05 画像比率とタイトルの揃い方を確認
説明用のモックアップです。実際のテーマ出力とは異なります。 また、サムネイルの縦横比を変更しても、元の画像の重要な部分が切れてしまうことがあります。写真の被写体や文字の配置も合わせて確認しましょう。
06 / EX POST BLOCK EX限定「記事一覧(ID)ブロック」をカード化する方法 トップページの自動一覧とは別に、「この3記事を読んでほしい」というおすすめ記事を本文や固定ページに表示したい場合は、記事一覧(ID)ブロックが便利です。
01 表示したい記事のIDを確認 WordPressの投稿一覧から記事IDを調べます。記事のURLやスラッグではなく、数値のIDを使います。
02 ブロックエディターで記事一覧ブロックを追加 ブロック挿入メニューからAFFINGERの「記事一覧(ID)」ブロックを探して追加します。
03 記事IDを指定 IDを半角数字で入力し、複数記事の場合は半角カンマで区切ります。
04 EXの「カード化」を有効化 ブロック設定でカード化を選びます。スライドショーを使う場合は別途表示数などを設定します。
05 公開画面でカードを確認 編集画面では記事が一覧表示されない仕様のため、プレビューや公開ページで最終確認します。
VISUAL GUIDE / 06 記事一覧(ID)ブロックの使いどころ
ページ内のおすすめ記事
記事ID 123,456,789 (入力例)
EX限定設定 カード化:ON
表示位置 固定ページ・記事の中など
数字は説明用の例です。サイトの記事IDを示すものではありません。 このブロックは、記事を「関連記事としてまとめる」「特集ページに関連する解説を配置する」ときに向いています。なお、手動で見出し・画像・リンクを並べたHTMLカードとは異なり、テーマの投稿情報をもとに表示する仕組みです。
公式の操作項目は記事一覧(ID)ブロックのマニュアル で確認できます。
07 / HAMA CHANNEL / LIVE CARDS はまちゃんねるの記事を実際のカードスライダーで表示 ここではAFFINGER7のカテゴリ一覧スライドショー を使用しています。カテゴリーIDに登録された投稿(子カテゴリーを含む)を、投稿IDの新しい順に読み込み、アイキャッチ画像と記事タイトルを表示します。
LIVE CARDS / 実際の記事一覧 パソコンでは3枚・中間幅では3枚・スマートフォンでは1枚ずつ表示します。カードを選ぶと個別の記事へ移動できます。
2026/11/2
AFFINGER7 EXで記事一覧をカード化する方法|PC・スマホ対応
AFFINGER7 EX / POST LIST / RESPONSIVE CARD DESIGNAFFINGER7 EXで記事一覧をカード化する方法PC・スマホ対応の設定と注意点「新着記事やカテゴリーの記事をカード型にしたい」「スマホだけ1列にしたい」「EX版のカード化は通常版と何が違う?」と迷っていませんか。はまちゃんねるでもAFFINGER7 EXを使用しています。この記事では、テーマのカード表示機能と記事一覧(ID)ブロックを分け、設定手順とおすすめの列数を図解付きで解説します。通常版とEXの違い ...
ReadMore
2026/11/1
エックスサーバーへのWordPress移行方法|移転前に確認すべき10項目
XSERVER / WORDPRESS MIGRATION GUIDE 2026 エックスサーバーへのWordPress移行方法移転前に確認すべき10項目 「WordPressを別のサーバーへ引っ越したいけれど、記事が消えたり、メールが止まったりしないか心配」。そんな方に向けて、移転前の準備から切り替え後の確認までを順番に整理しました。 はまちゃんねるでは、エックスサーバーとAFFINGER7 EXを使ってWordPressサイトを運営しています。普段のPHP設定・WAF・バックアップの管理で大切にしてい ...
ReadMore
2026/11/1
AFFINGER7 EXのレビューブロックの使い方|商品レビュー実例も紹介
AFFINGER7 EX / REVIEW BLOCK / HAMA CHANNELAFFINGER7 EXのレビューブロックの使い方実際の商品レビュー記事から活用例を紹介「レビューブロックって何ができる?」「星評価やアバターはどうやって使う?」という疑問を、実例と一緒に整理します。はまちゃんねるではAFFINGER7 EXで記事を制作しています。今回は公開中のG-SHOCK、Coleman、Naturehikeのレビューを材料に、商品の良さと注意点が伝わる使い方を考えてみました。EX限定機能星評価・アバ ...
ReadMore
2026/11/1
WordPressブログの初期費用はいくら?1年・3年の運営コストを試算【2026年】
WORDPRESS BLOG / REAL COST GUIDE 2026 WordPressブログの初期費用はいくら?1年・3年の運営コストを実際の料金で試算 「WordPressは無料と聞いたけれど、ブログを始めるにはいくら必要?」「月額料金と、最初に払う金額が分かりにくい」と迷っていませんか。 私はエックスサーバーとAFFINGER7 EXを使ってWordPressサイトを運営しています。今回は無料テーマで始める場合と有料テーマを使う場合を分け、エックスサーバーの公式料金をもとに、1年間・3年間の支 ...
ReadMore
2026/11/1
AFFINGER7 EXで全幅デザインを作る方法|LPワイドの設定と注意点
AFFINGER7 EX / LP WIDE DESIGN / WORDPRESS AFFINGER7 EXで全幅デザインを作る方法LPワイドの設定と注意点を解説 「AFFINGER7 EXで画面いっぱいに背景色を広げたい」「LPワイドにしたら文章まで横に伸びてしまった」「普通の1カラムと何が違うの?」と迷っていませんか。 はまちゃんねるではAFFINGER7 EXを使用し、WordPressの記事・サイト制作を行っています。今回は、公式マニュアルで案内されているLPワイドの設定場所・ブロックの組み方・公 ...
ReadMore
2026/11/1
エックスサーバーの独自ドメイン永久無料は本当にお得?適用条件と注意点
XSERVER DOMAIN BENEFIT / 2026 GUIDEエックスサーバーの独自ドメイン永久無料は本当にお得?適用条件と注意点を徹底解説「永久無料と書いてあるけれど、本当にずっと0円?」「12か月契約と24か月契約では何が違う?」エックスサーバーを使ってWordPressサイトを運営している私が、公式の適用条件を整理しながら、毎年の節約額・2つ目のドメインの制限・解約時の注意点を詳しく解説します。契約前にも、すでにエックスサーバーを使っている方にも役立つ内容です。独自ドメイン永久無料最大2個取 ...
ReadMore
2026/11/1
AFFINGER7 EXのデザイン実例集|実際に制作したページを公開
AFFINGER7 EX / DESIGN SHOWCASE / HAMA CHANNELAFFINGER7 EXのデザイン実例集実際に制作した6つのページを公開「AFFINGER7 EXで、どんな記事が作れるの?」「購入しても、自分のサイトで使いこなせる?」テーマを選ぶ前に、完成したページの雰囲気を見てみたいですよね。はまちゃんねるでは実際にAFFINGER7 EXを使い、キャンプ用品や腕時計のレビューから、家電の比較記事、WordPressの解説記事まで制作しています。今回は、その中から6記事を公開。 ...
ReadMore
2026/11/1
エックスサーバーとConoHa WINGはどっち良い?Web制作者が用途別に比較
XSERVER VS CONOHA WING / WORDPRESS & WEB DESIGNエックスサーバーとConoHa WINGはどっち?Web制作者が用途別に徹底比較「WordPressを始めるならどっちがいい?」「料金だけで選んで後悔しない?」と迷っていませんか。はまちゃんねるでは、実際にエックスサーバーを使ってWordPressサイトを運営しています。記事の更新、AFFINGER7でのデザイン制作、PHP設定、バックアップやWAFの確認など、公開後の運用まで行う立場から、二つのサーバー ...
ReadMore
2026/11/1
エックスサーバーのWordPressクイックスタート完全ガイド|申込前の注意点も解説
XSERVER QUICK START GUIDE / WORDPRESS 2026エックスサーバーのWordPressクイックスタート完全ガイド申込前の注意点も解説「WordPressを始めたいけれど、サーバー・ドメイン・SSLの設定が難しそう」「クイックスタートは無料お試しと何が違うの?」と迷っていませんか。私が運営するはまちゃんねるでも、エックスサーバーとWordPressを使って記事制作やサイトの管理をしています。これから始める方が申し込み画面でつまずかないよう、手順・料金・注意点・開設後の設定を ...
ReadMore
2026/11/1
AFFINGER7とSWELLはどっちが良い?料金・機能・デザインを徹底比較【2026年】
AFFINGER7 VS SWELL / WORDPRESS THEME COMPARISONAFFINGER7とSWELLはどっち?機能・デザイン・料金を比較「ブログを始めるなら、AFFINGER7とSWELLのどちらがいい?」「収益化を考えるならAFFINGER7?」「デザインが簡単なのはSWELL?」どちらも本格的なWordPressテーマですが、記事を書くときの操作感と、サイトをどこまで作り込むかに違いがあります。AFFINGER7 EXを使ってWebサイトを制作している「はまちゃんねる」の視点か ...
ReadMore
2026/11/1
エックスサーバーの料金は結局いくら?12・24・36ヶ月の総支払額を比較!
XSERVER PRICE GUIDE / 2026エックスサーバーの料金は結局いくら?12・24・36か月の総支払額を比較「月額693円って書いてあるけど、最初に払う金額はいくら?」「12か月・24か月・36か月、結局どれが得なの?」レンタルサーバーの料金は、月額表示だけを見ていると分かりにくいですよね。実際にエックスサーバーでWordPressサイトを運営するはまちゃんねるが、契約期間ごとの初回の支払総額、割引が終わった後の料金、ドメイン特典まで具体的に整理しました。総額を比較税込価格スタンダード中心 ...
ReadMore
2026/11/1
AFFINGER7 EX環境セットは49,800円の価値がある?内容と注意点
AFFINGER7 EX ENVIRONMENT SET / HAMA CHANNELAFFINGER7 EX環境セットは49,800円の価値がある?「WordPressテーマに約5万円は高くない?」「通常版のAFFINGER7とは何が違うの?」と迷っていませんか。はまちゃんねるではAFFINGER7 EXを使ってブログ記事やWebページを制作しています。記事を書くことと、記事を公開した後に改善すること。この2つを分けて考えると、EX環境セットの魅力も、買わなくてよいケースもはっきり見えてきます。49,8 ...
ReadMore
2026/11/1
AFFINGER7 EXは必要?実際に使って分かった通常版との違い
AFFINGER7 EX REVIEW / HAMA CHANNELAFFINGER7 EXは必要?実際に使うWeb制作者が通常版との違いを解説「通常版でも十分?」「EXを使えば何が変わる?」はまちゃんねるではAFFINGER7 EXを実際に使用し、ブログ・アフィリエイト記事・Web制作のためのWordPress運営を続けています。この記事では、EXが必要な人と不要な人を、公式仕様と実務の視点から整理します。EX実使用通常版と比較収益・Web制作2026年10月確認 QUICK ANSWER / 先に結論 ...
ReadMore
2026/11/1
AFFINGER7はおすすめ?実際に使うブロガー・Web制作者が本音レビュー
AFFINGER7 REVIEW / HAMA CHANNELAFFINGER7は本当におすすめ?実際に使うブロガー・Web制作者が徹底レビュー「有料のWordPressテーマって、本当に買う価値があるの?」「AFFINGER7なら、ブログの収益化やホームページの集客に役立つ?」そんな疑問に、AFFINGER7を使って実際にサイトを運営している「はまちゃんねる」の視点からお答えします。見た目の話だけでなく、記事制作、広告リンク、WordPressの調整、運営後の改善まで。良いところも、気になるところも隠さ ...
ReadMore
2026/11/1
エックスサーバーの評判は?実際に使うWeb制作者が料金・WordPressを解説
XSERVER REVIEW / WORDPRESS & WEB DESIGN エックスサーバーは本当におすすめ?実際に使うWeb制作者の視点で解説 「ブログを始めたいけど、サーバー選びで失敗したくない」「エックスサーバーって評判がいいけど、本当に必要?」と迷っていませんか。 私たちはまちゃんねるも、実際にエックスサーバーを使ってWordPressサイトを運営しています。記事制作、サイトデザイン、アフィリエイトリンクの設置、セキュリティ設定まで行う立場から、良いところだけでなく注意したい点も整理し ...
ReadMore
2026/10/16
ホームページ制作会社とフリーランスの違いとは?費用・品質・選び方を比較
WEB AGENCY VS FREELANCE ホームページ制作会社と フリーランスの違いとは? 費用・品質・選び方を比較 会社ホームページを外注するとき、 制作会社とフリーランスのどちらへ依頼するべきか。 費用やデザインだけでなく、 制作体制、SEO、納期、公開後の保守まで比較し、 自社に合う依頼先を見極める方法を解説します。 2026年版 制作会社 フリーランス 費用比較 依頼先診断付き 01 費用・見積もり 金額差が生まれる理由を比較 02 品質・専門性 肩書きではなく成果物で判断 03 制作体制・ ...
ReadMore
2026/10/20
ホームページの維持費はいくら?月額・年間の相場と内訳を解説 | 無料シュミレーター
WEBSITE MAINTENANCE COST / 2026 ホームページの維持費はいくら? 月額・年間の相場と内訳を解説 ホームページは制作費だけでなく、 公開後にもサーバー・ドメイン・保守などの費用がかかります。 月額1,000円程度で管理できるケースから、 毎月数万円かけて運用するケースまで、 費用に差が出る理由を具体的に解説します。 2026年版 月額・年間費用 WordPress 保守・管理 無料シミュレーター 01 自社管理 サーバー・ドメインの実費が中心 02 保守を外注 更新・バックアッ ...
ReadMore
2026/10/4
SNSだけでなくホームページも必要?Instagramだけでは足りない?役割と使い分けを解説
SNS VS WEBSITE SNSだけでなく ホームページも必要? 役割と使い分けを解説 Instagram、X、TikTok、LINEなどで 情報発信できる時代に、 「わざわざホームページまで作る必要がある?」 と迷う企業・店舗向けに、 SNSだけで足りるケースと、 ホームページを持った方がよいケースを解説します。 SNS集客 Instagram 会社HP SEO 中小企業 01 SNS 知ってもらう・つながる 02 ホームページ 詳しく調べる・比較する 03 Google検索 必要な人から見つけても ...
ReadMore
2026/10/4
ホームページとLPの違いとは?目的・SEO・費用・向いているケースを比較
WEBSITE VS LANDING PAGE ホームページとLPの違いとは? 目的・SEO・費用・ 向いているケースを比較 ホームページとLPは、 見た目ではなく「役割」が違います。 会社全体の情報を伝えるのか、 1つの商品・サービスへ行動を集中させるのか。 違いを理解すると、 自社に必要なのがどちらか判断しやすくなります。 ホームページ LP ランディングページ SEO Web広告 01 ホームページ 会社・事業の情報を複数ページで伝える 02 LP 1商品・1サービス・1行動へ集中 03 SEO 継 ...
ReadMore
2026/10/4
SEOで問い合わせを増やす方法|検索流入を売上につなげる手順
SEO TO LEAD GENERATION SEOで問い合わせを増やす方法 |検索流入を売上につなげる手順 検索順位やアクセス数が増えても、 問い合わせが増えるとは限りません。 SEOで成果を出すには、 「検索される」「クリックされる」「比較される」「問い合わせる」 までを一つの導線として設計する必要があります。 SEO 問い合わせ CVR改善 Search Console 中小企業向け 01 検索される 見込み客が使うキーワードを狙う 02 クリックされる 検索意図に合うタイトル・ページ 03 比較・ ...
ReadMore
2026/10/4
ホームページは何ページ必要?会社HPのページ数目安と決め方
HOW MANY WEBSITE PAGES? ホームページは何ページ必要? 会社HPのページ数目安と決め方 会社ホームページを作るとき、 「5ページで足りる?」 「10ページ必要?」 「SEOをするなら何ページ?」 と迷う方へ。 目的別のページ数目安と、 本当に必要なページの決め方を解説します。 会社HP ページ数 サイト構成 SEO ページ数診断付き 5〜7 会社案内型 まず会社の基本情報を伝えたい 8〜15 問い合わせ獲得型 サービス・実績・FAQまで伝える 15〜30 SEO・営業強化型 サービス ...
ReadMore
2026/10/4
ホームページ制作前に準備するもの20選|会社HPの依頼前チェックリスト
WEBSITE PREPARATION CHECKLIST ホームページ制作前に 準備するもの20選 |会社HPの依頼前チェックリスト ホームページ制作を依頼したいけれど、 「何を準備してから制作会社へ相談すればいい?」 という方向けに、 先に決めること、原稿・写真などの素材、 ドメイン・サーバー、予算、公開後の運用までまとめました。 20項目 会社HP向け 新規制作 リニューアル Webチェック対応 01 目的を決める 問い合わせ・採用・信頼・集客など 02 素材を集める 原稿・写真・ロゴ・会社情報 0 ...
ReadMore
2026/10/2
WordPressで会社HPを作るメリット・デメリット|向いている企業も解説
WORDPRESS FOR BUSINESS WEBSITE WordPressで会社HPを作る メリット・デメリット |向いている企業も解説 会社ホームページを作るとき、 「WordPressが定番らしいけれど、本当に自社にも合うのか」 と迷う企業担当者は少なくありません。 更新性、SEO、拡張性だけでなく、 公開後の保守やセキュリティまで含めて判断します。 企業サイト WordPress メリット デメリット 選び方 01 更新しやすい お知らせ・実績・採用情報・コラムを追加 02 拡張しやすい 事業 ...
ReadMore
2026/10/2
沖縄企業の採用ページ実態調査【2026年版】
OKINAWA RECRUITMENT WEBSITE SURVEY / 2026 沖縄企業の採用ページ 実態調査【2026年版】 沖縄県内に本社を置く企業20社の 公式ホームページ・公式採用ページを独自調査。 求人情報だけでなく、 給与、福利厚生、仕事内容、社員インタビュー、 採用FAQ、応募導線まで確認しました。 独自調査 20社 2026年10月 公式サイト確認 採用Web調査 95% 採用情報あり 19 / 20社で確認 75% 給与情報 15 / 20社で確認 40% 社員インタビュー 8 / ...
ReadMore
2026/10/2
ホームページ移管・引き継ぎチェックリスト【無料】
WEBSITE MIGRATION / HANDOVER ホームページ移管・ 引き継ぎチェックリスト 【無料】 制作会社変更、サーバー移転、WordPress引き継ぎ、 ドメイン移管で確認したい内容を80項目にまとめました。 PDF・Excel・Web版を無料で利用できます。 80項目 PDF無料 Excel無料 登録不要 制作会社変更対応 01 所有権 ドメイン・サーバー・CMS・解析 02 SEO 301・canonical・URL・サイトマップ 03 データ ファイル・DB・フォーム・外部連携 04 ...
ReadMore
2026/10/2
ホームページ制作 要件定義・RFPテンプレート【無料】
WEBSITE RFP TEMPLATE / 2026 ホームページ制作 要件定義・RFPテンプレート 【無料】 制作会社へ見積もり・提案を依頼する前に、 目的、対象ページ、必要機能、SEO、運用、納品条件までまとめられる無料テンプレートです。 Word版とExcel版を用意し、比較しやすいRFPの作り方も解説します。 Word無料 Excel無料 登録不要 20セクション 提案比較表付き 01 目的・課題 なぜ作るのかを制作会社と共有 02 ページ・機能 見積条件のズレを減らす 03 非機能・SEO 速 ...
ReadMore
2026/10/2
ホームページ公開前チェックリスト100項目【無料PDF・Excel】
WEBSITE LAUNCH CHECKLIST / 2026 ホームページ公開前 チェックリスト100項目 【無料PDF・Excel】 制作会社の納品前チェック、企業Web担当者の公開判定、 リニューアル時の引き継ぎまで使える実務用チェックリストです。 PDF・Excelに加え、このページ上でも100項目を直接チェックできます。 100項目 PDF無料 Excel無料 登録不要 社内・顧客共有OK 01 10カテゴリ × 10項目 公開前の抜け漏れをまとめて確認 02 PDF版 印刷・社内回覧・顧客共有 ...
ReadMore
2026/10/2
沖縄の観光事業者100サイト 多言語・予約導線調査【2026年版】
OKINAWA TOURISM WEBSITE SURVEY / 2026 沖縄の観光事業者100サイト 多言語・予約導線調査 【2026年版】 沖縄県内の宿泊施設、マリン・体験、 観光施設、ツアー、レンタカー・観光交通の 公式Webサイト100件を独自調査。 外国語ページがあるかだけではなく、 「外国語のまま予約へ進めるか」まで確認しました。 100サイト実査 多言語 インバウンド オンライン予約 2026年10月調査 SURVEY HIGHLIGHTS 01 88% 多言語ページ・言語切替を確認 02 ...
ReadMore
2026/10/2
沖縄県41市町村 Web集客データベース【2026年版】
OKINAWA 41 MUNICIPALITIES / DATA 2026 沖縄県41市町村 Web集客データベース 【2026年版】 那覇市から離島の村まで、 沖縄県41市町村の人口・世帯数・人口増減を 同じ基準日で比較できるデータベースです。 地域SEO、店舗集客、商圏の検討、 ホームページの対応エリア設計などに使えるよう、 検索・地域絞り込み・並べ替え・CSV出力にも対応しました。 41市町村 人口 世帯数 地域SEO CSV対応 DATABASE HIGHLIGHTS 01 41市町村 沖縄県内す ...
ReadMore
2026/10/2
沖縄の業種別ホームページ事例・必要ページ一覧
OKINAWA WEBSITE GUIDE 沖縄の業種別 ホームページ事例・ 必要ページ一覧 ホームページは、 業種が違えば必要なページも変わります。 建設業なら施工事例、美容室ならメニューと予約、 飲食店なら営業時間とメニュー、 ホテル・観光ならプランと予約など、 お客様が確認したい情報から逆算して構成することが重要です。 沖縄 業種別 ホームページ事例 必要ページ サイト構成 WEBSITE DESIGN POINTS 01 業種で必要ページは変わる 全業種を同じ5ページに当てはめない 02 比較前の ...
ReadMore
2026/10/2
ホームページ制作で使える補助金・支援制度【沖縄県版】
OKINAWA SUBSIDY GUIDE / 2026 ホームページ制作で使える 補助金・支援制度 【沖縄県版】 「ホームページを作るなら補助金が使える」と聞いても、 実際には制度ごとに対象範囲が大きく違います。 2026年10月時点の公式情報をもとに、 沖縄県内の事業者が確認したい補助金・無料支援と、 ホームページ制作との関係を分かりやすく紹介します。 2026年版 沖縄県 ホームページ制作 補助金 無料支援 FIRST CHECK 01 持続化補助金 販路開拓ならHP制作が対象になり得る 02 デジ ...
ReadMore
2026/10/2
沖縄の中小企業向けWeb集客データ集【2026年版】
OKINAWA WEB MARKETING DATA / 2026 沖縄の中小企業向け Web集客データ集 【2026年版】 沖縄でホームページ、SEO、SNS、MEO、 ECなどのWeb集客を考えるときに役立つ数字を、 公的統計を中心にまとめました。 人口・企業数・マーケティング・SNS・EC・観光まで、 数字を見ながら「どこに力を入れるか」を考えていきます。 沖縄県 中小企業 Web集客 公的データ 2026年版 2026 DATA HIGHLIGHTS 01 1,465,944人 沖縄県推計人口 / ...
ReadMore
2026/10/20
ホームページ制作 費用シミュレーター
WEBSITE COST SIMULATOR ホームページ制作 費用シミュレーター サイトの種類、ページ数、デザイン、 原稿、SEO、必要な機能を選ぶだけで、 ホームページ制作費の概算をその場で確認できます。 メールアドレスや会員登録は必要ありません。 無料 登録不要 その場で計算 初年度総額まで表示 6 STEP SIMULATION 01 サイト種類 会社サイト・LP・ECなど 02 ページ数 サイトの規模を選択 03 デザイン 作り込み方を選択 04 機能・運用 必要な内容を追加 FREE COST ...
ReadMore
2026/10/2
ホームページ制作見積もりチェックシート【無料PDF・テンプレート】
WEBSITE ESTIMATE / FREE TEMPLATE ホームページ制作 見積もりチェックシート ホームページ制作の見積書は、 合計金額だけを並べても正しく比較できません。 ページ数、原稿、SEO、修正、保守、 ドメインの扱いなど、 「その金額に何が含まれているのか」を確認する必要があります。 実際の比較に使える無料PDFとExcelテンプレートも用意しました。 無料PDF Excelテンプレート 3社比較 追加料金チェック BEFORE YOU ORDER 01 制作範囲 何ページ・何機能まで ...
ReadMore
2026/10/2
沖縄企業100社のホームページを独自調査|スマホ対応・料金・問い合わせ導線の実態【2026】
OKINAWA WEBSITE SURVEY / 2026 沖縄県内100社の ホームページを独自調査 沖縄県内企業のホームページは、 どこまで活用されているのでしょうか。 100社の公開Web情報を対象に、 ホームページURLと問い合わせフォームの掲載状況を再集計。 さらにスマートフォン対応、料金掲載、 問い合わせ導線について、 企業サイトを見るときの重要なポイントを検証しました。 100社調査 2026年版 沖縄県 Web活用 SURVEY HIGHLIGHTS 01 調査対象 100社 沖縄県内企業 ...
ReadMore
2026/10/2
2026年版|沖縄のホームページ制作料金を50社比較
OKINAWA WEB PRICE SURVEY / 2026 2026年版|沖縄の ホームページ制作料金を 50社比較 沖縄でホームページ制作を依頼すると、 いくらくらい必要なのでしょうか。 県内のWeb制作事業者を中心に50社の公開情報を横断し、 制作費・月額型・料金公開状況を比較しました。 「安い会社を探す」だけでは分からない、 実際の発注相場との違いまで解説します。 2026年10月調査 50社比較 沖縄 制作料金 KEY DATA 比較対象 50社 実発注額の平均 69.7万円 実発注額の中央値 ...
ReadMore
2026/10/2
ホームページ制作にSEO対策は必要?制作時にやっておきたい7つのこと
SEO / WEB DESIGN GUIDE ホームページ制作に SEO対策は必要? ホームページを作るときに 「SEO対策もお願いした方がいいの?」 と迷う方は少なくありません。 SEOが必要かどうかはホームページの目的によって変わりますが、 検索から新しいお客様に見つけてもらいたい場合は、 制作段階から意識しておきたいポイントがあります。 SEO対策 ホームページ制作 検索集客 コンテンツ SEO FIRST CHECK 01 検索から集客したい? 新規顧客との接点を増やしたいか 02 狙いたいサービ ...
ReadMore
2026/10/2
ホームページリニューアルの費用とタイミング|見直すべき7つのサイン
WEBSITE RENEWAL / GUIDE ホームページリニューアルの 費用とタイミング 「ホームページが古くなってきたけれど、 今すぐ作り直すべきなのか分からない」 という方も多いのではないでしょうか。 リニューアルは見た目だけではなく、 スマホ対応・問い合わせ導線・SEO・更新しやすさまで 含めて考えることが重要です。 リニューアル 制作費 SEO サイト改善 WHEN TO RENEW? 01 デザインが古い 現在の事業イメージと合っているか 02 スマホで見にくい 横幅・文字・ボタンを確認 0 ...
ReadMore
2026/10/2
ホームページを作ったのに問い合わせが来ない原因|見直したい9つのポイント
WEB MARKETING / CONVERSION GUIDE ホームページを作ったのに 問い合わせが来ない原因 ホームページを公開したものの、 問い合わせがほとんど来ない。 そんなときは、デザインだけを直す前に 「そもそも見られているのか」 「内容は伝わっているのか」 「問い合わせしやすいのか」を順番に確認することが重要です。 ホームページ改善 問い合わせ SEO 導線設計 FIRST DIAGNOSIS 01 アクセスはある? そもそも見られていない可能性 02 内容は伝わる? サービスや強みが分か ...
ReadMore
2026/10/2
ホームページ制作の見積もり項目を解説|内訳と確認したいポイント
WEB DESIGN / ESTIMATE GUIDE ホームページ制作の見積もり項目 内訳と確認ポイントを解説 ホームページ制作の見積書を受け取っても、 「ディレクション費」「デザイン費」「コーディング費」など、 項目だけでは何にお金がかかっているのか分かりにくいことがあります。 この記事では、ホームページ制作でよくある見積もり項目と、 比較するときに確認しておきたいポイントを分かりやすく解説します。 見積書 制作費 費用内訳 追加料金 ESTIMATE CHECK 企画・設計 サイト全体の構成や目的を ...
ReadMore
2026/10/2
格安ホームページ制作の注意点|安さだけで選ぶ前に確認したい8つのこと
LOW COST WEB DESIGN / GUIDE 格安ホームページ制作の注意点 安さだけで選ぶ前に確認したい8つのこと ホームページをできるだけ安く作りたいと考えるのは自然なことです。 ただし「制作費○万円」「初期費用0円」といった金額だけで比較すると、 必要な機能が含まれていなかったり、 公開後に追加費用が発生したりすることもあります。 格安ホームページ制作を検討するときに確認したいポイントを 分かりやすく解説します。 制作費 追加料金 SEO 保守・契約 BEFORE YOU ORDER 01 ...
ReadMore
2026/10/2
ホームページ制作を個人に依頼するメリット・デメリット|制作会社との違いも解説
WEB DESIGN / FREELANCE ホームページ制作を個人に依頼する メリット・デメリット ホームページ制作を検討するとき、 制作会社だけでなく個人やフリーランスへ依頼する方法もあります。 費用を抑えやすい、担当者と直接やり取りできるなどのメリットがある一方、 対応範囲や公開後のサポートには違いがあります。 個人と制作会社の違いを整理しながら、 どちらを選べばいいのか分かりやすく解説します。 フリーランス 制作会社との違い 費用 失敗しない選び方 QUICK COMPARISON 個人・フリーラ ...
ReadMore
2026/10/2
沖縄のホームページ制作会社の選び方|失敗しない7つのポイント
OKINAWA WEB DESIGN / HOW TO CHOOSE 沖縄のホームページ制作会社の選び方 失敗しない7つのポイント 沖縄でホームページ制作を依頼したいと思って調べると、 制作費数万円のサービスから数十万円以上の制作会社まで、 数多くの選択肢が見つかります。 しかし、料金だけを見ても 「自分の会社に合っている制作会社なのか」は判断できません。 この記事では、制作会社を比較するときに確認したいポイントを 分かりやすく解説します。 制作実績 料金・見積もり SEO 公開後サポート 7 CHECK ...
ReadMore
2026/10/20
沖縄のホームページ制作費用・相場|料金の内訳と失敗しない選び方
OKINAWA WEB DESIGN / PRICE GUIDE 沖縄のホームページ制作費用・相場 いくらかかる? 沖縄でホームページ制作を依頼したいけれど、 「結局いくら必要なのか分からない」と悩んでいませんか? 制作費は数万円から100万円を超えるケースまで幅広く、 金額だけでは違いが分かりにくいのが実情です。 この記事では、沖縄の制作相場から費用の内訳、 依頼先の違い、月額費用まで分かりやすく解説します。 2026年版 沖縄県対応 制作費・維持費を解説 OKINAWA MARKET DATA 沖縄県 ...
ReadMore
上の一覧は、画像を模したHTMLカードではありません。WordPress上でAFFINGER7がカテゴリーに属する記事を取得して表示するため、新しい記事が追加されると内容も更新されます。
表示が重い場合は、読み込み件数100件 を必要な数に調整すると改善できることがあります。また、この一覧が参照するカテゴリーに現在の記事自身が含まれる場合は、自己参照による読み込みの問題を防ぐため、カテゴリーの割り当てを確認してください。
写真主体のレビューと手順解説をどのように並べるか迷う場合は、当サイトのAFFINGER7 EXのデザイン実例集 でも記事制作の例をご覧いただけます。
08 / BETTER UX クリックされやすい記事一覧に整える5つのポイント 01 / IMAGE アイキャッチは主題が伝わるものに 写真や図で記事内容が想像できると、タイトルだけに頼らず選びやすくなります。
02 / TITLE 最初の20〜30字を意識 スマホでは後半が切れる場合があります。疑問への答えが分かる言葉を前半に置きます。
03 / CATEGORY ジャンルの違いを見せる WordPress、ガジェット、暮らしなど、カテゴリーのまとまりをはっきりさせます。
04 / SPACE 余白と列数を増やしすぎない 3列にこだわらず、メインエリアが細い場合は2列の方が読みやすいこともあります。
05 / LINKS カードのリンク先で期待を裏切らない タイトルとアイキャッチで伝えた内容が、リンク先の冒頭で分かるようにしましょう。記事一覧の改善は、見せ方と記事内容の両方が揃ってこそ効果を発揮します。
VISUAL GUIDE / 07 一覧から次の記事へ進むまでの流れ
画像で発見 題名で理解 内容を比較 記事を読む
09 / TROUBLESHOOTING カード表示が崩れる・設定が反映されない場合 1.設定画面に「カード化」が見当たらない トップ・カテゴリーの標準一覧なら、「AFFINGER管理」→「トップ/記事一覧」を確認してください。古いマニュアルでは「投稿・固定記事」にあります。また、記事一覧(ID)ブロックのカード化はEX限定です。
2.スマホで2列が窮屈 まず「3,2,1」や「2,2,1」のようなスマホ1列の設定を試してください。サイドバー・記事幅・タイトル長によっても見え方は変わります。
3.画像の比率が揃わない アイキャッチ未設定の記事、画像のトリミング、サムネイルの縦横比設定を確認しましょう。古い画像が残る場合はテーマやキャッシュ機能の影響も切り分けます。
4.色やデザインの変更が反映されない AFFINGER7にはCSSキャッシュ機能があり、公式案内では「AFFINGER管理」→「その他」→「CSSキャッシュ」のクリアが説明されています。ページキャッシュやブラウザー側のキャッシュも確認してください。
5.特定の一覧だけカードにならない 標準一覧のカード化が、タブ・ブロック・ショートコードなどのすべてに適用されるわけではありません。表示している記事一覧の種類を確認し、必要なら対象の専用機能を使ってください。
広告をカードに混ぜる場合の注意 公式マニュアルでは標準のカード型記事一覧はインフィード広告に未対応とされています。記事カードと広告の表示を同一視せず、規約と対応機能を確認しましょう。
10 / FINAL CHECK スマホ・表示速度・SEOの公開前チェック カード一覧は、パソコンで整っていてもスマートフォンでは文字が詰まる場合があります。公開前はトップページだけでなく、カテゴリー一覧や関連記事まで確認してください。
✓ 320〜390px前後でタイトル・画像・余白が読めるか ✓ PC幅でカードの画像がぼやけず、列間隔が広すぎないか ✓ カードの各リンク先が正しい記事を開くか ✓ アイキャッチ未設定の記事が混ざっていないか ✓ ページ送りや関連記事が使いにくくなっていないか ✓ 画像のデータ量や読み込みの体感が悪化していないか ✓ PC・スマホで重複する目次や不要な装飾がないか VISUAL GUIDE / 08 画面幅に合わせて「画像・題名・余白」を確認
DESKTOP 3列 画像と隙間
TABLET 3列 窮屈なら2列へ変更
MOBILE 1列 読みやすさ
SEOでは、一覧をカードにしたという理由だけで順位が上がるわけではありません。カテゴリーの説明文や記事タイトル、内部リンクも一緒に整えていくことをおすすめします。
11 / SHOULD YOU UPGRADE カード化のためだけにAFFINGER7 EXは必要? トップページやカテゴリーの標準記事一覧をカード化したいだけなら、2026年のAFFINGER7通常版で対応できるため、EXを選ぶ理由にはなりません。 EXを検討するのは、記事内で指定記事をカード表示したい、スライド表示も活用したい、ほかのEX専用機能も必要という場合です。
サイト運営の目的 おすすめの考え方 トップ・カテゴリー一覧をカード化したい 通常版でも対応。まずテーマ設定を試す 本文に任意の関連記事カードを挿入したい EXの「記事一覧(ID)ブロック」のカード化が候補 LPワイドやほかのEX機能も使いたい 使う機能を整理してEX導入を判断 HTML/CSSで独自のカードを自作したい 通常版でも作成可能。記事リンクや更新管理の手間は別途必要
AFFINGER7 / STANDARD まずは通常版でできることを確認 標準の記事一覧をカード化したい方は、通常版の機能と購入条件を先に確認してみてください。
AFFINGER7通常版を確認する 購入条件・最新価格は遷移先でご確認ください。 AFFINGER7 EX ENVIRONMENT SET 本格的に機能を使い込みたい方へ 記事内カードに加え、複数のEX専用機能や計測・改善ツールまで活用したい方にはEX環境セットも候補になります。ただし通常版とは別商品で、費用に見合うかは運用目的によって異なります。
AFFINGER7 EX環境セットの商品内容を見る セットの内容については、私がまとめたAFFINGER7 EX環境セットの価値と注意点 でも詳しく紹介しています。
12 / FAQ AFFINGER7 EXの記事一覧カード化でよくある質問 Q1.AFFINGER7通常版でも記事一覧をカード化できますか?
はい。AFFINGER7では、トップページやアーカイブなどの標準記事一覧が通常版でもカードデザインに対応しています。ただし、記事一覧(ID)ブロックのカード化とは別です。
Q2.PC3列・スマホ1列にするにはどう設定しますか?
カード一覧の列数欄で「3,2,1」を指定する方法が基本です。960px以上が3列、600〜959pxが2列、599px以下が1列となります。
Q3.スマホだけ2列にもできますか?
公式マニュアルでは599px以下は最大2列と案内されています。ただしタイトルの読みやすさを考え、1列と比較してください。
Q4.記事一覧(ID)ブロックで好きな記事を並べられますか?
記事IDを指定して記事一覧を表示できます。ブロックのカード化とスライドショー表示はEX限定の設定です。
Q5.カテゴリー一覧だけカード化できますか?
標準一覧の設定対象はテーマの管理項目に従います。トップ・アーカイブ・関連記事などの適用範囲と、個別の一覧種類を確認してください。
Q6.アイキャッチがない記事はどうなりますか?
代替画像や設定の状態により表示が変わります。記事一覧に見せたい投稿には、内容に合うアイキャッチ画像を設定しておくと統一しやすくなります。
Q7.カード化すると表示速度が遅くなりますか?
必ず遅くなるわけではありませんが、画像サイズや表示件数などが影響します。画像の最適化と実際の表示確認が必要です。
Q8.標準のカード型一覧にインフィード広告を表示できますか?
公式マニュアルでは標準カード型一覧のインフィード広告は未対応と案内されています。広告を混在させたい場合は対応する別の仕組みを確認してください。
Q9.カード化すれば検索順位が上がりますか?
カード表示だけで検索順位向上を保証するものではありません。記事内容・内部リンク・読みやすさ・速度などもあわせて改善しましょう。
Q10.設定を変えたのに表示が変わりません。
バージョンに合う設定画面を確認し、保存状態・テーマのCSSキャッシュ・ページキャッシュを確認してください。プレビューだけでなく公開ページでも見え方を確認しましょう。
SUMMARY 記事一覧は「読者が選びやすい列数」から整えよう AFFINGER7でトップページやカテゴリーの記事一覧をカード化するなら、まず標準の設定で十分です。PCは3列・タブレット2列・スマホ1列を目安にしながら、タイトルやアイキャッチが見やすい組み合わせを探してください。
一方、投稿内に特定の記事を選んでカード型で置くなら、EXの「記事一覧(ID)ブロック」が候補になります。通常版でもできることと、EX専用機能を区別すれば、必要以上に費用をかけずにサイトを育てられます。
私もAFFINGER7 EXを使って記事を制作していますが、目的は装飾を増やすことではありません。読者が迷わず次の記事へ進めることを基準に、カードの数や見せ方を調整していきましょう。