今回は、
ブログカードの説明文が途中で切れずに全部表示されてしまう…。
という問題の対策について書きます。
実はこれ、設定が壊れているわけではありません。
- ブログカードの抜粋が長くなる原因
- 正しい設定と直し方の手順
- 抜粋のおすすめ文字数
を順番に解説していきます。
私自身もあとから気づいたのですが、仕組みさえ分かればすぐ解決できるので、ぜひ参考にしてください。
抜粋欄に文を入れると、抜粋の文字数の設定は効かない
「AFFINGER管理」で抜粋の文字数を指定していても、投稿画面の「抜粋」欄に文章を入れると、その文字数設定は効かなくなります。
抜粋欄に入力した文章は、どれだけ長くても切られずに最後まで全部出ます！
私が自分の別のサイトの記事の下書きを直していたとき、抜粋欄に入れていた文が、ブログカードで全部出ていることに気づいたんですよね。
実際に確認用の下書きで試してみた結果がこちらです。
- 抜粋欄に約190字を入れた記事
→ ブログカードで最後まで5行表示された - 抜粋欄を空にした記事
→ 2行目の途中で「...」になった
このように、抜粋欄に文が入っているか空かによって、表示が大きく変わります。
なぜ全部出るのか
なぜ文字数を設定しているのに、抜粋欄の文は全部出てしまうのでしょうか。
仕組みを順番に見ていきましょう。
文字数の設定が効くのは、本文から自動で作る抜粋だけ
AFFINGER管理の「全体設定」＞「抜粋設定」には、「抜粋の文字数」という設定欄があります。
欄の横には「デフォルトは100（ブログカード風ショートコード含む）」と書いてあります。
この設定が効くのは、投稿画面の「抜粋」欄が「空」のときに、本文の書き出しから自動で作られる抜粋だけです。
手動で抜粋欄に文章を入れた場合は、「この記事の抜粋はこの文章を使ってほしい」と指定した扱いになるため、文字数の設定で切られずにそのまま最後まで表示されます。
全部出るのはブログカードだけではない
抜粋欄に文章を入れたとき、長文がそのまま全部出るのはブログカードだけではありません。
以下の場所でも、抜粋欄の文章がそのまま表示されます。
- ブログカード（ショートコードで出すカードも、記事のURLを貼るだけで出るカードも）
- 記事一覧（トップページやカテゴリーなどの一覧）
- 関連記事
ブログカードだけでなく、サイト内のあちこちで表示が長くなってしまうわけですね。
ちなみに、ブログカードの書き方や種類について詳しく知りたい方は、ブログカードの種類を解説した記事 もあわせてチェックしてみてください。
直し方：抜粋欄を空にして、説明文はメタディスクリプション欄へ
長すぎるブログカードを直す方法はとても簡単です。
投稿画面の「抜粋」欄を空にして、検索結果に出したい説明文はAFFINGERの「メタディスクリプション」欄に書きましょう。
私がこの仕組みに気づいてからは、抜粋欄にはメタディスクリプションを入れず、AFFINGERのメタディスクリプション欄にだけ入れるように変更しました。
手順は以下の通りです。
投稿画面の「抜粋」欄を空にする
まずは投稿画面を開きます。
右側の「投稿」タブにある、アイキャッチ画像の下を見てください。
ここに「抜粋を編集」というボタンがあるのでクリックします。
すると小さな窓が開きます。
この窓の中に入っている文章をすべて消して、空にしてください！
検索結果の説明文は、投稿画面の下の「メタディスクリプション」欄に書く
次に、検索結果に表示させたい説明文を入力します。
投稿画面の下側にある「メタボックス」を開いてください。
ここに「メタディスクリプション」という欄があります。
欄の上には「全角120文字程度に納めましょう」と出ていて、下には現在の文字数が表示されています。
検索結果に出したい文章は、必ずこのメタディスクリプション欄に入力しましょう！
抜粋の文字数は何字がいい？目安は60字前後
抜粋欄を空にすると、本文の書き出しから自動で抜粋が作られます。
では、自動で作られる抜粋の文字数は何文字に設定するのが良いのか？
私（KAZU）のサイト the-affinger.com では、抜粋の文字数を「60」に設定しています。
抜粋はデフォルトで100文字ですが、たとえばスマホで抜粋を表示するとかなり長くなるんですよね。
パソコンでも、抜粋は50〜60文字ぐらいがいいと思っています。
だいたい2行ぐらい表示されて、2行目の途中でちょっと点々で消えるぐらい、60文字ぐらいがいいです。
初期値の100字だと、PCで3行目に「...」だけ残ることがある
初期設定の100文字の場合、パソコンの画面で見ると3行目に「...」だけがぽつんと残ってしまうことがあります。
実際に the-affinger.com のカードで表示行数を測ってみました。
| 画面の幅 | 1行の字数 | 50字 | 60字 | 80字 | 100字 |
|---|---|---|---|---|---|
| PC（1366・1920） | 約46字 | 2行 | 2行 | 2行 | 3行 |
| PC（1024） | 約32字 | 2行 | 2行 | 3行 | 4行 |
| スマホ（430・抜粋を表示する設定） | 約17字 | 3行 | 4行 | 5行 | 6行 |
| スマホ（375・同上） | 約13字 | 4行 | 5行 | 6行 | 8行 |
- PC（画面幅1366〜1920px）の場合
→ 1行が約46字。50字・60字・80字は2行で収まりますが、100字だと3行目になり、3行目は「...」だけ残る形になります。 - 少し小さいPC（画面幅1024px）の場合
→ 1行が約32字。60字までは2行、80字は3行、100字は4行になります。
PCで見たときに2行目の途中できれいに切れる60文字前後が、見た目としてスッキリして使いやすいです。
スマホで抜粋を表示するなら、もっと長く見える
スマホの初期設定では、ブログカードの抜粋は表示されないようになっています。
ですが、「スマホ（960px未満）閲覧時でも『ブログカード』の抜粋を表示する」にチェックを入れている場合は注意が必要です。
画面幅375pxのスマホで見た場合、以下のようになります。
- 60字：5行表示される
- 100字：8行表示される
60字でも幅375では5行になるので、スマホで60字がちょうど良いとは言えません。
あくまで「60字が良い」というのは、PCで見たときに2行目の途中で切れてきれいに見えるからですね。
設定の変え方
抜粋の文字数を変更する手順は以下の通りです。
- 「AFFINGER管理」→「全体設定」を開く
- 「抜粋設定」の項目にある「抜粋の文字数」の数字を変更する（初期値は100）
- 「保存」をクリックする
文字数の設定は、ブログカードだけでなく、記事一覧や関連記事の自動抜粋にも同じ数字で効きます。
サイト全体の見た目を整えたい方は、初期設定とあわせて見直してみるのがおすすめです！
初期設定については、AFFINGERの初期設定まとめ も参考にしてみてくださいね。
抜粋欄を空にしたら、本文の書き出しを整えておく
投稿画面の抜粋欄を空にすると、1つだけ意識しておきたいポイントがあります。
それは、SNSで記事が共有されたときの説明文です。
SNS共有時の動作は以下のようになっています。
- 抜粋欄に文がある場合
→ その文章の先頭100文字が表示される - 抜粋欄が空の場合
→ 本文から自動で作られた抜粋（設定した文字数で切れたもの）が表示される
なお、どちらの場合もメタディスクリプション欄の文章は使われません。
抜粋欄が空の記事は、ブログカードでもSNSの説明文でも、本文の書き出しが設定文字数（私のサイトなら60字）で切れて「...」が付きます。
そのため、記事を書くときは本文の書き出し1〜2文を読むだけで「何の記事なのか」が伝わるように整えておきましょう！
よくある勘違い
ブログカードや抜粋の設定に関して、よくある勘違いをまとめました。
抜粋欄にメタディスクリプションと同じ文を入れても、検索結果には使われない
「投稿画面の抜粋欄に書いた文章が検索結果に出るのかな？」と思うかもしれませんが、検索結果に出る説明文は「メタディスクリプション欄」の文章だけから作られます。
抜粋欄の文章は使われません。
メタディスクリプション欄が空の場合は、記事ページにメタディスクリプションが出力されないので注意してくださいね。
「記事一覧の抜粋を置き換える」は別の機能
AFFINGER管理の抜粋設定の画面に「記事一覧の抜粋を置き換える」という項目があります。
これは記事一覧の抜粋をあらかじめ決めた特定の文章に差し替える機能です。
投稿画面の抜粋欄や、今回設定した「抜粋の文字数」とは関係のない別の機能なので混同しないようにしましょう。
カードの説明文そのものを消したいなら「抜粋を非表示にする」チェック
「ブログカードに説明文（抜粋）を一切出さず、タイトルだけにしたい！」という場合もありますよね。
その場合は、抜粋設定の画面にある「PC閲覧時の『ブログカード』及びコンテンツ内の『おすすめ記事』の抜粋を非表示にする」にチェックを入れましょう。
これにチェックを入れれば、説明文ごとごっそり非表示にできますで～！
「ブログカード風」のシンプルな内部リンクを作りたい方は、「ブログカード風」の内部リンクの作り方 も参考にしてみてください。
まとめ
今回は、AFFINGERでブログカードの抜粋が長くなってしまう原因と直し方を解説しました。
- 原因
→ 投稿画面の「抜粋」欄に文が入っていると、文字数設定が効かず全文表示される - 直し方
→ 投稿画面の「抜粋」欄を空にして、説明文は「メタディスクリプション」欄に書く - 文字数の目安
→ PCで2行目の途中で切れる「60字前後」がおすすめ
抜粋欄を空にして本文の書き出しを整えておけば、ブログカードもSNSの表示もきれいにまとまります。
カードが長くて崩れて困っていた方は、ぜひ今すぐ投稿画面をチェックしてみてくださいね！
