HubSpotのリッチテキストでは、テーブルを作成して情報を見やすく整理できます。
しかし、テーブル内の文字を「上下左右中央揃え」に設定したはずなのに、
「なぜか文字が少し上に寄っている」
「同じ設定なのに、一部のセルだけ位置がずれている」
「中央揃えを何度設定しても直らない」
といったことがあります。
この場合、中央揃えの設定そのものではなく、セル内に意図しない余白が発生していることが原因かもしれません。
この記事では、文字や列を削除してテーブルを作り直すことなく修正できるよう、原因の確認方法から具体的な修正方法まで順番に解説します。
最初に確認したいのは、HubSpot上で正しく中央揃えが設定されているかです。
HubSpotでは、テーブルのセルを選択し、セル内のコンテンツの「垂直方向の配置」を変更できます。
そのため、文字の位置がずれている場合は、まず対象のセルを選択し、垂直方向の配置が「中央」になっているかを確認しましょう。
左右方向についても、文字の配置が中央になっているか確認します。
【位置合わせ】
【縦の位置】
ここで設定を変更して文字が中央に配置されれば、そのままで問題ありません。
一方、上下左右中央揃えに設定されているにもかかわらず、文字が中央に見えないことがあります。
【中央揃えに設定しているのに文字がずれている状態】
この場合は、別の原因を確認していきます。
原因として考えられるのが、セルの中にある文字や段落に余白が設定されているケースです。
例えば、見た目上は単純に「テキスト」と入力されているだけでも、HTML上では次のような構造になっていることがあります。
＜セル＞
＜段落＞
テキスト
＜/段落＞
＜/セル＞
HTMLでは、段落を表す要素として「<p>タグ」が使われます。
HubSpotの編集画面では余計なものが入っていないように見えても、この<p>などの要素に「margin（マージン）」と呼ばれる余白が設定されていることがあります。
すると、セル自体は中央揃えになっていても、文字の周辺に余白があるため、見た目として文字が中央からずれてしまうことがあります。
つまり、「HubSpotの中央揃えが機能していない」とは限りません。
中央揃えは機能しているものの、セル内の余白まで含めて配置されることで、文字が中央に見えなくなっている可能性があるということです。
それでは、実際に余白が発生しているか確認してみましょう。
HubSpotの編集画面だけでは原因が分かりにくいため、ブラウザの「検証」機能を使います。
まずHubSpotで対象の記事やページをプレビューします。
可能であれば「新しいタブで開く」などを使い、ブラウザ上で実際の表示を確認します。
位置がずれているテーブル付近で右クリックし、メニューから「検証」をクリックします。
すると、ブラウザの開発者向け画面（デベロッパーツール）が表示されます。
初めて見ると難しそうに感じますが、今回確認するポイントは限られています。
検証画面から、文字の位置がずれているセルを確認します。
対象となる文字や要素を選択すると、その要素にどのような余白が設定されているかを確認できます。
このとき注目したいのが、文字や段落の上下などに余計な余白が発生していないかです。
ブラウザの検証画面では、要素の領域や余白が色分けして表示されます。
例えば、対象要素の下側に余白が表示されている場合、その余白によって文字が中央からずれて見えている可能性があります。
ここで大切なのは、「表示されている色の部分をそのまま消す」ということではありません。
どの要素に余白が発生しているのかを特定することが目的です。
原因となっている要素を確認できたら、HubSpotの編集画面に戻ります。
対象のリッチテキストを選択し、上部のメニューから、［詳細（Advanced）］→［ソースコード（Source code）］を開きます。
ソースコードを開くと、リッチテキストの内容がHTMLとして表示されます。
コードに慣れていない方には難しく見えるかもしれませんが、すべてを理解する必要はありません。
先ほど「検証」で確認したセル周辺に、不要な段落や余白を発生させている記述がないか確認します。
例えば、対象のセル内に意図しない空の段落や不要なスペースなどが入っている場合、それによって余白が発生している可能性があります。
また、<p>タグなどの要素にmarginが適用されている場合もあります。
【修正前のソースコード】
【修正後のソースコード】
修正したら変更内容を保存し、再度プレビューを開いて表示を確認しましょう。
【修正後、文字が中央に配置された状態】
これで文字が中央に配置されていれば修正完了です。
<p>タグをすべて削除すればよいわけではないここで注意したいのが、「<p>タグ＝不要」というわけではないことです。
<p>はHTMLで段落を表現する一般的なタグです。
問題なのは<p>タグそのものではなく、
などによって、セル内に意図しない余白が発生しているケースです。
そのため、むやみに<p>タグをすべて削除するのではなく、検証画面で原因となっている箇所を確認したうえで修正することをおすすめします。
不要な段落やmarginを修正しても、文字の位置がきれいに揃わない場合があります。その場合は、セルのpadding（パディング）も確認してみましょう。
paddingとは、セルの枠線と、その中にある文字との間に設けられる内側の余白です。
例えば、
上：10px
右：10px
下：20px
左：10px
のように上下で異なるpaddingが設定されていると、文字が中央からずれて見えることがあります。
複数のセルで文字の位置を統一したい場合は、上下左右のpaddingが揃っているか確認しましょう。
ここまで対応しても文字の位置が揃わない場合は、次のような設定も確認します。
特に、コピー＆ペーストでテーブルや文章を作成している場合、元の文章に設定されていたスタイルが引き継がれていることもあります。
見た目だけでは原因を判断できない場合は、「検証」で対象セルを確認すると原因を特定しやすくなります。
ソースコードやpaddingなどを変更したら、必ずプレビューで最終的な表示を確認しましょう。
HubSpotの編集画面上で問題なく見えていても、実際のページではテーマやCSSの影響を受けて表示が変わることがあります。
そのため、
修正 → 保存 → プレビュー → 表示確認
までを1セットとして考えるのがおすすめです。
HubSpotのリッチテキストでテーブル内の文字が中央に揃わない場合、まずはHubSpotの標準機能で上下左右中央揃えになっているか確認しましょう。
それでも位置がずれている場合は、セル内に意図しない余白が発生している可能性があります。
以下の順番で確認すると、原因を特定しやすくなります。
ポイントは、「中央揃えが効かないから何度も中央揃えを設定する」のではなく、「なぜ中央に見えないのか」を確認することです。
HubSpotの編集画面だけでは原因が分からない場合でも、ブラウザの検証機能を使えば、どの要素に余白が発生しているのかを確認できます。
原因となっている要素を特定してからHubSpot側を修正することで、テーブルのレイアウトをよりきれいに整えられるようになります。