【2時間30分超え】Cocoonでインストール初期から全行程を動画で解説！サイトをおしゃれに作ってみたよ！

EWWW Image Optimizer

Blocks Animation: CSS Animations for Gutenberg
Reusable Blocks Extended
GenerateBlocks
EWWW Image Optimizer
MetaSlider

en-title

/* 英語のサブタイトル */
.en-title {
	margin-bottom: 2rem!important;
	letter-spacing: 0.1em;
}

/* 見出し２の上に英語のサブタイトルがある場合 */
.en-title + h2,
.en-title + .wp-block-heading {
  margin: -1em 0 2em 0!important;
}

jQuery(function ($) {
// 書き換え前のテキストが表示されないように最大3秒まで待機
  const maxWait = 3000;
  let elapsed = 0;

  const timer = setInterval(function () {
    const $links = $('.flexslider .flex-control-nav a');

    if ($links.length >= 2) {
      $links.eq(0).text('before');
      $links.eq(1).text('after');
// 書き換えたら停止
      clearInterval(timer);
    }

    elapsed += 100;
    if (elapsed >= maxWait) {
      clearInterval(timer);
    }
  }, 100);// 0.1秒おきに確認
});

/* metaslider */
.metaslider.ms-theme-blend .flexslider ol.flex-control-nav:not(.flex-control-thumbs) li a {
	width: fit-content!important;
}
.ms-is-small.metaslider.ms-theme-blend .flexslider ol.flex-control-nav:not(.flex-control-thumbs) {
	text-align: left!important;
	left: 30px;	
}

cs-fullwide

/* フルワイド */
.cs-fullwide {
	width: 100vw!important;
	margin: 0 calc(50% - 50vw)!important;
}

cs-relative cs-img-on01

/* 位置調整 */
.cs-relative {
	position: relative;
}

/* 画像重なり */
.cs-img-on01 {
	width: 60%;
	top: -50px;
	right: -46%;
}

/* 見出し２ */
/* センターの場合、線を１つにする */
.wp-block-heading.has-text-align-center {
	border-bottom: none;
}
.wp-block-heading.has-text-align-center::before {
	width: 10%;
	left: 50%;
	transform: translateX(-50%);
	border-radius:9999vh;
}

cs-fullwide cs-img-maru

/* スライダーの画像を丸くする */
.cs-img-maru img {
	border-radius: 9999vh;
}

/* ３列並び・スマホ２列並び */
/* 人気記事一覧 */
.wp-block-cocoon-blocks-tab .popular-entry-cards.widget-entry-cards {
	display: grid;
	grid-template-columns: repeat(3,1fr);/* 表示する列数を変えたい場合はここの3を変更 */
}
/* 新着記事・各記事一覧 */
.wp-block-cocoon-blocks-tab .new-entry-cards.widget-entry-cards {
	display: grid;
	grid-template-columns: repeat(3,1fr);/* 表示する列数を変えたい場合はここの3を変更 */
}
.wp-block-cocoon-blocks-tab .new-entry-cards.widget-entry-cards {
	display: grid;
	grid-template-columns: repeat(3,1fr);/* 表示する列数を変えたい場合はここの3を変更 */
}
@media (max-width: 768px) {
	.wp-block-cocoon-blocks-tab .new-entry-cards.widget-entry-cards,
	.wp-block-cocoon-blocks-tab .popular-entry-cards.widget-entry-cards {
		grid-template-columns: repeat(2,1fr);/* 表示する列数を変えたい場合はここの2を変更 */
	}
}
@media (max-width: 768px) {
	.wp-block-cocoon-blocks-tab .widget-entry-cards.card-large-image .e-card {
		font-size: 14px;
	}
}

/* 通知 */
.notice-area-message {
	font-size: 16px;
}
.notice-area {
	padding: 1em;
}
@media (max-width: 768px) {
	.notice-area-message {
		font-size: 14px;
	}
}
/* 点滅のアニメーション */
@keyframes flash {
   0% {
  	 opacity: 0;
   }
	100% {
		opacity: 1;
	}
}
.notice-area-message {
   animation: flash 3s ease-in-out infinite alternate;
	position: relative;
}
.notice-area-message:after{
  font-family: "Font Awesome 5 Free";
  content: '\f35a';
}