次は、画像の上に画像がピョンッと出るCSSコードを追加する方法をします。
画像の上に画像がピョンッと出るCSSコードを追加する方法
ワードプレスの管理画面を開きます。
左下の「外観」を押します。
左下の「外観」の下の「カスタムCSS」を押します。
一番下の行に移動します。
キーボードの「Enter」を押して、１行ふやします。
下記のCSSコードをコピーして、一番下の行に貼り付けます。
/*画像の上に画像がピョンッと出る（基本）*/
.g-pyon-gazou1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou1 .gazou {
position: absolute; /*絶対配置*/
width: 200px; /*画像の横幅*/
height: 150px; /*画像の高さ*/
top: 50%; /*真ん中に表示*/
left: 50%; /*真ん中に表示*/
-ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
-webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou1 .gazou img{
width: 200px; /*画像の横幅*/
height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou1 .haikei {
position: absolute; /*絶対配置*/
width: 100%; /*半透明の横幅*/
height: 100%; /*半透明の高さ*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
opacity: 0; /* 半透明の背景透明度 */
background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
-ms-transition: all 0.2s ease; /*画像が表示されるまでの時間*/
-webkit-transition: all 0.2s ease; /*画像が表示されるまでの時間*/
transition: all 0.2s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou1:hover .haikei {
opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou1 img{
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
貼り付けました。
一番下の「カスタムCSSの更新」を押します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
