初心者が読むべき500のノウハウ記事のまとめ

【SANGOトップページカスタマイズの補足】みやちまんさんのカスタマイズをベースにHTMLやCSS初心者レベルの私がやってみた件

この記事はこんな人におすすめ
  • SANGOユーザーの人
  • ブログの回遊性をアップさせたい人
  • PVを増やしたい人
  • コンテンツが増えすぎたので整理したい人

こんにちは!
アフィリエイトの超ノウハウコレクターごま吉(@Lv1gomakichi)です。

おかげさまで2019年3月より更新を続けていた当ブログも200記事を達成!
更新6ヶ月でノウハウも貯まり、ブログのデザインも随分変化しました。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

特にトップページ、カテゴリページを変えました

今後は、ブログからサイトっぽく運用を変えていこうと思いカスタムを模索している最中です。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

保存が効くブログ 永く使われるブログを目指して

目標にしてるのは、マクリンさん(@Maku_ring)のブログで「いつかこんなカスタマイズしたいなぁ」とネットサーフィンしてたところ、7桁専業アフィリエイターのみやちまんさん(@masa381)の無料noteに出会い、トレースしつつ自分流にアレンジを入れてみました。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

その後、この部分「どうやったの?」っていう質問が多く来ましたww

本記事では、みやちまんさんカスタマイズを、HTML・CSS初心者の私なりの解説とアレンジを加え紹介したいと思います。

間違っている点等多々あるとは思いますが、とりあえず形になったという視点でご覧頂ければと思います。

あと、サクッとは・・できません。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

私は2日間くらいかかりました

では、どうぞー

みやちまんさんのカスタマイズをベースにHTMLやCSS初心者レベルの私がやってみた

基本は、みやちまんさん無料noteを見て実践するだけです。それだけでカスタマイズできます。

【無料】7桁専業のみやちまんさんのnoteを拝読した。マクリンブログのようなトップページを実現するカスタマイズ方法【SANGO限定】

記事中説明もされていますが、固定ページをTOPページにする方法で作成します。当ブログは固定ページを以下のように設定しました。

マニュアル通りに固定ページを新規で作って、そこにソースを入れていきます。

固定ページの構成を

  1. TOP最上部にスライドバナー(プラグイン)
  2. マニュアルをベースにしたHTMLソース

この2つの構成にしました。
※タイトル名は表示されないので管理しやすいように「top-custom」にしてます。

画像のスライドバナーを表示できるプラグイン『Meta slider』

最上部のバナーはMeta sliderというプラグインで動かしています。
※まんだむさん(@RYUSEI_d7)ヒントをありがとうございます。

こちらのプラグインは、設定が超簡単ですのでぜひ入れてみてください。
スマホなどレスポンシブの対応も自動的にやってくれます。

公式Meta slider

インストールにあたり参考にさせて頂いた記事はこちらです。

参考 画像のスライドショー(スライダー)を作成・表示できるプラグイン

参考 【SANGOカスタマイズ】画像スライダーの実装

ちなみに作成したスライドは、グーテンベルグではこんな感じでブロックにメニュー追加されますので、こちらをクリックしてガイドに従って進めていきましょう。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

バナーサイズは、W700*H300で作りました

新着記事部分

新着部分については下記のソースになります。

<h3 class="top-title"><span class="zero"><i class="fa fa-rss"></i>  新着記事</span></h3>
<div class="catpost-cards flex flex-wrap space-between">
<p>【評価】WordPress5.3アプデ【グーテンベルグ変更箇所まとめ】:for men</p>
</div>
<p></p>

タイトル部分①について
アイコンを変えたい場合は、“fa fa-rss”の中身を変えてやればOKです。
アイコンはFontAwesomeで見つけましょう。
公式FontAwesome

新着記事数②について
当ブログでは、新着記事の表示を2つにしています。
2つ以上に変更したい場合は、num=”2″の数字を変えましょう。

全記事一覧③について
全記事一覧のリンクは/archives_all/と入れてやればOKです。

人気記事部分

このブロックは、特にフォーカスしたいコンテンツを持ってくるといいと思います。カテゴリへの動線でもOKですし、記事単体への動線でもOKです。

当ブログの場合は、まとめ記事の人気が高いので、いくつかピックアップして常時表示するようにしています。

<h3 class="top-title"><span class="zero"><i class="fa fa-bar-chart"></i> まとめ記事</span></h3>

