WordPress

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

広告:ページ内にてアフィリエイト広告を利用しています。

画像の上に画像を重ねるテクニックを紹介

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

ポイント

本記事では、

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

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

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

おすすめ副業

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

PR

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

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

コートを着た男性
モンマルトルの丘
パリの街

Paris in love.
Travel to Paris
.

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

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

<image1.jpg>

木のイメージ

<image2.jpg>

猫のイメージ

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

重ね合わせの位置の説明イメージ

HTML のサンプル

HTML では、イメージ1(image1.jpg)と、イメージ2(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>

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

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

木のイメージ1(image1.jpg)の上に、猫のイメージ2(image2.jpg)を重ねています。

木のイメージ
猫のイメージ

ポイント

「子」は複数作って指定することも可能です。(例:子1のクラス名は myChild1、子2のクラス名は 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 を記載することも可能です。

カスタム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="子1のイメージ"></div>
        <div class="myChild2"><img src="image2.jpg" alt="子2のイメージ"></div>
        <div class="myChild3"><img src="image2.jpg" alt="子3のイメージ"></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 もっと!お役立ちテクニック

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

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

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

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

続きを見る

まとめ

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

ポイント

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

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

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

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

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

続きを見る

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

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

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

続きを見る

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

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

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

続きを見る

おすすめ始め方
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

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

クリックアイコン

おすすめ副業「ブログ・アフィリエイト」

アフィリエイト初心者や経験者にとって、

正しいスキルを学ぶことは成功につながる重要な要素です。

必要なスキルを身につけることができるアフィリエイトスクールで

アフィリエイトを学びましょう!

\やるなら一日でも早い方がお得/

おすすめアフィリエイトスクールはこちら

https://boonboonblog.com/entries/entry-38763.html

PR
―― 今日のおみくじ ――

第 20 番

吉


今日のメッセージ

副業のおススメはブログです。とりま20の記事を書いてみよう。自分に合うか、わかります。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

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