SANGOでトップページをホームページっぽくシンプルにカスタマイズしました|TOPのホーム固定

こんにちは。マリ(@damarino_oheya)です!

 

このブログはワードプレス有料テーマの「SANGO」を使っています。

マリ

SANGOの使い方は公式カスタマイズガイドがあるので本当に分かりやすいです。

今回、カスタマイズガイドを見ながら固定ページをホーム固定するカスタマイズをしました。

ホーム固定に表示した内容
  1. おすすめ記事(4記事)
  2. 新着記事(4記事)
  3. おすすめカテゴリー(6個)
  4. カテゴリーごとの記事(6カテゴリーごと3記事ずつ)

▼①おすすめ記事(PC・スマホ)

▼②新着記事(PC)

▼②新着記事(スマホ)

▼③カテゴリー(PC)

▼③カテゴリー(スマホ)

▼④カテゴリーごとの記事(PC)

▼④カテゴリーごとの記事(スマホ)

マリ

記事の出力はショートコードを3つ使っています♩

SANGOの関連記事のショートコードは何種類かありますが、使ったのはこの2つ。

  • card id="投稿ID"(おすすめ記事で使用)
  • card2 id="投稿ID"(カテゴリーごとの記事で使用)

また、新着記事の出力はこちら。

  • catpost num="出力する新着記事数"(新着記事で使用)

マリ

あとは見出しやボタンをつけたり、横並び2列のショートコードを使ってごにょごにょしている感じです。

SANGOがあれば、ブログをホームページ風のトップページにするのはとってもかんたん。(と言っても5時間くらいかかりましたが)(カスタマイズ楽しい)

この記事では、このブログのSANGOのホーム固定の方法と、カスタマイズしたことをまとめています。

MEMO

デザインを確認しているデバイスは、MacBook Air・iPad・iPhone6の3つです。また、クラシックエディタを使用しています。(Gutenbergでの確認はしていません)

*注意*この記事のカスタマイズを使う場合、カスタマイズは必ずバックアップを取ったあとでお願いします。また、いちブロガーのカスタマイズだということをご理解くださいませ。

SANGOのホーム固定カスタマイズ

SANGOでトップページをホームページっぽくする基本的な方法は、SANGOの公式カスタマイズガイドに記載されているのでご一読ください。

ホーム固定に表示した内容
  1. おすすめ記事(4記事)
  2. 新着記事(4記事)
  3. おすすめカテゴリー(6個)
  4. カテゴリーごとの記事(6カテゴリーごと3記事ずつ)

▼固定ページの記事部分の背景色はこちらのCSSを固定ページのHTMLに直接書いています。

HTMLに貼り付けるCSS
<style>
.entry-content.cf{
    background:yellow!important;/*好きな色*/
}
</style>

 

おすすめ記事|HTMLとカスタマイズのCSS

トップページ一番上のおすすめ記事は、card id="投稿ID"で記事を出力しています。

カスタマイズガイドを参考に固定ページでホーム固定用ページを作ったら、HTMLに以下を入力します。

HTML
<p>[center]</p>
<div class="picup">
<p class="hh hh5 pastel-bc ct">おすすめ記事</p>
[yoko2][cell][card id="記事ID①"][/cell][cell][card id="記事ID②"][/cell][/yoko2]
[yoko2][cell][card id="記事ID③"][/cell][cell][card id="記事ID④"][/cell][/yoko2]
</div>
<p>[/center]</p>
<p>&nbsp;</p>
MEMO
  1. 全体を中央寄せで囲む
  2. おすすめ記事はdiv class="picup"で囲む(カスタマイズするため)
  3. 「おすすめ記事」の見出しは好きなのを選ぶ(見出し5をCSSでカスタマイズしてます)
  4. 記事を横並びにする(SANGOのショートコードでできること「横並び2列」)
  5. その下にも横並び記事を置く

マリ

スマホでも横並びにしたいので、横並び2列のショートコードデフォルトで記載されている「responsive」を削除しています♩

▼ここで出力した記事のデザインはCSSでカスタマイズしています。

css
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;
}

