【SANGOカスタマイズ】オリジナルトップページのつくり方

この記事では、WPテーマ「SANGO」でオリジナルトップページをつくる方法と、わたしのトップページのテンプレートを紹介します。

SANGOはショートコードの数が豊富で、カスタマイズの幅がとても広いです。CSSがコピペでしか使えない初心者の私でも、簡単に好みのカスタマイズが実現できます。

今回紹介するトップページは、ショートコードやSANGOの機能だけでほぼ完成するものなので、是非参考にしてみてください。

オリジナルトップページ適用手順

テンプレート

わかりやすく説明を心掛けましたが、文章力不足でわかりにくいところがあります。悔しい。

基本のひな壇をコピペ

[yoko2 responsive][cell]
WHAT'S NEW
新着記事
[catpost type="card2" num="10"]
[/cell][cell]
RANKING
人気記事
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]
[card2 id=""]

[/cell][/yoko2]TAG

上のソースを固定ページのビジュアルにコピペします。これを元に、WPのアイコン？で文字色を変えたり、chromeの検証でタグHTMLを持ってきたりして完成させます。

人気記事の投稿IDを埋める

古典的なやり方。ヴィジェットに人気記事を設置してみて順位を調べます。多く読まれている順に投稿IDをさきほどの空欄に書いていきます。IDの簡単な調べ方は公式を参照。

文字色や配置を整える

WHAT’S NEW 新着記事 をまとめて選択して中央揃え。WHAT’S NEWは文字のスタイルよりメインカラーにして、17ptにしました。新着記事は10ptで添える感じにしました。RANKING 人気記事も同様に行います。ランキングはアクセントカラーにしました。

一部文字のフォントを変更

わたしは英語の部分をロゴで使用しているVoltaireにしたかったので、<span style=”font-family: Voltaire;”></span>で囲んで変更しました。

WEBフォントの導入は 納得のいくSANGOカスタマイズができたから一挙紹介【随時更新中】で少し説明しているので興味があれば是非覗いてみてください。

タグクラウドを検証で持ってくる

検証ってなんだ？という方はサルワカさんの記事を参照。なお、このカスタマイズは自分でタグ表示をしている人にしか使えません。

まず、chromeで自分のサイトでタグ表示されているものを開きます。

タグクラウド周辺で右クリック。検証を選択します。

タグ全体が青くなる行で右クリックしてcopy＞copy outerHTMLをクリックします。そうするとクリップボードにタグ表示のHTMLが保存されるみたいなので、固定ページの一番下に張り付けてプレビューで確認します。うまく張り付いてたらオッケーです。

公開

プレビューしてみておかしいところが無ければ公開します。

2分割ヘッダーアイキャッチを設定

最初に書いたホームページ設定で固定ページをトップページにしたら、最後に２分割ヘッダーアイキャッチをつくります。

ヘッダーアイキャッチのサイズは300×200にしました。個人的に記事と横幅を合わせたいのですが、ピッタリなサイズを見つけられませんでした。少しガタガタしていて納得いっていません。みつけたらまた更新しますが、解決策を見つけた方はツイッターかコメント欄で教えてくださるととても喜びます。

さいごに

我ながらおしゃれじゃないですか？カテゴリラベルが無いこと、横幅がガタガタなところはダサいですが、それ以外は満足しています。

気が向いたときにちょこちょこ解決策を考える予定なので、いつか自分で完璧だと言えるサイトを作っていきたいです。

ほんと、SANGOはカスタマイズが楽しすぎて記事がおろそかになってしまいます（自分が悪い）趣味ブログだからそれでもいいんだ！（自己暗示）

マテリアルデザインとは大きくかけはなれたカスタマイズなので、おすすめはしませんが、参考になる場所があればじゃんじゃん使ってください！