CSS を使って文字を画像の上に重ねる方法

アイキャッチ画像や記事内の写真に「文字を重ねたい」と思ったことはありませんか？CSSを使えば簡単に実現できます。この記事では、基本のコードでの調整方法、さらにJavaScriptでアニメーションをつける方法までまとめて解説します。

1 基本のHTMLとCSS

まずはシンプルな例です。画像の中央に文字を重ねるコードは以下の通りです。

<div class="eyecatch">
  <img src="your-image.jpg" alt="アイキャッチ">
  <div class="eyecatch-text">文字をここに表示</div>
</div>

/* -----------------------------------
 * CSS を使って文字を画像の上に重ねる方法
-------------------------------------- */

.eyecatch {
  position: relative; /* 子要素(.eyecatch-text)を基準に絶対配置できるようにする */
  display: inline-block; /* 要素をインライン要素のように扱いつつ、幅や高さを持たせられる */
}

.eyecatch img {
  width: 100%; /* 親要素の幅いっぱいに画像を表示 */
  height: auto; /* 縦横比を崩さずに高さを自動調整 */
  display: block; /* インライン要素の隙間をなくし、余白のズレを防ぐ */
}

.eyecatch-text {
  position: absolute; /* 親要素(.eyecatch)を基準に絶対配置する */
  top: 50%; /* 親要素の高さの中央位置に配置 */
  left: 50%; /* 親要素の幅の中央位置に配置 */
  text-align: center; /* 複数行になったときも文字を中央揃えにする */
  transform: translate(-50%, -50%); /* 要素のサイズ分をずらし、完全に中央に配置する */
  color: #111; /* テキストの色を濃いグレーに設定 */
  font-size: 2em; /* 通常文字の2倍サイズにする */
  font-weight: bold; /* テキストを太字にする */
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* 影をつけて文字を読みやすくする（右下に2px移動、ぼかし5px） */
}

このコードを使うと、画像の真ん中に文字が表示されます。背景が明るくても見えるように、影をつけています。

2 JavaScriptでアニメーションを追加

CSSだけでも十分ですが、JavaScriptを使うと文字をふわっと表示させるなど演出が可能です。

ファイル名：eyecatch-text.js
保存先：wp-content/themes/child-theme/js/eyecatch-text.js

document.addEventListener('DOMContentLoaded', function() {
  const text = document.querySelector('.eyecatch-text');
  text.style.opacity = 0;
  setTimeout(() => {
    text.style.transition = "opacity 1.5s ease-in";
    text.style.opacity = 1;
  }, 500);
});

このコードを適用すると、ページ読み込み後に文字がふわっと現れるようになります。

3 WordPressにJavaScriptを正しく組み込む

WordPressでは、JavaScriptを直接貼り付けるのではなく、functions.phpから読み込むのが推奨されています。子テーマのjsフォルダに eyecatch-text.js を作成し、先ほどのJavaScriptコードを入れて保存します。

その後、functions.phpに以下を追記してください。

//-------------------------------------------
// CSS を使って文字を画像の上に重ねる方法
//-------------------------------------------

function my_theme_enqueue_scripts() {
    // JSファイルを読み込む（子テーマの js フォルダに置く想定）
    wp_enqueue_script(
        'eyecatch-text',
        get_stylesheet_directory_uri() . '/js/eyecatch-text.js',
        array('jquery'),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

3.1 ディレクトリ構造

これで、eyecatch-text.js が自動的に読み込まれ、文字がアニメーション付きで表示されます。

文字アニメーション付きで表示

ページをリロード

4 まとめ

• CSSで画像の上に文字を重ねるのは簡単
• JavaScriptを使えばアニメーションも可能
• WordPressでは functions.php で正しくJSを読み込むこと

シンプルな装飾から動きのある演出まで、アイキャッチや記事デザインを自由にカスタマイズしてみてください！