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>[catpost is_date=1 type="card" num="6"]</p>

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

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

[center]<font size="6" color="#0000ff"><b>- category -</b></font>[/center]
<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">
[yoko2 responsive][cell]
<p class="ct hh5 main-bdr hh">ブログ初心者</p>
はてなブログのリンクカードを3つ貼り付ける
<p>[center]</p>
<p><a href="https://mikotoniomakase.com/category/blogkankei/burogusyosinsya/" class="btn raised red-bc strong">このカテゴリーをもっと見る</a></p>
<p>[/center]</p>
<p>[/cell]</p>
<p>&nbsp;</p>
<p>[cell]</p>
<p class="ct hh5 main-bdr hh">ブログカスタマイズ</p>
はてなブログのリンクカードを3つ貼り付ける
<p>[center]</p>
<p><a href="https://mikotoniomakase.com/category/blogkankei/kasutamaizu/" class="btn raised red-bc strong">このカテゴリーをもっと見る</a></p>
<p>[/center]</p>
<p>[/cell]</p>
[/yoko2]
          </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;
}

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA