WordPressテーマSANGOで固定ページをカスタマイズしてトップページに設定しました

WordPressテーマSANGOで固定ページをカスタマイズしてトップページに設定しました

ことみ

WordPressテーマのSANGOを利用していますが他の人と違うTOPページにカスタマイズをしたいけどいろいろ出来すぎて悩みます

このブログはWordPress有料テーマのSANGOを利用しています。

そして人気なテーマで利用している方が多い為

他の人と似たようなデザインになってしまう事が有るので固定ページをカスタマイズしてトップページに設定したので記録として残しました。

みこと

今回はSANGOで固定ページをカスタマイズしてTOPページに設定する方法を解説します。作業前にバックアップを取ってからお試しください


SANGO Gutenbergプラグインをインストールする

事前準備としてSANGOの公式サイトからSANGO Gutenbergプラグインをインストールします。

SANGOはカスタマイズガイドが有りHTMLやCSSの知識が無い方でもショートコードやSANGO Gutenbergプラグインを使うと簡単にカスタマイズする事が出来るのでとてもお勧めです。

SANGOはカスタマイズガイドが有りHTMLやCSSの知識が無い方でもショートコードやSANGO Gutenbergプラグインを使うと簡単にカスタマイズする事が出来るのでとてもお勧めです。ダウンロードしたzipファイルは解凍しないでプラグインの新規追加からファイルのアップロードを選択有効化をクリックして反映されていれば準備完了です。

ダウンロードしたzipファイルは解凍しないでプラグインの新規追加からファイルのアップロードを選択

有効化をクリックして反映されていれば準備完了です。

固定ページをトップページにカスタマイズする

SANGO Gutenbergプラグインがインストール出来たら

固定ページの新規作成から普段記事を書くように勧めれば大丈夫ですが一つだけ違う所は右側にあるテンプレートを変更しています。

SANGO Gutenbergプラグインがインストール出来たら固定ページの新規作成から普段記事を書くように勧めれば大丈夫ですが一つだけ違う所は右側にあるテンプレートを変更しています。テンプレートをトップページ用にすればタイトル名は表示されないので自分で分かりやすい名前を入力します。
テンプレートを変更

☑ トップページ用1カラム(タイトルなど出力無し)

トップページ用サイドバー有りに(タイトルなど出力無し)

テンプレートをトップページ用にすればタイトル名は表示されないので自分で分かりやすい名前を入力します。

それでは固定トップページを上から順番に解説をしていきます。

最新記事をカスタマイズする

みこと

新着記事は正方形のカードで横3列と読込速度をごまかす為にゆっくりふわっと表示するようにカスタマイズしています。
新着記事は正方形のカードで横3列と読込速度をごまかす為にゆっくりふわっと表示するようにカスタマイズしています。新着記事の上にはこのブログはどんなテーマをメインとした記事なのかを分かりやすくする為に説明文を右から左にスクロールさせています。

新着記事の上にはこのブログはどんなテーマをメインとした記事なのかを分かりやすくする為に説明文を右から左にスクロールさせています。

marqueeは文字をスクロールする際に使用するタグで、タグで囲まれた文字は、表示領域内中を動かすことができデフォルトでは右から左へスクロールする動作を繰り返しますが

左から右や端まで行ったら折り返す・スクロールする速度も変更する事もできるので詳しくはmarqueeタグで検索してみてください。

こちらのHTMLコード貼り付け本業である~紹介していますを削除してお好みの文章に変更してください。

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

最新記事を表示させる方法は?

ブロック追加SANGO記事を選択する事で表示する事ができ右側にあるカードタイプの表示設定と記事数の表示方法をお好みで設定するだけで簡単に最新記事が作る事が出来まが

正方形のカードを選択した場合デフォルト状態では横2列になりサイドバーが無いので大きく表示されるのでHTML/CSS/SANGOのショートコードを使って横3列に表示させます。

ブロック追加SANGO記事を選択する事で表示する事ができ右側にあるカードタイプの表示設定と記事数の表示方法をお好みで設定するだけで簡単に最新記事が作る事が出来まが正方形のカードを選択した場合デフォルト状態では横2列になりサイドバーが無いので大きく表示されるのでHTML/CSS/SANGOのショートコードを使って横3列に表示させます。

こちらのHTML/CSSをコピーしたら黄色の場所を変更します。

<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>

– New Post – は最新記事の上に表示されている部分で新着記事などお好みで変更してください。

num=”6″ はSANGOのショートコードで何記事表示させるかの数字で4記事の場合はnum=”4″になります今回は横3列で表示になっているので num=”3″ num=”9″など3の倍数がお勧めです。

href=” https://~ mikaka/新着記事をもっと見る名前とリンク先を変更します。

animation-duration: 6s; は最新記事がふわっと表示される時間でもう少し早くしたい場合は3s、もっと遅くしたい場合は10sなどお好みで変更してください。

カテゴリー別のお勧め記事をカスタマイズする

みこと

カテゴリー別お勧め記事は、はてなブログのリンクカードを使いスクロールするとふわっと表示するようにカスタマイズしています。
カテゴリー別のお勧め記事一覧は、はてなブログのリンクカードを使いスクロールするとふわっと表示されるようにカスタマイズしました

