楽天カードのクレジットカードでポイントをお得に貯める

【SANGO】トップページの作り方とカスタマイズ方法

SANGOテーマ トップページのカスタマイズ

この記事では、

  • 【SANGO】トップページの作り方とカスタマイズ方法

について書いていきます。

  • SANGOテーマを導入したばかりの方
  • HTML&CSS初心者

に向けてトップページのカスタマイズ方法が参考になれば幸いです。

トップページをカスタマイズするだけでどんなサイトなのかもわかりやすく、読者にとっても優しいサイトになるのでやってみてください。

ぼくのつかっているSANGOテーマはこちら。

トップページの作り方とカスタマイズ

【カスタマイズ前】

SANGO カスタマイズ前

変更前はこんな感じにカードがズラッと並んでいるだけなので、

  • 「カテゴリ」がわからず、どんなサイトなのかもわかりにくい

サイトになっています。

カテゴリがわからずどんなサイトなのかもわかりにくいと離脱者も増えていくので、トップページをカスタマイズすることで読者としても読みやすいサイトになります。

どんなサイトなのかはっきりするようにしましょう。

 

そして、トップページをカスタマイズをするとこんな感じになります。

【カスタマイズ後】

SANGO カスタマイズ後

こんな風にカスタマイズをするとどんなサイトかわかりやすくなり、

  • カテゴリがわかるブログ

に仕上がります。

ぼくのブログは雑記ブログとして運営しているのですが、それでもカテゴリが綺麗にわかれるので読者としても

  • どんなサイトなのか分かる

ようになります。

どんなサイトでどんなカテゴリがあるのか分かれば興味のあるカテゴリを読んでもらえるようになります。

それではこのトップページのカスタマイズ方法を大まかに説明していきます。

ぼく自身も初めてのカスタマイズでしたが、簡単にできたのでぜひやってみてください。

固定ページで「トップページ」と「新着一覧記事」を作る

デフォルトでサイトのトップページがカードタイプで記事が並んでいるのですが、新たに「トップページ」を作ると記事一覧がなくなるので作る必要が出てきます。

作り方はこの通り。

固定ページ

新着記事とトップページのタイトル

まずは「固定ページ」→「新規追加」で記事を作成しましょう。

そしてタイトルに『新着記事一覧』『トップページ』の2つを固定ページとして作りましょう。まだ完成はしていないので下書き保存でOK。

注意
これから紹介するコードは「テキスト」でコードを書いてください。「ビジュアル」でやるとエラーになってしまう場合があります。

 

新着記事一覧の作成

そしてつぎは新着一覧記事を作っていきましょう。簡単なのですぐ終わります。

新着記事一覧

このカードタイプで良ければ、このコードをいれてください。

HTML
[catpost type="card" num="10"]

num=”◯”の部分は表示させたい記事の数なので、好みに合わせて記事数を入れ替えてください。

“3”であれば3記事、”10″であれば10記事出てくるようになります。(新着順で)

トップページの作成

見出しの作成

まずは、カテゴリの見出しを作成しましょう。

参考 見出しの挿入方法と種類一覧SANGOカスタマイズガイド

このサイトには見出しの種類がたくさんあるので、この中から好みの見出しを選んでください。

見出しごとにコードが用意されているので、コピーして貼り付けてください。

 

カメラ

このような見出しの場合は、

HTML
<p class="hh hh25">◯◯</p>

このコードの◯◯部分に「カメラ」と入力して貼り付けてください。

記事一覧の表示

このように表示させるには、まず箇条書きで載せたい記事のURLとタイトル名を決めてコードを入れ替える必要があります。

HTML
<ul>
<li><a href="ここにURL">ここにタイトル</a></li>
</ul>

URLと表示させたいタイトル名を指定してください。

箇条書きを増やしたい場合は、

HTML
<li><a href="ここにURL">ここにタイトル</a></li>

この部分をコピーして貼り付けるだけでOK。

もし箇条書きのデザインを変えたかったら

ぼくのこのサイトの場合はこのように表示されています。

HTML
[list class="li-chevron"]
<ul>
<li>〜</li>
</ul>
[/list]

これは先程の箇条書きのデザインになりますが、他のデザインにしたい場合は、class=”◯”の部分をこのサイトから引っ張ってくるだけでOK。

SANGOカスタマイズのサイトでいろんな箇条書きが出ているので、そのコードをコピーして貼り付けてください。

参考 記事に様々なスタイルの箇条書きを挿入するSANGOカスタマイズガイド

箇条書きの種類がたくさんあるので、class名をコピるのみ。

記事一覧を作るのに、URL貼り付けや記事タイトルなどを追加しなければならないので、時間がかかります。

ボタンの作成

このようなボタンでカテゴリごとの記事一覧に案内しましょう。

HTML
[btn href="ここにURL"]〇〇の記事一覧[/btn]

といった感じでURLとカテゴリ名を指定してあげましょう!

参考 ボックス・枠を挿入する方法と種類一覧SANGOカスタマイズガイド

ボタンのデザインはここからコードをコピって貼り付けてください。

ボタンを中央寄せ

HTML
[center][btn href="ここにURL"]〇〇の記事一覧[/btn][/center]

先程作ったボタンに中央寄せのショートコードで囲んでください。

デフォルトでは左寄せになっているのですが、スマホでもPCでも中央寄せのほうが見栄えがいいのでやっておきましょう。

2列で表示したい場合

このように表示させたい場合は、コードの最初と最後に

HTML
[yoko2 responsive]〜〜[/yoko2]

と入力していけば2列になります。

後は繰り返しつくるのみ

後はカテゴリごとに

  1. タイトル
  2. 箇条書きorカードタイプの記事一覧
  3. ボタン

といった感じで作っていけばぼくのようなトップページが完成します。

 

WordPressのSANGOテーマは有料ですが、カスタマイズはとても簡単でHTML&CSSをほとんど知らない人でもできるようになっています。

SANGOテーマを導入したばかりの方はぜひこのようにトップページをカスタマイズしてどんなサイトなのか、どんなカテゴリがあるのか分かりやすくしてみてください。
参考 SANGOカスタマイズガイドSANGO ここにカスタマイズ方法のほとんどが載っているので、参考にしてください。

ぼくのつかっているSANGOテーマはこちら。

 

現在のブログデータ

当ブログではWordPressで運営しています。

を使用しています。

ASPは、

を使用しています。

特にもしもアフィリエイトは、楽天やAmazonの商品を紹介するのによく使用しています。

 

これから始めるブログ初心者に参考になれば幸いです。

最後まで見ていただき、ありがとうございました。

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)