ミニサイトで重要なトップページのナビゲーションにウィジェットを利用

WADA-blog（わだぶろぐ）の和田亜希子さんの「ミニサイトをつくって儲ける方法」という本を読みながら、「蛍光灯LED化.net」というサイトを作り自分の売上向上を目指すべく活動しています。

ほったらかしでも月10万円! ミニサイトをつくって儲ける法

posted with カエレバ

和田亜希子日本実業出版社 2016-09-29

Amazon

楽天市場

前回は「WEBサイト構築プラン」を作成したので、その後１週間で記事の一覧を作成。今回はWordPressにLightingというフリーのテーマとVarietyという有料のカスタムスキンを使ってサイトの大枠を作っていきたいと思います。

記事の作成は一番時間がかかるところなので、まずは全体のナビゲーションと記事の題名、カテゴリを作成し、全体の枠をつくってから、ディテールを詰めていく予定です。

↓　有料カスタムスキン「Lightning Variety」（税込み7980円です。2016/10現在）
Lightning Variety

↓　WordPressのテーマ「Lightning」は無料で利用できます。
Lightning

前回の記事
売上を達成する為に和田亜希子さんの本でミニサイトを作ることにした！

Lightning Varietyの設定

ミニサイトとしてつくりたいのでトップページはサイトに訪れた人が目的のページへすぐにたどり着けるように、固定ページを使って目次的なナビゲーションをつくります。

フロントページは固定ページの「トップページ」を選択

トップページにする固定ページをつくり、WordPressの管理画面にて設定＞表示設定、ここにある「フロントページの表示」から「固定ページ」を選択。

その下にあるフロントページには、先程作った「トップページ」という固定ページを設定します。

テンプレートはNo sidebar(ノーサイドバー）

「トップページ」ですが、目次的な内容がよりわかりやすく大きく表示できるように、サイドページを表示しない「No sidebar」というテンプレートを選びます。

目次を表示するウィジェットを設定

Lightning Varietyはトップページで設定できるウィジェットが

トップページコンテンツエリア上部
トップページコンテンツエリア左
トップページコンテンツエリア右
トップページコンテンツエリア下部

と４種類用意されています。

サイトを新しくつくった状態だと、サイドバー（トップページ）にウィジェットがあるのでこれを全部削除しました。また、トップページに来た人が目的のページに辿りつけるナビゲーションは、「トップページエリア上部」に表示したいと思います。

トップページのナビゲーション

トップページのナビゲーションは上図のように、大きくカテゴリを４つにわけその記事のリンクをブロックにして作ろうと考えています。

蛍光灯型番別LED化
ランプ長さ別LED化
LED化工事
蛍光灯をLED化する際に注意すること

ここについてはWordPressのカスタムメニューが使えるプラグインにしたいと思っていますがまずはベタ打ちですすめます。

今回利用するWordPressのテーマ「Lightning」は、Bootstrapのバージョン３を利用しているので、PCやタブレットの時とスマートフォンの時で表示を変更するには、下記のようなhtmlで記載します。

* Bootstrapとはサイトをつくる時のベースとなるようなものです。

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h3>蛍光灯型番別LED化</h3>
<ul>
<li><a href="#">蛍光灯型番確認方法</a></li>
<li><a href="#">FL(スターター式）</a></li>
<li><a href="#">FLR(ラピッド式）</a></li>
<li><a href="#">FHF(HF式）</a></li>
</ul>
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h3>ランプ長さ別LED化</h3>
<ul>
<li><a href="#">600mm</a></li>
<li><a href="#">1200mm</a></li>
<li><a href="#">2400mm</a></li>
</ul>
</div>

これを、「トップページコンテンツエリア上部」にテキストのウィジェットで設置します。