【SANGO】ブロックだけでトップページをカスタマイズ！ショートコードは不要です

このブログは3年くらい前からテーマSANGOを使って運営しています。

▼ここ最近のSANGOのカスタムブロックのアップデートがとっても充実していてすごすぎるという記事を書きました。

2021-11-12みんな知ってる？最近のSANGOが凄すぎるから記事を書かずにいられない

以前はSANGOといえばショートコードが充実して人気でしたが、今はカスタムブロックが熱いです。

• 記事を書くのが簡単になった
• カスタマイズが楽

SANGOを使えばブログを書くのが簡単です。

そしてトップページを作るのも超簡単。

この記事では、このブログのトップページを作った方法についてまとめています。

（＊SANGOGutenbergのインストールが必要です。まだの方はSANGOの公式ページをご確認ください）

トップページのカスタマイズまとめ

現在のトップページは、

という感じに作っています。

新着記事｜SANGO記事一覧

新着記事はSANGO記事一覧のカスタムブロックで作っています。

新着記事だとわかるように、記事トップのカードリンク左上に「NEW」という文字をつけるカスタマイズをしています。

.c_linkto:nth-of-type(1):before
{/*新着記事1つ目に「NEW」を出す*/
    position: absolute;
    content: " NEW";/*好きな文字*/
    display: inline-block;
    width: 75px;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    background: yellow;/*好きな色*/
    font-size: 11px;
    line-height: 28px;
    color: #333;/*文字色*/
    letter-spacing: 3px;
    padding-left: 3px;
    border-radius: 0px;
}

記事一覧へのリンク｜SANGOボタン

このボタンはSANGOボタンで作っています。

ボタンのデザインはいいな〜と思っていたnoteのボタンをマネしました。（すみません）

SANGOボタンもカスタムCSSでカスタマイズができるのでそこでやっています。

a.btn.flat3 {
	color:#333;
	border-color:#ccc;
	font-size:85%;
	letter-spacing:1px;
	font-weight:bold;
	background:#fff;
	margin:2em;
	padding: 1em 2em;
}
a.btn.flat3:hover {
	color:#333;
	border-color:#333;
}

about〜カテゴリー紹介｜アコーディオン

これはアコーディオンを使っています。

アコーディオンを開くとこんな感じですね。

カテゴリー紹介はこんな感じ。

ボックスはサイトに合わせてカスタムCSSにコードを書いています。

ちなみにaboutとか収納・シンプルな暮らし、とかのアコーディオンに表示される文字幅をすこし調整しています。

.sgb-acc__title{
	font-size:90%;
	letter-spacing:1px;
}

インスタリンク｜SANGOヒーロー

ヒーローは、ボタンも簡単にカスタマイズできるので良いんですよね。

記事一覧へのリンクと同じようなカスタマイズをカスタムCSSに書いています。

SANGOタブ

SANGOタブでおすすめカテゴリーの記事一覧を見られるようにしています。

見ている人がいるかは分かりませんが、簡単にこんなことができてありがたいです。

SANGOスライダー

おしゃれかなーと思い、こんなのを作っています。

色がピンクのところはフルサイズ背景です。

なので、フルサイズ背景の中に見出し（like item）とスライダーが入っている感じですね。

正直、あんまり使いこなせてないです。

サイトマップへのリンク｜SANGOボタン

これは記事一覧へのリンク｜SANGOボタンと同じです。（リンク先をサイトマップページへ）

広告｜SANGO条件

さいごに、広告はSANGO条件でPCとモバイルでの見た目を変えています。

▼SANGO条件についてはこちらの記事で詳しく書いています。

みんな知ってる？最近のSANGOが凄すぎるから記事を書かずにいられない

まとめ

いやー。SANGOってすごいですね。簡単にトップページが作れちゃいます。

正直、この記事も1時間くらいで書きました。

SANGOのカスタムブロックが充実しまくっているおかげで、ブログに書きたいことがはっきりしているときは以前と比べるとかなり時短で形にできます。

マリ

ブロックを使いこなせば時短で記事が完成します。

まだブロックを使いこなせてないなあって場合は、

1. まずはSANGO公式さんのツイッターをフォロー（更新情報が記載されている）
2. 更新情報を書き出す
3. 更新情報の中から気になるブロックを試してみる

SANGOでどんなことができるかを把握し、その後にやりたいことを当てはめて、実際にブログを作ってみると楽しいかなと思います。

2021-11-12みんな知ってる？最近のSANGOが凄すぎるから記事を書かずにいられない