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

---

---

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

＼ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください／

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

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

背景画像（２枚）を重ね合わせて、その上に透過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 で利用する方法です。

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

親用のイメージを 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）を重ねています。

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 のお役立ちテクニックはこちら

＼ アフィリエイトの始め方は こちら ／

【初心者向け簡単解説】アフィリエイト始め方を丁寧に紹介します（チャンスがある副業！）

副業に迷っているならアフィリエイト、誰でも始めることができリスクが少ないおすすめ副業です。ブログが自動で収益を出してくれる未来を想像しましょう。本業の他に収入がある毎日を想像しましょう。初心者でもわかりやすくブログ・アフィリエイトの始め方と作り方を解説しています。あなたも自分の人生に潤いを与えるチャンスを掴んでみませんか？

続きを見る

まとめ

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

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

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

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

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

続きを見る

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

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

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

続きを見る

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

【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

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

続きを見る

WordPress の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記