【Cocoon】コピペOK！SWELL風のおしゃれなトップページを作る方法

<!--ボタン1-->
<a class="btn-flat" href="#タグ1">
<span class="btn-flat-icon btn-flat-icon--btn1">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル1</span>
</a>

<!--ボタン2-->
<a class="btn-flat" href="#タグ2">
<span class="btn-flat-icon btn-flat-icon--btn2">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル2</span>
</a>

<!--ボタン3-->
<a class="btn-flat" href="#タグ3">
<span class="btn-flat-icon btn-flat-icon--btn3">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル3</span>
</a>

<!--ボタン4-->
<a class="btn-flat" href="#タグ4">
<span class="btn-flat-icon btn-flat-icon--btn4">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル4</span>
</a>

<!--ボタン5-->
<a class="btn-flat" href="#タグ5">
<span class="btn-flat-icon btn-flat-icon--btn5">
<img src="画像URL">
</span>
<span class="btn-flat-text">ボタンタイトル5</span>
</a>

.btn-flat { 
  color: #705e5d; /* 文字色 */
  display: inline-block;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  background: #efefef; /* 文字部分の背景色 */
  text-decoration: none;
  margin: 1em;
  border-radius: 10px;
}
.btn-flat-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
  border-radius: 10px; /* ボタンの丸み */
}
.btn-flat-icon i {
  font-size: 25px;
  line-height: 50px;
  transition: .3s;
}
.btn-flat-text {
  display: inline-block;
  width: 200px;
  text-align: center;
}

.btn-flat-icon--btn1 {
  background: #f7b0a8; /* ボタン1の背景色 */
}
.btn-flat-icon--btn2 {
  background: #fcb471; /* ボタン2の背景色 */
}
.btn-flat-icon--btn3 {
  background: #a5d389; /* ボタン3の背景色 */
}
.btn-flat-icon--btn4 {
  background: #9fcaea; /* ボタン4の背景色 */
}
.btn-flat-icon--btn5 {
  background: #b7b7e5; /* ボタン5の背景色 */
}
.btn-flat:hover .btn-social-flat-icon i {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

<!--ボタン1-->
<a class="btn-square btn-square--btn1" href="#タグ1">
<img src="画像URL">
</a>
<!--ボタン2-->
<a class="btn-square btn-square--btn2" href="#タグ2">
<img src="画像URL">
</a>
<!--ボタン3-->
<a class="btn-square btn-square--btn3" href="#タグ3">
<img src="画像URL">
</a>
<!--ボタン4-->
<a class="btn-square btn-square--btn4" href="#タグ4">
<img src="画像URL">
</a>

<!--ボタン5-->
<a class="btn-square btn-square--btn5" href="#タグ5">
<img src="画像URL">
</a>

.btn-square {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:4px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px; /* ボタンの丸み */
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.btn-square i {
  line-height:50px;
}
.btn-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.btn-square--btn1 {
  background: #f7c6be; /* ボタン1の背景色 */
}
.btn-square--btn2 {
  background: #fcc694; /* ボタン2の背景色 */
}
.btn-square--btn3 {
  background: #afd398; /* ボタン3の背景色 */
}
.btn-square--btn4 {
  background: #add1ea; /* ボタン4の背景色 */
}
.btn-square--btn5 {
  background: #c3c3e5; /* ボタン5の背景色 */
}

/* PC版表示CSS */
.pc_area{
  display:block;
}
.phone_area{
  display:none;
}

/* スマホ版表示CSS */
@media screen and (max-width: 768px){
.pc_area{
  display:none;
}
.phone_area{
  display:block;
}
}

/* 新着記事表示 */
.new-entry-cards.large-thumb-on {
  display: flex;
  flex-wrap: wrap;
}

.new-entry-cards.large-thumb-on a {
  width: 47%; /* カードサイズの大きさ */
  margin: 10px auto;
}

.date-tags {
  margin-bottom: 2em;
}

a.btn_ao_c {
  display: flex;
  align-items: center;
  width: 60%;
  margin: 0 auto;
  padding: 0.7rem 1.3rem;
  border: 2px solid #ed9089;　/* 外枠の太さ・線の種類・色 */
  background: #fff; /* ボタン背景色 */
  border-radius: 10px;　/* 角の丸み */
  text-decoration: none;
  transition: 0.3s;
}
a.btn_ao_c:hover {
  background-color: #fcefef;　/* ホバー時の色 */
}
a.btn_ao_c .c__icon {
  padding-right: 4px;
}
a.btn_ao_c .c__icon img {
  width: 36px;
  vertical-align: middle;
  box-shadow: none;
}
a.btn_ao_c .c__text {
  display: block;
  flex-grow: 1;
  color: #705e5d;　/* 文字色 */
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-right: 40px;
  font-size: 16px;
}
a.btn_ao_c .c__text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  border-top: 3px solid #ed9089; /* >の色 */
  border-right: 3px solid #ed9089;　/* >の色 */
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}
@media (max-width: 1200px) {
a.btn_ao_c .c__icon img {
  width: 32px;
}  
a.btn_ao_c .c__text {
  font-size: 18px;
  padding-right: 15px;
}
a.btn_ao_c .c__text::after {
  width: 12px;
  height: 12px;
}
}
@media (max-width: 736px) {
a.btn_ao_c {
  width: 80%;
}
a.btn_ao_c .c__icon img {
  width: 28px;
}
a.btn_ao_c .c__text {
  font-size: 13px;
  padding-right: 15px;
}
a.btn_ao_c .c__text::after {
  width: 10px;
  height: 10px;
}
}

<a class="btn_ao_c" href="リンク先URL" target="_blank" rel="noopener">
<span class="c__icon"><img src="画像URL"></span>
<span class="c__text">ボタンタイトル</span></a>

/* 画像が左ver. */
.contents {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.contents img {
  width: 100%;
}
.text-center {
  text-align: center;
}
.flexbox {
  display: flex;
}
.box2 {
  width: 50%;
  margin: 2rem auto;
}
.box1 {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.flexbox {
  display: block;
}
.flexbox .box2 {
  width: 100%;
  margin: 0 auto;
}
.flexbox .box1 {
  width: 93%;
  margin: 0 auto;
  margin-bottom: 2em;
}
}

/* 画像が右ver. */
.contents1 {
  width: 100%;
  max-width: 1200px;
  margin: auto;
 }
.contents1 img {
  width: 100%;
}
.text-center1 {
  text-align: center;
}
.flexbox1 {
  display: flex;
  flex-direction: row-reverse;
}
.box2 {
  width: 50%;
  margin: 2rem auto;
}
.box1 {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.flexbox1 {
  display: block;
}
.flexbox1 .box2 {
  width: 100%;
  margin: 0 auto;
}
.flexbox1 .box1 {
  width: 93%;
  margin: 0 auto;
  margin-bottom: 2em;
}
}

<!--画像が左ver.-->
<div class="contents">
<div class="flexbox">
<div class="box2"><img src="画像URL"></div>
<div class="box1">
<div class="box1-title">タイトル</div>
<p class="text-center">本文</p>
<p><a class="btn_ao_c" href="リンク先URL"></span>
<span class="c__text">ボタンタイトル</span></a></p>
</div>
</div>
</div>

<!--画像が右ver.-->
<div class="contents1">
<div class="flexbox1">
<div class="box2"><img src="画像URL"></div>
<div class="box1">
<div class="box1-title">タイトル</div>
<p class="text-center1">本文</p>
<p><a class="btn_ao_c" href="リンク先URL"></span>
<span class="c__text">ボックスタイトル</span></a></p>
</div>
</div>
</div>