CSS｜HTML｜サンプル｜インスタグラム風カラーイメージのブロックを書いてみた｜2021-06-23
インスタグラム風ブロックの書き方｜CSSとサンプル｜2021-06-23
CSSでボックスを書くんですが、
グラデーション3色を45度方向に書く方向でやってみます。
LINK
【参考にしたサイト その１】 「CSSのグラデーション（linear-gradient）の使い方を総まとめ！」
https://saruwakakun.com/html-css/basic/linear-radial-gradient
【参考にしたサイト その２】 「Ultimate CSS Gradient Generator」
https://www.colorzilla.com/gradient-editor/
【参考にしたサイト その３】 「The ultimate CSS tools for web designers | CSSmatic」
https://www.cssmatic.com/
【サンプルHTML】
<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-->
【サンプルCSS】2つあります。
1つ目です。内側のブロックを作成するCSS
.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;
}
【サンプルCSS】
2つ目です。外側のブロックを作成するCSS
***.pngの部分は背景画像を指定してあげてください。
#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;
}
【サンプルの表示】その１
【サンプル表示】その２
Introductory memo｜紹介メモ
■「WORDPRESS」の「CSS」や「HTML」のコードを記述する方法
今回、このページに記述しているサンプルソースは、ワードプレスのプラグインを有効化して活用しました。
【Highlighting Code Block】 https://ja.wordpress.org/plugins/highlighting-code-block/