見出しのデザイン変更・記事のアイキャッチ画像を少し小さく変更し白い枠があるように見せています。

 

新着記事|HTMLとカスタマイズのCSS

新着記事は、catpost num="出力する新着記事数"で出力しています。(SANGOカスタマイズガイドのショートコードでできること「新着記事を好きなだけ出力」)

マリ

私の場合、どこかのブログでトップページを見るときは新着記事を見たいときなので、ここでも新着記事を強調しています♩
HTML
<div class="newpst">
<p class="hh hh5 pastel-bc ct">新着記事</p>
<p>[catpost type="card2" num="4"]</p>

[center]
<p><a href="https://www.oheya-migaru.com/new-posts" class="btn raised red-bc strong">新着記事をもっと見る</a></p>
[/center]
</div>
MEMO
  1. div class="newpst"で囲む
  2. 見出しは全て「おすすめ記事」と同じものです
  3. 新着記事を出力(記事を出力するショートコードcatpost num="出力する新着記事数"type="card2"を加えてカードのデザインを変えています。)
  4. 新着記事一覧ページへのリンク(ボタンデザインをカスタマイズしています)

▼ここで出力した記事のデザインはCSSでカスタマイズしています。

CSS
div.newpst .longc_title{/*記事タイトル*/
    font-size:120%!important;
}

div.newpst a.c_linkto.longc_linkto:first-of-type: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;
}
.red-bc{/*リンクボタン*/
    background:#fff!important;
    color:#333;
    border:#333 solid 1px;
    font-size:90%!important;
}

記事のタイトルを大きく・いちばん上にくる記事に「NEW」を表示・リンクボタンのデザイン変更をしています。

 

おすすめカテゴリー|HTMLとカスタマイズのCSS

カテゴリー表示にはリストを使っていますが、

  • カテゴリーURL
  • 画像URL
  • カテゴリーへのテキストリンク

をHTMLに入力します。

ちょっと面倒なんですけど、画像の大きさはどんな大きさでもOKです。

HTML
<p class="hh hh5 pastel-bc ct">人気のカテゴリー</p>
<ul class="popcate">
	<li><a href="URL"><img src="画像URL" alt="" />カテゴリー名①</a></li>
	<li><a href="URL"><img src="画像URL" alt="" />カテゴリー名②</a></li>
	<li><a href="URL"><img src="画像URL" alt="" />カテゴリー名③</a></li>
</ul>
<ul class="popcate">
	<li><a href="URL"><img src="画像URL" alt="" />カテゴリー名④</a></li>
	<li><a href="URL"><img src="画像URL" alt="" />カテゴリー名⑤</a></li>
	<li><a href="URL"><img src="画像URL" alt="" />カテゴリー名⑥</a></li>
</ul>
<p>[center] <a href="サイトマップのURL" class="btn raised red-bc strong">サイトマップはこちら</a> [/center]</p>
<p>&nbsp;</p>
MEMO
  1. リストulにclass="popcate"を作る。
  2. liで画像とカテゴリー名へのリンクを貼る(liは3つ)
  3. 1・2をもう一つ作ってカテゴリーが合計6個になるように。
  4. サイトマップへのボタン(カスタマイズ済)

▼リスト・画像・テキストリンクはCSSでカスタマイズしています。

CSS
/*人気カテゴリー*/
ul.popcate{
    background:none!important;/*背景色が必要な場合はどうぞ*/
    padding:0px!important;
    border:none!important;
    display: -webkit-flex;
    display: flex;
    margin:0 auto 0.5em 0!important;
}
ul.popcate li{
    margin:0.5em;
    background:none!important;/*背景色が必要な場合はどうぞ*/
    border:none!important;
    list-style: none;
    flex-basis: 30%;
    text-align:center!important;
    letter-spacing:0.1em;
    font-weight: bold;
}

ul.popcate a{
    height:150px;
    width:100px!important;
    color:#333!important;
    font-size:75%;
}

ul.popcate a:hover{
    opacity: 0.5;
    background:none;/*背景色が必要な場合はどうぞ*/
}

