SWELLで記事タイトルの位置・デザインを変更する方法

2026年10月28日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

記事を開いたときのタイトル周りが、なんだか物足りない…と感じたことはありませんか。タイトルは読者が最初に目にする場所なので、ここの印象でブログ全体の雰囲気が決まります。SWELLなら記事タイトルの位置とデザインを、カスタマイザーで切り替えられます。

この記事では、SWELLで記事タイトルの位置やデザインを変更する方法を手順付きで解説します。私が実際に試して感じた違いや失敗談もお伝えしますね。コードを書かずに、記事の第一印象を整えられますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

記事タイトルの見た目、もっとおしゃれにしたいにゃ。

たいがブログ

第一印象は大切ですよね。SWELLなら簡単に変えられますよ。

ニャフィ

変えたら読みにくくならないか心配だにゃ…

たいがブログ

それぞれの特徴と設定手順を、順番にご紹介しますね。

▼あわせて読みたい：タイトル周りに大きな画像を使うなら、表示速度を支えるサーバーも大切です。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLの記事タイトル位置とは？変更前に知っておきたい基本

SWELLでは、記事タイトルを本文エリアの中に表示するか、本文エリアの上に大きく表示するかを選べます。どちらを選ぶかで、記事ページの雰囲気はがらりと変わります。

設定はカスタマイザーの「投稿・固定ページ」から行います。見た目の好みだけでなく、読みやすさで選ぶのがポイントです。

「コンテンツ内」はシンプルで読みやすい

タイトルを本文エリアの中に置く表示は、すぐに本文が始まるので読者を待たせません。情報を早く知りたい人が多いノウハウ系のブログと相性がよいです。私も手順解説が中心のこのブログでは、コンテンツ内の表示を基本にしています。

「コンテンツ上」は雑誌のような迫力が出る

タイトルを本文エリアの上に置くと、アイキャッチ画像を背景にした迫力のある見た目になります。ただ私が試したときは、スマホで本文が始まるまでのスクロールが長くなり、読者を待たせてしまいました。画像映えするレビュー記事向けの表示と考えるとよいですよ。

SWELLで記事タイトルの位置とデザインを変更する方法

ここからは、実際に記事タイトルの表示位置を切り替える手順を見ていきましょう。カスタマイザーの右側でプレビューしながら比べられます。

以前使っていた別のテーマでは、タイトルの見た目を変えるために追加CSSを書いていました。SWELLは選択肢から選ぶだけなので、デザインが崩れる心配がほとんどありません。

変更前にアイキャッチ画像の状態を確認する

コンテンツ上の表示では、アイキャッチ画像が大きく使われます。画像が未設定の記事や、文字が多い画像だと見栄えが落ちるので、事前にチェックしておきましょう。文字が重なっても読みやすいかが判断基準です。

スマホとパソコンの両方で見比べる

パソコンでは格好よく見えても、スマホではタイトルが長くて何行にも折り返されることがあります。カスタマイザー下部の端末切り替えを使って、両方の見た目を確認しておきましょう。

STEP

カスタマイザーを開く

管理画面の「外観」→「カスタマイズ」をクリックして、カスタマイザーを開きます。

STEP

投稿・固定ページの設定を開く

「投稿・固定ページ」を開き、タイトルの表示に関する設定項目を探します。

STEP

タイトルの表示位置を選ぶ

タイトルの表示位置で、コンテンツ内かコンテンツ上のどちらかを選びます。プレビューで見た目がすぐ切り替わりますよ。

STEP

スマホ表示に切り替えて確認する

カスタマイザー下部の端末アイコンでスマホ表示に切り替え、タイトルが読みやすいか確認します。

STEP

公開して実際の記事で確認する

「公開」をクリックして保存し、タイトルの長い記事を開いて表示が崩れていないか確認したら完了です。

記事タイトル周りをさらに見やすくするコツ

表示位置を決めたら、次はタイトル周り全体の読みやすさを整えていきましょう。位置だけでなく、タイトルの長さや周辺の情報も印象を大きく左右します。

意識したいのは、読者がひと目で「何の記事か」をつかめることです。情報を詰め込みすぎず、すっきり見せるのがコツです。

タイトルは32文字前後に収める

タイトルが長すぎると、スマホでは3行、4行と折り返されて圧迫感が出ます。私は以前、キーワードを詰め込んだ長いタイトルをコンテンツ上に表示していて、画像の上が文字だらけになってしまいました。32文字前後に絞るだけで、見た目も検索結果での表示もすっきりしますよ。

日付やカテゴリーの表示もあわせて整える

タイトルの近くには、公開日やカテゴリーなどの情報も並びます。これらも同じ「投稿・固定ページ」の設定で表示を切り替えられるので、必要なものだけ残しましょう。別のテーマでは項目ごとにCSSで非表示にしていましたが、SWELLはチェックひとつで整理できるのが快適です。

▼あわせて読みたい：タイトルの見た目を整えたら、次は検索で選ばれるタイトルづくりです。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLの記事タイトル変更でよくある質問

設定を変えたのに表示が変わりません。: カスタマイザーで「公開」を押したか確認しましょう。保存済みなら、キャッシュを削除してブラウザを再読み込みすると反映されることが多いですよ。
コンテンツ上の表示でタイトルが読みにくいです。: アイキャッチ画像に文字や細かい模様が多いと、タイトルと重なって読みにくくなります。シンプルな画像に差し替えるのが一番の近道です。
タイトルの位置を変えるとSEOに影響しますか？: 表示位置を変えても、タイトルの文章そのものは変わらないため、検索順位に大きく影響することはありません。読みやすさを基準に選んで大丈夫です。
タイトルの文字の大きさも変えられますか？: 追加CSSを使えば調整できますが、スマホで表示が崩れることもあります。まずは標準の大きさのまま使い、タイトルの文字数で調整するのが安心ですよ。