<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/07/19/kijikousei201907/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/07/Vannverk-Water-Supplies-17-520x300.png" alt="記事構成お手本7選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">まとめ『記事構成のお手本』7選</h2>
</div></a></article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/06/25/keyword-select201906/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/06/Vannverk-Water-Supplies-59-520x300.png" alt="まとめ『稼げるキーワードの探し方』7選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">まとめ『稼げるキーワードの探し方』7選</h2></div>
</a></article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/06/03/201906-afi-kasegikata/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/06/Vannverk-Water-Supplies-32-520x300.png" alt="まとめ『ブログの稼ぎ方』7選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">まとめ『ブログの稼ぎ方』7選</h2></div>
</a></article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/05/10/continue201905/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/05/Vannverk-Water-Supplies-81-520x300.png" alt="まとめ『ブログの続け方』記事6選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;">まとめ『ブログの続け方』6選
</h2></div></a></article></div>

タイトル部分①について
アイコンを変えたい場合は、“fa fa-bar-chart”の中身を変えてやればOKです。
アイコンはFontAwesomeで見つけましょう。
公式FontAwesome

ピックアップ記事部分②について
同じソースブロックが4つ並んでいるだけなので基本的には、同様に修正します。アンダーライン部分にリンク先のURLを入力します。
また画像の入れ替えについては、みやちまんさんの記事のとおりに変更します。

注意画像ファイルの末尾に520×300と表記を足して、サムネイル画像を表示するようにします。

カテゴリへのリンク③について
カテゴリへのリンクは、アンダーライン部分を変更します。
アクセスさせたいカテゴリへリンクを貼りましょう。

ガテゴリがバラバラな場合

当ブログの場合は、人気記事はカテゴリを横断していて統一したカテゴリではないため、タグでひとまとめにしています。
例)タグまとめ記事

作り方のコツ私は一旦アタリ画像を作って全部ハメてみて、一箇所一箇所プレビューチェックしながら進めました。

おすすめカテゴリ部分

おすすめと題して、おすすめのカテゴリへの動線を作っています。


<h3 class="top-title"><span class="zero"><i class="fas fa-heart"></i> 初心者におすすめ</span></h3>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/blog/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/hajimekata-520x300.png" alt="アフィリエイトブログの始め方" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの始め方</h2>
			</div>
</a>
</article>
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/seo/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/seo-c-520x300.png" alt="SEO(検索エンジン対策)" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">SEO(検索エンジン対策)</h2>
			</div>
</a>
</article>
	
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/custom/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/tukurikata-520x300.png" alt="アフィリエイトブログの作り方" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの作り方</h2>
			</div>
</a>
</article>

<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/income-up/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/kasegikata-520x300.png" alt="アフィリエイトブログの『稼ぎ方』" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの『稼ぎ方』</h2>
			</div>
</a>
</article>
	
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/affiron/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/tudukekata-520x300.png" alt="アフィリエイトブログの続け方" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの続け方</h2>
			</div>
</a>
</article>
	
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/tag/special/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/gomakiji-c-520x300.png" alt="【初心者向け記事】特集(ごま記事)" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">【初心者向け特集記事】ごま記事</h2>
			</div>
</a>
</article>
	
</div>

ソースの基本的な作りは人気記事部分と同じです。
飛び先のカテゴリページのURLと画像のURLを設定するだけです。

ちなみにジャンプ先のカテゴリの作り込みは、その先へ遷移させる重要な役割を持っていますのでしっかり作り込みましょう。

作り込み方法は、下記で詳しく解説しています。

【ワードプレスSANGOのカスタマイズ】詳細なカテゴリページの作り方。ユーザーの回遊性とSEO効果を狙う件

画像の制作は、canvaを使っています。
イラスト画像をお探しの方は、こちらのページもご参考ください。
画像サイズは、520*300pxで作りました。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

基本的には主力カテゴリを入れてます

その他のピックアップ部分

主力カテゴリ以外にも、タグでまとめている記事群でフォーカスさせたいものを紹介しています。

ソースについては、基本的に上記おすすめと同じように設定します。


<h3 class="top-title"><span class="zero"><i class="fas fa-tags"></i> シーン別ノウハウ</span></h3>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/twitter/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/twitter-c-520x300.png" alt="Twitter活用方法のまとめ" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">Twitter活用方法のまとめ</h2>
			</div>
</a>
</article>
	
		
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/tag/adsense/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/AdSense-c-520x300.png" alt="アドセンスで合格・稼ぐ方法" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アドセンスで合格・稼ぐ方法</h2>
			</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/tag/note/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/note-c-520x300.png" alt="【厳選】おすすめnote" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">【厳選】おすすめnote</h2>
			</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/genreex/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/Genre-c-520x300.png" alt="アフィリエイト ジャンル実例" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイト【ジャンル実例】</h2>
			</div>
