結果の出るコンテンツマーケティングサイトを簡単に構築

コーポレートサイトやブログを作成するのに無料でありながら圧倒的な機能と使いやすさを提供してきたWordPress公式ディレクトリ登録テーマ「Lightning」。そのLightningをコンテンツマーケティングやメディアサイトとして活用するためにデザインと機能を強化したのが有料の拡張デザインスキン「Variety(ヴァラエティ)」です。

デモサイト(トップページ)を見る

 

より結果を出しやすくするためにヘッダー上部を強化

ウェブサイトは存在しているだけでは意味がありません。ビジネスにおいてはあくまでも問い合わせなどのアクションを得る事が目的です。

そのためにヘッダー上部に電話番号問い合わせボタンを配置しました。

また、ユーザーがより使いやすくなるようにサブナビゲーションを配置する事が可能で、加えてPC閲覧時には画面左上にサイトのキャッチコピーも表示されるようになっています。

ヘッダーに問い合わせボタンや電話番号などを表示

ヘッダーに問い合わせボタンや電話番号などを表示

『お問い合わせボタン』と『電話番号』はカスタマイザーで設定します。

管理画面の『外観』→『カスタマイズ』からカスタマイザーを起動して、左のメニューに『Lightinng ヘッダー上部』というセクションが表示されるので、そこから問い合わせボタンに表示するテキスト/リンク先/電話番号を設定します。

更に、目的のページへの誘導を強化したり広告収入を増やすヘッダーバナーエリアも用意しています。

ヘッダーバナーの設定も『外観』→『カスタマイズ』からカスタマイザーを起動して、『Lightning ヘッダーバナー』から設定します。

ヘッダーバナー設定画面

ヘッダーバナー設定画面

バナーエリアには画像あるいはHTMLを指定する事ができます。HTMLを入力するテキストエリアにはGoogleAdsenseなどのコードを入力する事もできます。

バナー画像とHTMLの両方が登録されている場合は画像が優先して表示されるようになっています。

※スマートフォンなど画面サイズが狭い端末で閲覧している時はヘッダーバナーは表示されません。

記事本文が上部に表示されるレイアウト

Lightning ではコンテンツエリア上部に

  • ヘッダー直下のページタイトルエリア
  • パンくずリスト

が表示されますが、Varietyではコンテンツエリア上部の表示をなくし、より記事本文に注目できるようなデザインにしました。

グローバルメニューやページ見出しカラーを黒塗りかキーカラーに指定可能

サイトの全体のカラーを統一することで、統一感が出て見やすいサイトになります。

Variety ではグローバルメニューを任意で設定したキーカラーに設定できる仕様になっています。それに伴ってページ見出しのデザインも連動して変わるような設定にしています。

カスタマイザーから【 Lightning デザイン設定 】> 【 カラーテイスト 】で設定できます。

「カラーテイスト:濃い」の場合

「カラーテイスト:明るい」の場合

「カラーテイスト:明るい」の設定のときは、上で設定した「キーカラー」が反映されます。

ページの背景色が指定できる

ページの背景色が選択できます。

コンテンツエリアごとに白い背景を指定してあるので、ページの背景色を指定しても可読性が損なわないので安心です。

カスタマイザーを起動して【 色 】のセクションでカラーピッカーで任意の背景色が選択できます。

デザインスキンの設定

1. デザインスキン ( プラグイン ) をインストールする

管理画面からアップロードする場合

  • 「管理画面」→「プラグイン」→「新規追加」画面※1に移動します。
  • 「プラグインのインストール」画面でタイトル下の「アップロード」※2をクリック
「管理画面」→「プラグイン」→「新規追加」画面に移動、タイトル下の「アップロード」をクリック

「管理画面」→「プラグイン」→「新規追加」画面に移動、タイトル下の「アップロード」をクリック

  • 「ファイルを選択」ボタン※3をクリック。
  • アップロードするプラグインのファイルを選択※4して「開く」ボタン※5でアップロード

プラグインファイルを選択

アップロードするプラグインのファイルを選択して「開く」ボタンでアップロード

  • 「いますぐインストール」※6をクリック
「いますぐインストール」をクリック

「いますぐインストール」をクリック

  • 「プラグインを有効化」※7をクリックします。
「プラグインを有効化」をクリック。

「プラグインを有効化」をクリック。

FTPなどで直接アップロードする場合

公式サイトからダウンロードできるプラグインの他に、一般のサイトで公開されているプラグインも多数ありますので、それらを利用する場合は /wp-content/plugins/ フォルダにアップロードします。

  • /wp-content/plugins/ フォルダに、ダウンロードしたファイルを解凍してアップロード
  • 管理画面左メニューの「プラグイン」を開くと、インストールされているプラグインの一覧が表示されます。
    アップロードしたプラグインが含まれているはずですので、有効化をすると利用出来るようになります。

 

2. デザインスキン ( プラグイン ) を切り替える