こちらのHTML/CSSをコピーしたら黄色の場所を変更します。

[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>

– category – カテゴリ別記事の上に表示されている部分で人気カテゴリー別などお好みで変更してください。

ブログ初心者ブログカスタマイズの部分を貯金・節約などテーマに有った名前に変更します。

“https://mikoto ~ burogusyosinsya/このカテゴリーをもっと見る名前とリンク先を変更します。

はてなブログのリンクカードを3つ貼り付けるのはちょっと面倒ですが手順を紹介します

最初にはてなブログのダッシュボードから記事を書くページに移動したらリンクカードを作りたい記事のアドレスをコピーして貼り付け埋め込みを選択にチェックを入れて

まずははてなブログのダッシュボードから記事を書くページに移動したらリンクカードを作りたい記事のアドレスをコピーして貼り付け埋め込みを選択にチェックを入れて選択した形式でリンクを挿入をクリックするとはてなブログのリンクカードが表示されます。

選択した形式でリンクを挿入をクリックするとはてなブログのリンクカードが表示されます。

HTML編集をクリックしたら<cite class=~</cite>を削除したコードをコピーしてWordPress側の はてなブログのリンクカードを3つ貼り付ける の部分に貼り付けます。

HTML編集をクリックしたら<cite class=~</cite>を削除したコードをコピーしてWordPress側のはてなブログのリンクカードを3つ貼り付けるの部分に貼り付けます。

カテゴリー別リンクが作れたらスクロール時にふわっと表示されるコードを追加します。

こちらのscriptとCSSのコードはそのままコピーして貼り付ければ大丈夫です。

<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>

カテゴリ別のコードは箇条書きの枠線が表示されるのでこちらのCSSを追加すると枠線を消す事が出来るのでお好みで追加してください。

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

はてなブログのリンクカードを貼りすぎると読込速度が大幅に遅くなるので注意してください。

SANGOヒーローで目立つ宣伝を

みこと

SANGOヒーローを使って最近始めたYouTubeの宣伝をしてみました
SANGOヒーローは2分割にして画像と説明文とリンク先を貼る事が出来るのでお問合わせや別のWebサイト・YouTubeなど運営している方には目立ちやすく宣伝出来るので個人的にお気に入りでSANGOヒーローを使う場合は

SANGOヒーローは2分割にして画像と説明文とリンク先を

貼る事が出来るのでお問合わせや別のWebサイト・YouTube・アフィリエイト広告など運営している方には目立ちやすく宣伝出来るので個人的にお気に入りでSANGOヒーローを使う場合は

ブロックを追加からSANGOヒーローを選択して

ブロックを追加からSANGOヒーローを選択して右側のヒーロースタイルをお好みで選んで画像動画を選択次にタイトル・説明文・リンク先のURL設定をするだけで簡単に目立つリンク先を作る事が出来ます。

右側のヒーロースタイルをお好みで選んで画像動画を選択次にタイトル・説明文・リンク先のURL設定をするだけで簡単に目立つリンク先を作る事が出来ます。

写真には表示されていませんが文字・背景色の変更も可能です。

スマートフォンでもPC画面で表示する

最後にトップページをスマートフォンなどのモバイルモバイルで見た場合に

PC画面用に作ったページがモバイル表示ではレイアウトが崩れてしまうのが気になる方にはPC用にコーディングしたソースをそのまま綺麗にスマホでも見れるようにする場合は?

このコードを貼り付けると最初からPC画面表示の設定にしています。

<meta name="viewport" content="width=960">

ただしモバイルページの読込速度が遅くなるのとGoogleアナリティクスから

検索結果に影響がでる恐れが有るとコンテンツの幅が画面の幅を超えていますとエラーが表示される場合が有るのでお好みで設定してください。

カスタマイズした固定ページをトップページに設定する

みこと

最後にカスタマイズした固定ページをTOPページに表示するように設定します

せっかく固定トップページ用にカスタマイズしてもそのままではトップページには表示されません。

せっかく固定トップページ用にカスタマイズしてもそのままではトップページには表示されません。カスタマイズした固定ページをトップページに設定する方法は?外観➡カスタマイズ➡ホームページ設定からホームページの表示の固定ページにチェックをいれてホームページをカスタマイズページを選択最後に投稿ページを新規記事一覧に設定すればトップページにアクセスした場合は自動的に固定ページにリダイレクトされます。

カスタマイズした固定ページをトップページに設定する方法は?

外観➡カスタマイズ➡ホームページ設定から

ホームページの表示の固定ページにチェックをいれて

ホームページをカスタマイズページを選択最後に投稿ページを新規記事一覧に設定すればトップページにアクセスした場合は自動的に固定ページにリダイレクトされます。

WordPressの有料テーマSANGOはHTML・CSSに詳しくない方でもSANGO Gutenbergとショートコードだけで十分にカスタマイズ可能ですが

今回はSANGOとはてなブログのリンクカードを利用して固定ページをカスタマイズしてトップページに設定しました。

みこと

最後にカスタマイズした固定ページをTOPページに表示するように設定します

#WordPress #SANGO #HTML #CSS #ミコトウェーブ

投稿日: 2021/01/01 22:00 書いた人: Mikoto Mikaka

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA