WordPressのテーマSANGOでトップページをカスタマイズしたい

このページは私のメインブログで

WordPressテーマSANGOのトップページをカスタマイズした記事を紹介していますがSANGO Gutenbergプラグインの不具合でコードが正しく表示されない為

解説無しのコードのみ紹介しています。

興味のある方はこちらの解説ページも参考にしながらお試しください。

marqueeタグで文字をスクロールする

<marquee><b>本業である電話・フレッツ光回線やブログ運営・迷惑メールに登録するとどうなるのかなど雑記ブログですが特化ブログ並みの濃い内容で日常生活に役立つ面白い情報を紹介しています。</b></marquee>

最新記事を横3列で表示させる

<div class="newpst">
<p class="hh hh5 pastel-bc ct">- New Post -</p>
<p>
			

			
				
				

				SMBCカードアカウントの再認証が必要です				2023年9月3日								
			
							
							

			
				
				

				Amazon.co.jp アカウント更新リクエスト! 【参照】 #JP8436646847				2023年9月3日								
			
							
							

			
				
				

				【えきねっと】アカウントの自動退会処理について				2023年9月3日								
			
							
							

			
				
				

				【重要情報】三井住友カードサービスの緊急連絡、情報を確認してください				2023年9月3日								
			
							
							

			
				
				

				えきねっと【ご注意】会員情報変更および退会に関するお知らせ				2023年9月3日								
			
							
							

			
				
				

				【myTOKYOGAS】よりご利用料金のご請求です※【6月1日重要なお知らせ】				2023年6月4日								
			
							
				
</p>


<p><a href="https://mikotoniomakase.com/author/mikoto-mikaka/" class="btn raised red-bc strong">新着記事をもっと見る</a></p>

</div>
<style>
.newpst{
    animation-name: fadein;
    animation-duration: 6s;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatesy(20px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatesy(20px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}
div.newpst .longc_title{/*記事タイトル*/
    font-size:100%!important;
}


.red-bc{/*リンクボタン*/
    background:#fff!important;
    color:#333;
    border:#333 solid 1px;
    font-size:90%!important;
}

@media only screen and (min-width: 768px) {
  .catpost-cards .c_linkto {
     width: 32%;
  }
}

p.hh.hh5{/*見出し*/
    margin:0em auto 0.5em auto !important;
    letter-spacing:0.1em;
    font-weight: bold;
    font-size:100%!important;
    padding: 0.3em 0.4em;
    color: #333!important;
    background:none!important;
    border-bottom:#333 solid 2px!important;
}
div.picup a.c_linkto img{/*おすすめ記事アイキャッチ*/
    margin:0.5em!important;
    width:90%!important;
}
</style>

カテゴリー別のお勧め記事をはてなブログカードでカスタマイズ

<font size="6" color="#0000ff"><b>- category -</b></font>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="style.css">
    <main>
     <section class="news">
        <div class="news__outer">
          <ul class="news__items effect offs">

<p class="ct hh5 main-bdr hh">ブログ初心者</p>
はてなブログのリンクカードを3つ貼り付ける
<p>
</p>
<p><a href="https://mikotoniomakase.com/category/blogkankei/burogusyosinsya/" class="btn raised red-bc strong">このカテゴリーをもっと見る</a></p>
<p>
</p>
<p>
</p>
<p>&nbsp;</p>
<p>
</p>
<p class="ct hh5 main-bdr hh">ブログカスタマイズ</p>
はてなブログのリンクカードを3つ貼り付ける
<p>
</p>
<p><a href="https://mikotoniomakase.com/category/blogkankei/kasutamaizu/" class="btn raised red-bc strong">このカテゴリーをもっと見る</a></p>
<p>
</p>
<p>
</p>

          </ul>
        </div>
      </section>
    </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>

スクロール時にふわっと表示されるコード

<script>
// スクロール出現用関数（.offs ⇄ .ons）
function scr_ani(scr, offs_max) {
  var window_h = $(window).height(),
    offs_length = $(".offs").length,
    ons_length = $(".ons").length;
  if (offs_length) {
    var first_item = offs_max - offs_length;
    for (var i = 0; i < offs_length; i++) {
      var data_scr = first_item + i;
      var offs = $('.offs[data-scr="' + data_scr + '"]');
      var target = offs.offset().top;
      var trigger = target - (window_h + scr - window_h * 0.3);
      if (trigger < 0) {
        offs.removeClass("offs").addClass("ons");
      } else {
        break;
      }
    }
  }
  if (ons_length) {
    var last_item = ons_length - 1;
    for (var i = 0; i < ons_length; i++) {
      var data_scr = last_item - i;
      var ons = $('.ons[data-scr="' + data_scr + '"]');
      var target = ons.offset().top;
      var trigger = target - (window_h + scr);
      if (trigger > 0) {
        ons.removeClass("ons").addClass("offs");
      } else {
        break;
      }
    }
  }
}

$(function () {
  /*
  スクロール出現
  */
  var scr = $(window).scrollTop();
  // スクロール出現アイテムにナンバリング
  var offs_max = $(".offs").length;
  for (var i = 0; i < offs_max; i++) {
    $(".offs").eq(i).attr("data-scr", i);
  }

  scr_ani(scr, offs_max);

  /************
  スクロール時
  ************/
  $(window).on("scroll", function () {
    var scr = $(window).scrollTop();
    /*
    スクロール出現
    */
    scr_ani(scr, offs_max);
  }); // end scroll
}); // end function
</script>
<style>
/*ふわっと表示*/
table {
    border: 1px solid black;
}
td {
    border: none;
}

.news__items.offs.effect {
  opacity: 0;
  transform: translate(0, 100px);
  -webkit-transform: translate(0, 100px);
}
.news__items.ons.effect {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 2s ease;
  transition: all 2s ease；;
}
</style>
<style>
p.hh.hh5{/*見出し*/
    margin:0em auto 0.5em auto !important;
    letter-spacing:0.1em;
    font-weight: bold;
    font-size:100%!important;
    padding: 0.3em 0.4em;
    color: #333!important;
    background:none!important;
    border-bottom:#333 solid 2px!important;
}
div.picup a.c_linkto img{
    margin:0.5em!important;
    width:90%!important;
}
</style>

箇条書きの枠線を消す

/*箇条書きの枠線を消す*/
.entry-content ul, .entry-content ol {
    border: none;
    padding: 0 0 0 1.5em;
    margin: 0;
}