複数の画像を重ねて表示したい。
聞いただけだと簡単そうに思えますが、
実際やろうとするとどうやっていいのかわかりません。
普通にやったら並んで表示されてしまいます。
そこでpositionと言うCSSコードを使って画像を重ねて表示してみましょう。
コードを使うとなると難しそうと思うかもしれませんが、
やることは画像のURLと重ねる画像の大きさと位置を調整するくらいなので
簡単にできますよ。
画像を重ねて表示するコード
画像を重ねて表示するには画像を自分で複数用意してそれらを重ねる方法と、
Font Awesomeを利用してアイコンを用意した画像に重ねる方法があります。
Font Awesomeを利用する場合、多少作業が増えますが
無料でたくさんのアイコンが使用できるので使ってみるのもいいですね。
Font Awesomeを使用する場合
Font Awesomeを利用したことがない人は以下のコードを設定にあるheadに追加。
記事内ではないので注意！
はてなブログの場合は設定→詳細設定→headに要素を追加のところです。
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
後は以下のコードを追加すれば大丈夫です。
・CSS
<style> .base-picture { position: relative; } .sub-picture { width: 50px; height: 50px; color: #ffffff; background-color: #2779bd; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; border-radius: 50%; position: absolute; top: 50%; left: 50%; } </style>
・html
<div class="base-picture"> <img src="画像のURL"/> <div class="sub-picture"> <i class="fab fa-angellist"></i> </div> </div>
<i class="fab fa-angellist"></i>の部分がFont Awesomeのアイコンコードです。
コードの取得の仕方は
【無料で簡単！】アイコンフォントFont Awesomeの導入方法と使い方【初心者でも安心】
を参考にしてください。
単純に画像を重ねたい場合
・CSS
<style> .base-picture { position: relative; } .sub-picture { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; } </style>
・html
<div class="base-picture"> <img src="ベースとなる画像のURL"/> <div class="sub-picture"> <img src="重ねる画像のURL"> </div> </div>
コードの説明
それでは各コードの説明と、カスタマイズについて説明していきます。
Font Awesomeを利用する場合もしない場合もそんなに違いはないので
まとめて説明します。
CSS
.base-picture { position: relative; }
・position: relative;
base-pictureは元となる画像の定義名なので任意の文字列で大丈夫です。
position: relativeは重ねる画像の基準点の設定です。
元となる画像の左上を基準にしますって言う設定ですね。
後述するposition: absoluteとセットで使います。
ここは変更不可です。
.sub-picture { width: 50px; height: 50px; color: #ffffff; background-color: #2779bd; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; border-radius: 50%; position: absolute; top: 50%; left: 50%; }
sub-pictureも重ねる画像の定義名なので任意の文字列で大丈夫です。
・width
重ねる画像の幅を設定します。
・height
重ねる画像の高さを設定します。
・color
Font Awesomeを使用するときに選択したアイコンの色を指定します。
・background-color
Font Awesomeを使用するときに選択したアイコンの背景色を指定します。
・display: flex;
要素を並列に配置するコードです。
ここはこのままで。
・justify-content: center;
display: flex;で並列に配置した画像を横方向に調整するコードです。
centerで横方向の中央揃えになります。
ここもこのままです。
・align-items: center;
display: flex;で並列に配置した画像を縦方向に調整するコードです。
同じようにcenterで縦方向の中央揃えになります。
ここもこのままです。
・font-size: 1.5rem;
Font Awesomeを使用するときに選択したアイコンの大きさを指定します。
・border-radius: 50%;
Font Awesomeを使用するときに選択したアイコンの四隅の丸みを指定します。
50%だと丸になります。
・position: absolute;
重ねる画像の位置を絶対位置を指定します。
元の画像をrelativeにしているので、元の画像の左上を基準に位置を指定します。
relativeで基準点を決めて、absoluteで位置を指定と言う感じですね。
位置はtop、bottom、right、leftで指定しますが、
数値は負の値も設定できるのでだいたいtopとleftで指定します。
重ねたい場所に合わせて設定しましょう。
html
・Font Awesomeを使用する場合
<div class="base-picture"> <img src="元となる画像のURL"/> <div class="sub-picture"> <i class="fab fa-angellist"></i> </div> </div>
元となる画像のクラス名に元となる画像のURLを、
重ねる画像のクラス名にFontAwesomeで取得したコードを入力します。
Font Awesomeを使用した場合だとこんな感じになります。
はてなブログのリアルタイムプレビューだとうまく表示されませんが、
プレビューすればちゃんと表示されているのでプレビューで確認してください。
・Font Awesomeを使用しない場合
<div class="base-picture"> <img src="元となる画像のURL"/> <div class="sub-picture"> <img src="重ねる画像のURL"> </div> </div>
画像同士を重ねる場合は元の画像と重ねる画像のURLを
間違えないように入力すれば大丈夫です。
画像同士を重ねた場合はこんな感じですね。
FontAwesomeを使って画像にアイコンを付けたり、
違う画像を重ねたりして簡単に画像を装飾することができます。
画像を複数重ねるだけなら、ペイントソフトでやった方が楽です。
ならなぜ紹介したのかと言うと、複数の画像を重ねることで、
その重ねた部分だけをリンクにすることができるからです。
<div class="sub-picture"> <a href="リンクのURL"><img src="重ねる画像のURL"></a> </div>
上のコードのようにして、
下の画像のロゴの部分（ピンクの四角エリア）をクリックすると
トップページへ飛ぶようにしてみました。
実際は、ペイントソフトで一枚の画像にしても
クリッカブルマップと言うものを利用して同じことはできるのですが、
少しだけ面倒なので簡単なものはこの方法でも大丈夫です。
まとめ
・画像同士だけではなくFont Awesomeを重ねることもできる
・重ねる画像を画像リンクにして一部分だけをリンクにすることができる
複雑そうに感じるかもしれませんが、
実際やってみると意外と簡単に画像を重ねることができます。
画像を重ねて一部をリンクにしてみたり、
アニメーションを加えて元の画像の中を動く別の画像などもできるので
面白いですよ。
