WordPress

【WordPress】画像の上に画像や文字を重ねて表示する方法(とってもオシャレなサイトになります!)


モンマルトルの丘をイメージしたタイトル画像



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

HTML と CSS で実現する方法と、WordPress で応用する方法を紹介します。



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



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





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

Paris in love.
Travel to Paris
.





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


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





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>



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 class="myChild2"><img src="image2.jpg" alt="子2のイメージ">
        <div class="myChild3"><img src="image2.jpg" alt="子3のイメージ">
    </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>



まとめ



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



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


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



WordPress のおすすめテーマ





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













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




Presented By Irojiro Haraguro .Com