ul.popcate img{
    object-fit: cover;
    height:100px;
    width:100%!important;
    border-radius:5px;
}

<ul>リストを2つ作り、<li>のリストを横並びにしている感じです。

マリ

display: flex;って本当に便利。使い方間違ってたら申し訳ないです♩

 

おすすめカテゴリーごとに記事を出す(PC2列・モバイル1列)|HTMLとカスタマイズのCSS

おすすめカテゴリーの記事表示は横並び2列のショートコードを使っています。

PCでは2列ですが、レスポンシブ対応のままにしているのでスマホでは1列になります。

HTML
<div class="top-kanren">
[yoko2 responsive][cell]
<p class="ct hh5 main-bdr hh">カテゴリー名①</p>
<p>[card2 id="記事ID①,記事ID②,記事ID③"]</p>
<p>[center]</p>
<p><a href="カテゴリーURL" 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>
<p>[card2 id="記事ID①,記事ID②,記事ID③"]</p>
<p>[center]</p>
<p><a href="カテゴリーURL" class="btn raised red-bc strong">このカテゴリーをもっと見る</a></p>
<p>[/center]</p>
<p>[/cell]</p>
[/yoko2]
</div>

マリ

このブロブでは、こちらのHTMLを3つ使用し、6つのカテゴリー&記事を紹介しています♩
MEMO
  1. div class="top-kanren"で囲む
  2. 横並び2列のショートコードの中に、見出し&記事出力のショートコード
  3. 2を3つ作る(全部で6つのカテゴリー)

▼ここで出力した記事のデザインはCSSでカスタマイズしています。

HTML
div.top-kanren .longc_img {/*画像の範囲*/
    width: 35%;
}
div.top-kanren a.c_linkto.longc_linkto img{/*画像の大きさ*/
    height:100px;
    width:100%;
    padding:2px;
    background:#fff;
}

div.top-kanren .sng-link-time {/*日付消す*/
    display:none;
}
div.top-kanren .longc_title {
    color:#333;
    letter-spacing:0.5px;
    font-weight:bold;
}

@media only screen and (max-width: 480px){/*モバイルでの見え方*/
div.top-kanren .c_linkto{
    display:flex;	
}
div.top-kanren .c_linkto .c_linkto_text {
    max-width: 60%;
    font-size:85%;
    padding-top:8px;
}
div.top-kanren .longc_img {/*画像の範囲*/
    width: 40%!important;
}
}

記事の出力には、SANGOのカスタマイズガイド「SANGOで固定ページをホーム固定するまとめ」で紹介されているcard2 idのショートコードを使いました。

このカードはPCでは横長・モバイルではカードタイプの記事デザインですが、モバイルでも横長になるようにCSSをカスタマイズしています。

 

SANGOのホーム固定カスタマイズのまとめ

というわけで、このブログのSANGOのホーム固定の方法&カスタマイズしたことのまとめでした。

ホーム固定に表示した内容
  1. おすすめ記事(4記事)
  2. 新着記事(4記事)
  3. おすすめカテゴリー(6個)
  4. カテゴリーごとの記事(6カテゴリーごと3記事ずつ)

ほんと実際にやってみるまで知らなかったんですが、SANGOの固定ページをホーム固定するにはショートコードを駆使することでいろんなタイプのカードが使えますよね。

マリ

とはいえ、色々カスタマイズしているので、マテリアルなSANGO感が薄れるんですけどね・・・

このブログにホーム固定はいらないかな〜と思ってたけど、実際に設定してみると意外とお気に入りです♩

*お願い

display: flex;とか使っているのでもしかすると「このコードが足りない!」とかあるかもしれません。)

(もし使ってみて「ここ変!」「反映されない!」とかあったら対応するのでツイッター(@damarino_oheya)かコメント欄かお問い合わせページから教えていだだくと幸いです。)

このような記事もあります

SANGOのスマホ版デザインでカスタマイズしたことひとりSlackでブログのタスク管理がいい感じ【無印良品|入れたまま使えるパソコンケース】MacBook Airを入れるのに購入しました

コメントを残す

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

20 − 16 =