この記事では、WPテーマ「SANGO」でオリジナルトップページをつくる方法と、わたしのトップページのテンプレートを紹介します。
SANGOはショートコードの数が豊富で、カスタマイズの幅がとても広いです。CSSがコピペでしか使えない初心者の私でも、簡単に好みのカスタマイズが実現できます。
今回紹介するトップページは、ショートコードやSANGOの機能だけでほぼ完成するものなので、是非参考にしてみてください。
目次
オリジナルトップページ適用手順
[open title=’クリックで詳細’]
テンプレート
わかりやすく説明を心掛けましたが、文章力不足でわかりにくいところがあります。悔しい。
基本のひな壇をコピペ
[memo title=”MEMO”]先に固定ページの新規追加をクリックして、属性をトップページ1カラムに設定しておいてください。[/memo]
[codebox title=”ビジュアル”]
[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[/codebox]
上のソースを固定ページのビジュアルにコピペします。これを元に、WPのアイコン？で文字色を変えたり、chromeの検証でタグHTMLを持ってきたりして完成させます。
人気記事の投稿IDを埋める
古典的なやり方。ヴィジェットに人気記事を設置してみて順位を調べます。多く読まれている順に投稿IDをさきほどの空欄に書いていきます。IDの簡単な調べ方は公式を参照。
文字色や配置を整える
WHAT’S NEW 新着記事 をまとめて選択して中央揃え。WHAT’S NEWは文字のスタイルよりメインカラーにして、17ptにしました。新着記事は10ptで添える感じにしました。RANKING 人気記事も同様に行います。ランキングはアクセントカラーにしました。
一部文字のフォントを変更
わたしは英語の部分をロゴで使用しているVoltaireにしたかったので、<span style=”font-family: Voltaire;”></span>で囲んで変更しました。
WEBフォントの導入は[kanren id=”1551″]で少し説明しているので興味があれば是非覗いてみてください。
タグクラウドを検証で持ってくる
検証ってなんだ？という方はサルワカさんの記事を参照。なお、このカスタマイズは自分でタグ表示をしている人にしか使えません。
まず、chromeで自分のサイトでタグ表示されているものを開きます。
タグクラウド周辺で右クリック。検証を選択します。
タグ全体が青くなる行で右クリックしてcopy＞copy outerHTMLをクリックします。そうするとクリップボードにタグ表示のHTMLが保存されるみたいなので、固定ページの一番下に張り付けてプレビューで確認します。うまく張り付いてたらオッケーです。
[alert title=”注意”]わたしは標準のタグクラウドデザインから変更しています。[/alert]
公開
プレビューしてみておかしいところが無ければ公開します。
2分割ヘッダーアイキャッチを設定
最初に書いたホームページ設定で固定ページをトップページにしたら、最後に２分割ヘッダーアイキャッチをつくります。
ヘッダーアイキャッチのサイズは300×200にしました。個人的に記事と横幅を合わせたいのですが、ピッタリなサイズを見つけられませんでした。少しガタガタしていて納得いっていません。みつけたらまた更新しますが、解決策を見つけた方はツイッターかコメント欄で教えてくださるととても喜びます。
さいごに
[say]正直カスタマイズよりもこの記事書くほうが時間かかりました[/say]
我ながらおしゃれじゃないですか？カテゴリラベルが無いこと、横幅がガタガタなところはダサいですが、それ以外は満足しています。
気が向いたときにちょこちょこ解決策を考える予定なので、いつか自分で完璧だと言えるサイトを作っていきたいです。
ほんと、SANGOはカスタマイズが楽しすぎて記事がおろそかになってしまいます（自分が悪い）趣味ブログだからそれでもいいんだ！（自己暗示）
マテリアルデザインとは大きくかけはなれたカスタマイズなので、おすすめはしませんが、参考になる場所があればじゃんじゃん使ってください！
コメント