この記事を書いた人のコード

<div class="profile-card">
<div class="profile-card__inner">
<p style="font-size:15px; text-align:center; margin-top:1.5em !important;">この記事を書いた人</p>

<div class="profile-thumb"><img alt="453px正方形" src="https://kurachi.info/uploaddata/kanako2.png" loading="lazy"></div>

<div class="profile-content"><span class="profile-name">倉地類人（くらちるいと）</span> <span class="profile-job">道売りストーリーテラー</span> <span class="profile-intro">ブログ集客から冊子制作、HP・ランディングページ制作、ネット広告運用まで一人でこなすマーケッター</span></div>

<div class="profile-sns"><span>FOLLOW ME</span> <a href="#"><img alt="facebookアイコン" src="https://kurachi.info/uploaddata/facebook.svg" loading="lazy"></a> <a href="#"><img alt="インスタアイコン" src="https://kurachi.info/uploaddata/instagram.svg" loading="lazy"></a> <a href="#"><img alt="xアイコン" src="https://kurachi.info/uploaddata/x.svg" loading="lazy"></a> <a href="#"><img alt="地球儀アイコン" src="https://kurachi.info/uploaddata/globe2.svg" loading="lazy"></a></div></div></div>

ブログデザインのCSSに貼るコード

<style type="text/css">
.profile-card {
margin-top: 2em;
border-radius: 20px;
width: 100%;
position: relative;
background: #fff; /*背景の色*/
border: 2px solid #ededed;
overflow: hidden;
}
.profile-card:before {
width: 120%;
height: 130px;
content: "";
position: absolute;
top: -15%;
left: -10%;
z-index: 0;
}
.profile-card:after {
width: 120%;
height: 140px;
content: "";
position: absolute;
bottom: -15%;
left: -10%;
z-index: 0;
}
.profile-card__inner {
position: relative;
z-index: 1;
}
.profile-thumb {
overflow: hidden;
width: 110px;
height: 110px;
border: #fff 3px solid;
border-radius: 55px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background: #fff;
}
.profile-thumb img {
display: block;
width: 100%!important;
height: auto;
}
.profile-content {
margin: 0px;
padding: 20px 20px 0px 20px;
}
.profile-content span {
display: block;
}
.profile-name {
margin-bottom: 3px;
font-weight: bold;
text-align: center;
}
.profile-job {
margin-bottom: 10px;
color: #ccc;
font-size: 10px;
text-align: center;
}
.profile-intro {
font-size: 12px;
}
.profile-sns {
padding: 20px 0;
text-align: center;
color: #000000;
}
.profile-sns img {
padding: 6px 6px;
width: 26px;
transition: 0.4s;
}
.profile-sns a :hover {
transform: translateY(-2px)!important;
transition: 0.4s;
opacity: 0.8;
}
.profile-sns span {
display: block;
font-size: 10px;
padding-bottom: 5px;
}
figure {
margin: 0!important;
width: 20%!important;
}

@media only screen and (max-width: 480px) {
#form_body {
padding: 0 !important;
}
.voice .icon {
width: 18% !important;
}
.voice .voicecomment {
line-height: 1.5em;
width: 80% !important;
}
p {
font-size: 18px !important;
}
.27 {
font-size: 1.1em !important;
}
.voicecomment {
font-size: 0.9em !important;
}
.voice .icon .name {
font-size: 10px !important;
}
}
.voicecomment {
font-size: 20px;
}
.27 {
font-size: 20px;
}
p {
line-height: 1.5em;
font-size: 20px;
margin-top: 2em !important;
}
.btn-wrap.aligncenter {
margin-bottom: 4em !important;
text-align: left !important;
}
.voice .voicecomment {
}
#inner-content {
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-top: 2em;
background: #f2f2f2;
}
#inner-content {
background: #f2f2f2;
}
#page-top {
display: none !important;
}
.b {
font-weight: bold !important;
}
.red {
color: red !important;
}
.green {
color: green !important;
}
.blue {
color: blue !important;
}
.purple {
color: purple !important;
}
.b-l {
font-weight: bold;
background: linear-gradient(transparent 60%, #fff45c 60%);
}
}
img {
border: 3px solid #e1e0e0;
}
.entry-content img {
margin: 1.5em 0 0 0;
}
#footer {
display: none;
}
.voice .icon img {
width: 55px !important;
border: 4px solid #ffffff !important;
margin-top: 0.5em !important;
}
}

@media only screen and (min-width: 768px) {
.column-wrap {
margin-left: -1%;
margin-right: -1%;
}
.column-wrap .col2, .column-wrap .col3 {
float: left;
width: 50%;
padding: 0 1%;
}
.column-wrap .col3 {
width: 33.333%;
}
.column-wrap p {
margin-bottom: 0.5em;
}
.frm-item {
padding: 0 5px O 5px !important;
}
}
.voice {
overflow: hidden;
margin: 0;
font-size: 20px;
}
.voice .voicecomment {
margin-top: 1em;
padding: 2.5%;
position: relative;
width: 75%!important;
border-radius: 0 1.2em 1.2em 1.2em;
}
.voice.l .voicecomment {
float: right;
}
.voice.r .voicecomment {
float: left;
border-radius: 1.2em 0 1.2em 1.2em;
}
.voice.fb .voicecomment {
background: #4C5CB0;
border-color: #4C5CB0;
color: #fff;
}
.voice.line .voicecomment {
background: #7ACC40;
border-color: #7ACC40;
color: #fff;
}
.voice .voicecomment h2, .voice .voicecomment h3, .voice .voicecomment h4, .voice .voicecomment h5 {
margin: 10px 0 !important;
padding: 0;
}
.voice .voicecomment p {
margin-bottom: 1em;
}
.voice .voicecomment p:last-child {
margin-bottom: 0;
}
.voice .icon {
width: 12%;
text-align: center;
}
.voice.l .icon {
float: left;
}
.voice.r .icon {
float: right;
}
.voice .icon img {
border-radius: 50%;
margin: 0;
border: 4px solid #f5f5f5;
}
.voice.icon_red .icon img {
border-color: #FF4E4E;
}
.voice.icon_blue .icon img {
border-color: #50B4DE;
}
.voice.icon_yellow .icon img {
border-color: #faee00;
}
.voice.icon_black .icon img {
border-color: #222;
}
.voice .icon .name {
padding: 0.4em 0;
}
.voice.big .icon {
width: 18%;
}
.voice.big .voicecomment {
width: 79%;
}
#form_body {
padding: 0 !important;
}
.frm-item {
padding: 0 5px 0 px !important;
}
.yellowiro {
background: #e5de9438;
}
.otto {
background: #d0fbffb0;
}
.pinkiro {
background: #a671161c;
}
.yuko {
background: #c7f7e19c;
}
.emiko {
background: #ffe3e385;
}
.atsuko {
background: #e6d8e269;
}
img {
border: none !important;
}
.waku {
margin-top: 2em;
background: yellow;
border: black 2px solid;
}
.waku2 {
padding: 3em 2em;
background: #fffeec;
margin: 10px;
border: #000000 1px solid;
text-align: center;
}
.waku2 p {
margin-top: 0 !important;
}
hr {
border-top: 1px solid black !important;
}
.waku3 {
padding: 0.5em;
text-align: center;
border: solid 2px #ccc;
font-size: 1.6em !important;
font-weight: bold !important;
}
.center {
text-align: center;
}
.blueiro {
background: #d0fffd;
float: right;
}
</style>
</p>