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

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

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

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

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

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

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

Lightning Varietyの設定

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

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

Lightning Variety

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

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

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

Lightning Variety

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

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

Lightning Variety

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

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

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

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

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

Lightning Variety

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

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

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

今回利用するWordPressのテーマ「Lightning」は、Bootstrapのバージョン3を利用しているので、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>

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

Lightning Variety

PCで表示した結果がこちら

Lightning Variety

スマートフォンだと自動的にこんな表示になります。

Lightning Variety

これでトップページのナビゲーションはいけそうなので、次は記事の作成をしていきます。

まとめ

WordPressにLightingというテーマとVarietyという有償カスタムスキンを使ってミニサイトで一番重要なトップページのナビゲーション部分を作るめどがつきました。

記事一覧は既に作成しているので、次のステップとしては投稿(POST)で各記事のタイトルだけを作成し、トップページのナビゲーションを完成させる予定です。

↓ 現在作成中のミニサイト
蛍光灯LED化.net

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

↓ WordPressの無料テーマ「Lightning」
Lightning

↓ 和田亜希子さんのミニサイトについての書籍

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク