CSS｜HTML｜サンプル｜インスタグラム風カラーイメージのブロックを書いてみた｜2021-06-23

<div id="instawaku3">
 <div class="box_center_780wrap">
  <div class="instawaku1">
   <span class="box-title">
    タイトルをここに書いたりする｜INSTAGRAM
   </span>
   <p>
    <div style="float: left;"> </div>
    <div style="float: right;">
     <a href="https://www.instagram.com/junnakaguchi/" rel="attachment wp-att-61732"><img src="http://artistclip.com/all/wp-content/uploads/2021/05/insta_h30.png" alt="INSTAGRAM" width="122" height="30" class="size-full wp-image-61732" /></a>
    </div>
    <div style="float: right;">　</div>
   <br clear="both"/>
   <br>
   <br>
【ここに紹介文などを書く】
【ここにインスタグラムの「埋め込みコード」を貼り付ける】
   <br>
   <br>
  </p>
   </div><!--instawaku1 end-->
  </div><!--box_center_780wrap end-->
</div><!--instawaku3 end--> 

.instawaku1 {
   position: relative;
   margin: 2em 0;
   padding: 0.5em 1em;
   border: solid 8px #9a3a8b;
   background: #ffffff;
   border-radius: 10px;/*角の丸み*/
   color: #474747;
}
.instawaku1 .box-title {
   position: absolute;
   display: inline-block;
   top: -30px;
   left: -3px;
   padding: 0 9px;
   height: 30px;
   line-height: 30px;
   font-size: 25px;
   background: #9a3a8b;
   color: #ffffff;
   font-weight: bold;
   border-radius: 5px 5px 0 0;
}
.instawaku1 p {
   margin: 0;
   padding: 0;
} 

#instawaku3 {
   background: -moz-linear-gradient(65deg, rgba(255, 190, 44, 0.4), rgba(255, 44, 171, 0.7)),url(***.png);
   background: -webkit-linear-gradient(65deg, rgba(255, 190, 44, 0.4), rgba(255, 44, 171, 0.7)),url(***.png);
   background: linear-gradient(25deg, rgba(255, 190, 44, 0.4), rgba(255, 44, 171, 0.7)),url(***.png);
   background-size:cover;
   padding-top: 10px;
   padding-bottom: 10px;
}