【WordPressで簡単】画像の上に画像や文字を重ねて表示する方法（オシャレなサイトに変身）

魅力的なウェブサイトを作る秘訣は、画像や文字の重ね合わせにあります。オシャレでスタイリッシュな表現には欠かせないテクニックです。

ポイント

本記事では、

WordPress ブログで HTMLとCSSで実現する方法を紹介します。

簡単に実践できるテクニックです。

デザインの改善をお考えの方や、サイト制作初心者の方にもおすすめです。

「アフィリエイトの始め方とブログの作り方を完全解説！」はこちら

1 画像の上に画像や文字を重ねるオシャレな例
2 HTML で画像や文字の重ね合わせを実現する方法
3 WordPress で画像や文字の重ね合わせを実現する方法
4 子オブジェクトを複数指定する場合
- 4.1 ■ HTML のサンプル
- 4.2 ■ CSS のサンプル
5 まとめ

画像の上に画像や文字を重ねるオシャレな例

画像の上に「画像」や「文字」を少しずらして重ね合わせることで、とてもオシャレに表現させることができ、さらにアニメーション等を組み合わせることで読者に「素敵！」と感じてもらえる演出となります。

Paris in love.
Travel to Paris.

背景画像（２枚）を重ね合わせて、その上に透過PNGイメージ（人物）で動きを出しつつ、文字「Paris in love. Travel to Paris.」を重ねて表示しました。

重ね合わせは本記事で紹介する CSS を利用し、人物のアニメーション（左から右への移動）は、WordPress のテーマ「AFFINGER」の機能で実現しています。文字のフェードインは CSS を利用することで表現しました。

＼WordPress のテーマ「AFFINGER」を使ってアニメーションを演出／

AFFINGER を使ってアニメーションする方法はこちら

HTML で画像や文字の重ね合わせを実現する方法

重ね合わせは CSS で実現します。利用する CSS は「position」です。

画像や文字を重ね合わせる場合は、position を利用して親子関係を作って、親の土台（枠組み）に対して、子をどの位置に配置するかを指定していきます。

■ position の親子関係

position は、「親」のオブジェクトに対して、「子」をどこに配置するのかを指定する CSS になります。

「親」となるオブジェクト（例えばイメージ）と、配置するイメージ（子）を同じ div タグで囲み、div タグのクラス（class）を、position で親に指定します。

■ position を指定する方法

「親」に使うイメージと、「子」に使いイメージを具体的に position で利用する方法です。

イメージは、たとえば次の２個を利用します。

＜image1.jpg>

<image2.jpg>

親用のイメージを div タグで括って親の場所（範囲）を固定して、子の場所を「上から」、「左から」、「下から」、「右から」ピクセルまたはパーセントで指定します。

HTML のサンプル

HTML では、イメージ１（image1.jpg）と、イメージ２（image2.jpg）を同じ div タグで括ります。

div には、親のクラス名を、子となるイメージには、子のクラス名を付けてください。

<div style="text-align:center">
    <div class="myBase">
        <img src="image1.jpg" alt="親のイメージ">
        <div class="myChild1"><img src="image2.jpg" alt="子のイメージ"></div>
    </div>
</div>

CSS のサンプル

CSS では、親のクラスには、position で relative を指定します。

子のクラスには、position で absolute を指定し、top、left、bottom、right で位置を指定します。

<style>
.myBase {
    position: relative;
}
.myChild1 {
    position: absolute;
    top: 40%;
    left: 50%;
}
</style>

■ 重ね合わせサンプルです

実際にイメージを重ね合わせると次のように表示できます。

木のイメージ１（image1.jpg）の上に、猫のイメージ２（image2.jpg）を重ねています。

ポイント

「子」は複数作って指定することも可能です。（例：子１のクラス名は myChild1、子２のクラス名は myChild2）

「子」は、イメージではなく、文字や、ほかのオブジェクトにすることも可能です。

WordPress で画像や文字の重ね合わせを実現する方法

WordPress で利用する場合も実現方法は HTML で実現する場合とほぼ同一です。

ただし、WordPress のエディタでは、例えばイメージを表示する場合はブロックで指定しますので、HTML で親を指定する（直接 div で括る）のは難易度が高く手間がかかります。WordPress では「グループ化」機能を利用しすることで「親」を簡単に指定できます。WordPress での実現手順を紹介します。

■ Step.1 画像を配置してグループ化する

重ね合わせたいイメージ（オブジェクト）をすべて選択してグループ化します。

このグループが「親」になります。

■ Step.2 グループ（親）にクラス名を記載する

作成したグループ（親）を選択している状態で、グループのプロパティから「高度な設定」の「追加 CSS クラス」に「クラス名」を記載します。

ここでは仮に「myBase」と名付けます。

■ Step.3 イメージ（子）にクラス名を記載する

「子」として指定したいイメージ（オブジェクト）を個別に選択して、プロパティから「高度な設定」の「追加 CSS クラス」に「クラス名」を記載します。

ここでは仮に「myChild1」と名付けます。

■ Step.4 CSSを記載する

ページに画像を重ね合わせるための CSS （ position ）記載します。

<style>
.myBase {
    position: relative;
}

.myChild1 {
    position: absolute;
    top: 40%;
    left: 50%;
}
</style>

ページに CSS を適用してください。

本文中に記載する場合は「カスタム HTML」ブロックで CSS を記載することも可能です。

完成です。プレビューで動作を確認してください。

子オブジェクトを複数指定する場合

子オブジェクトは、複数指定して、重ね合わせることが可能です。

子オブジェクトの上下（どれを前面に出すか）については、z-index を使います。数が大きいほうを前面に表示します。

■ HTML のサンプル

子イメージ（オブジェクト）を親の中に、それぞれのクラス名で記載します。

<div style="text-align:center">
    <div class="myBase">
        <img src="image1.jpg" alt="親のイメージ">
        <div class="myChild1"><img src="image2.jpg" alt="子１のイメージ"></div>
        <div class="myChild2"><img src="image2.jpg" alt="子２のイメージ"></div>
        <div class="myChild3"><img src="image2.jpg" alt="子３のイメージ"></div>
    </div>
</div>

■ CSS のサンプル

それぞれの子イメージのクラスにて、position : absolute を定義し、z-index を指定します。

<style>
.myBase {
    position: relative;
}
.myChild1 {
    position: absolute;
    top: 40%;
    left: 20%;
    z-index : 10;
}
.myChild2 {
    position: absolute;
    top: 50%;
    left: 40%;
    z-index : 20;
}
.myChild3 {
    position: absolute;
    top: 60%;
    left: 60%;
    z-index : 30;
}
</style>

WordPress のお役立ちテクニックはこちら

まとめ

画像や文字を重ね合わせることで、スマートでスタイリッシュな表現ができ、読者に「かっこいい」と思ってもらえるページを作ることが可能です。

ポイント

画像や文字を重ねる場合は CSS の position を利用する
オブジェクト（重ねられるイメージ、重ねるイメージ）に対して親と子で定義します
WordPress で利用する場合はグループ化機能が便利です

いままで、「どうやって作っているんだろう？」と不思議だった世の中のオシャレなページの作り方の一端が見えてきた気がしますね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 地方で快適に暮らす！地方がチャンスのおすすめ副業を紹介！在宅でパソコンがあれば「できる」副業

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る