</a>
</article>
	
</div>

当ブログで固定ページへ入れているソース

当ブログで固定ページへ入力しているソースは以下です。
全く同じ構成で良ければ、みやちまんさんのnoteに記載してあるCSSに合わせてコピペして使えば、時間をショートカットできると思います。

<h3 class="top-title"><span class="zero"><i class="fa fa-rss"></i>  新着記事</span></h3>
<div class="catpost-cards flex flex-wrap space-between">
<p>【評価】WordPress5.3アプデ【グーテンベルグ変更箇所まとめ】:for men</p>
</div>
<p></p>





<h3 class="top-title"><span class="zero"><i class="fa fa-bar-chart"></i> まとめ記事</span></h3>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/07/19/kijikousei201907/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/07/Vannverk-Water-Supplies-17-520x300.png" alt="記事構成お手本7選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">まとめ『記事構成のお手本』7選</h2>
</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/06/25/keyword-select201906/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/06/Vannverk-Water-Supplies-59-520x300.png" alt="まとめ『稼げるキーワードの探し方』7選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">まとめ『稼げるキーワードの探し方』7選</h2></div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/06/03/201906-afi-kasegikata/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/06/Vannverk-Water-Supplies-32-520x300.png" alt="まとめ『ブログの稼ぎ方』7選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">まとめ『ブログの稼ぎ方』7選</h2></div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/2019/05/10/continue201905/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/05/Vannverk-Water-Supplies-81-520x300.png" alt="まとめ『ブログの続け方』記事6選" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;">まとめ『ブログの続け方』6選
</h2></div>
</a>
</article>
</div>








<h3 class="top-title"><span class="zero"><i class="fas fa-heart"></i> 初心者におすすめ</span></h3>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/blog/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/hajimekata-520x300.png" alt="アフィリエイトブログの始め方" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの始め方</h2>
			</div>
</a>
</article>
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/seo/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/seo-c-520x300.png" alt="SEO(検索エンジン対策)" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">SEO(検索エンジン対策)</h2>
			</div>
</a>
</article>
	
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/custom/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/tukurikata-520x300.png" alt="アフィリエイトブログの作り方" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの作り方</h2>
			</div>
</a>
</article>

<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/income-up/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/kasegikata-520x300.png" alt="アフィリエイトブログの『稼ぎ方』" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの『稼ぎ方』</h2>
			</div>
</a>
</article>
	
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/affiron/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/tudukekata-520x300.png" alt="アフィリエイトブログの続け方" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイトブログの続け方</h2>
			</div>
</a>
</article>
	
	
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/tag/special/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/gomakiji-c-520x300.png" alt="【初心者向け記事】特集(ごま記事)" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">【初心者向け特集記事】ごま記事</h2>
			</div>
</a>
</article>
	
</div>



<h3 class="top-title"><span class="zero"><i class="fas fa-tags"></i> シーン別ノウハウ</span></h3>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/twitter/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/twitter-c-520x300.png" alt="Twitter活用方法のまとめ" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">Twitter活用方法のまとめ</h2>
			</div>
</a>
</article>
	
		
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/tag/adsense/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/AdSense-c-520x300.png" alt="アドセンスで合格・稼ぐ方法" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アドセンスで合格・稼ぐ方法</h2>
			</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/tag/note/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/note-c-520x300.png" alt="【厳選】おすすめnote" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">【厳選】おすすめnote</h2>
			</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="https://level99-beginner.com/category/genreex/">
<p class="cardtype__img"><img src="https://level99-beginner.com/wp-content/uploads/2019/08/Genre-c-520x300.png" alt="アフィリエイト ジャンル実例" class="alignnone size-thumb-520 wp-image-3370" width="520" height="300"></p>
<div class="cardtype__article-info">
<h2 style="text-align:center;margin-bottom:10px;">アフィリエイト【ジャンル実例】</h2>
			</div>
</a>
</article>
	
</div>

いかがだったでしょうか?

ちなみに、トップページを変更したことでブログの回遊性はかなり上がりました。また、この固定ページをTOPページにする方法は、SANGOのカスタマイザーではいじれない細かな部分を変更できるので、慣れたらとても運用しやすいスタイルだと思います。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

ちょっとしたバナー貼ったりとか楽ww

トップページはブログの『顔』になります。
直接アクセス数には響かないかもしれませんが、回遊性には大きく影響するのでPV増やしたい人はぜひチャレンジしてみてください(´ε` )