ダッシュボードでプラグインを有効化したあとに、【外観】>【カスタマイズ】でカスタマイザーを起動します。

  1. 「Lightning デザイン設定」のセクションを開いてください。
  2. 「デザインスキン」のプルダウンに先程有効化したデザインスキンを選択します。
  3. 設定が完了したら「公開」ボタンを押して保存。
  4. 公開ボタンを押したらページを再読込してください。再読込しないとデザイン及びスキン固有の入力欄などが正しく表示されません。

注意事項

動作環境 WordPress 4.9 以降
PHP 5.6 以降
Lightning Pro
対応ブラウザ 下記ブラウザ最新版及びIE11
* Chrome
* Safari
* Firefox
* Eddge
ライセンス GNU General Public License version 2
※一つのプラグインの購入で複数のサイトにご利用いただけます。
販売価格

販売価格 4,980円(税抜)

Lightning Pro + Lightning Skin Variety セット 8,980円(税抜)

  • このスキンは Lightning Pro 専用です。別途 Lightning Pro が必要です。
  • Lightning Pro とセットで購入すると特別割引(2,980円OFF)が適用されます。
  • 無料版の Lightning に適用させてもデモサイトのレイアウトは実現できません。

このプラグインを購入 


※本拡張デザインスキンはテーマではなく『プラグイン』です。プラグインとしてインストールして下さい。プラグインのインストールについては「プラグインの説明と設定方法」をご参照下さい。

更新履歴

Variety Version リリース 動作確認済 Lightning 変更箇所
4.0.3  2018.09.27 Pro 0.1.0 [ 仕様変更 ] Lightning Pro 対応に伴う仕様変更
2.5.0  2018.06.01 4.4.11 [ 仕様変更 ] Font Awesome5 対応
2.4.1  2018.04.28 4.3.0 [ ファイル整理 ]
前回のアップデートファイル容量が2Mを越えており、管理画面からのアップデートでエラーになる場合があるため軽量化
[ デザイン調整 ]
トップページスライドショー上の文字サイズ調整
2.4.0  2018.04.24 4.2.0 [ 機能追加 ]
PR コンテンツウィジェット機能を追加
2.3.1 2018.04.10 4.1.5  [ 不具合修正 ] アーカイブページで Media Posts で指定した表示タイプが反映されない不具合を修正
2.3.0  2018.02.06 4.1.2 [ 仕様変更 ] Lighting 新モバイルメニューに対応する各種調整
2.2.0  2017.10.25 4.0.0 [ デザイン調整 ] Lightning 4.0.0 から実装されたスライドショー上のテキスト配置機能に伴うデザイン指定追加
[ デザイン調整 ] Lightning 4.0.0 で変更されたコンテンツエリアに出力されるウィジェットのマークアップ変更に伴う調整
[ デザイン調整 ] Media Post 表示のカテゴリーのラベルをピンカドから角丸に変更
2.1.0 2017.09.21 3.3.3 [ デザイン調整 ] Lightning Advanced Unit で追加された「LTG 全幅見出し」ウィジェット用デザイン調整
2.0.6 2017.05.31 3.1.0 [ 仕様変更 ] 今までトップページメインビジュアル(スライドショー)について端末の画面サイズが狭い場合には両端15%を非表示にする仕様としていましたが、「勝手に切れる」という意見が多かったため、この仕様を廃止し、登録した画像がそのまま表示されるようになりました。
その替わりにLightning 3.1.0ではモバイル用の画像が「外観 > カスタマイズ > Lightning トップページスライドショー」より別途設定出来るようになっています。
[ 不具合修正 ] iPhone Safariでスライドショーの登録されたトップページを閲覧した際に、スクロールの仕方によってはヘッダー部分が潰れてロゴが切れてしまう不具合を修正いたしました。
2.0.5 2017.04.13 3.0.2 [ 不具合修正 ] MediaPostsで「Vertical card 3 column」「Vertical card large image 3 column」レイアウト利用時に最下段が2つの時にレイアウトが左寄せにならない不具合を修正
2.0.4 2017.03.28 3.0.2 [ 不具合修正 ] Safariにて特定の画面サイズで閲覧時に Media Posts の Vertical card 3column のレイアウトが崩れる不具合を修正
[ 不具合修正 ] Safariにて特定の画面サイズで閲覧時に Media Posts の Vertical card 3column の高さが揃わない不具合を修正
2.0.1 2016.12.22 3.0.0 [ 不具合修正 ] カラーテイストを「濃い」にした状態でタブレット端末で閲覧した際にメニューのカラーが不自然に着色される不具合の修正
2.0.0 2016.12.16 3.0.0 [ 仕様変更 ] ヘッダーメニューの表示切り替えポイント変更に伴う修正
1.1.0 2016.10.20 2.7.5 * カラーテイスト変更機能追加
* カスタマイズ画面での挙動改善
* デザイン調整
1.0.0 2016.09.10   初版リリース



Lightning Variety

Lightningをコンテンツマーケティングやメディアサイトとして活用するためにデザインと機能を強化したのが有料の拡張デザインスキン「Variety(ヴァラエティ)」です。