拡張デザインスキン Charm

WordPress公式無料テーマ「Lightning」用の拡張デザインスキン「Charm」プラグインです。本プラグインをインストール・有効化する事により、Lightning のデザインスキン設定プルダウンより「Charm」が選択出来るようになります。

※デモサイトのスライドショー・サムネイル画像は本プラグインには含まれていません。

Lightning Skin Charm デモサイトを見る

特徴

「Charm」は、エレガントで柔らかな印象のデザインが特徴です。テーマ全体のフォントに「游ゴシック体」を適用し、アニメーションにはフェードやふんわりとした動きを採用しています。

ヘアサロン・エステサロン・ウェディングなど女性をターゲットとするようなサイトにオススメです。

拡張デザインスキン Charm demo サイト

拡張デザインスキン Charm demo サイト

サイトの印象を大きく変えられるよう、コンテンツ部分の背景を管理画面から自由に変更できるようになっておりオリジナリティのあるサイト制作が可能です。

Lightning と同時のご利用をオススメしている「VK All in One Expansion Unit」の「サムネイル付きの最新記事一覧 – VK Recent Posts」ウィジェットをトップページコンテンツエリアでご使用いただくと、サムネイルを大きく表示できギャラリーのようにみせることができます。

Ex-unit のウィジェット機能を使うと大きなサムネイル表示

Ex-unit のウィジェット機能を使うと大きなサムネイル表示

その他に、トップページスライドショーのアニメーションをフェードアニメーションに変更・ページヘッダーの背景画像を自由に変更する、ヘッダーに管理画面で設定した「キャッチフレーズ」を表示する機能があります。

商用サイトにかかせない Google Map / サムネイル付ギャラリーを簡単に表示

Google Map の埋込が簡単に

Google Map の埋込が簡単に

ショートコード機能をつかって、投稿記事・固定ページ内へ Google Map、サムネイル付きのギャラリーを簡単に表示できます。

サムネイル付ギャラリーを表示

サムネイル付ギャラリーを表示

Google Map ショートコードはトップページのウィジェットエリアでも使用でき、トップページでお店の場所をわかりやすく伝えることが可能です。

トップページウィジェットでマップを表示

トップページウィジェットでマップを表示

使い方

  1. ダウンロードしたファイルをWordPressのプラグインフォルダにアップロードしていただくか、管理画面の「プラグイン」→「新規追加」→ プラグインのアップロード よりzipファイルをアップロードします。
  2. 管理画面の「プラグイン」より「Lightning Skin Charm」の有効化をクリックします。
  3. 有効化すると「管理画面 > 外観 > カスタマイズ > Lightning デザイン設定」のデザインスキンの項目にて「Charm Skin」を選択します。

Lightning Charm デザイン設定

「管理画面 > 外観 > カスタマイズ > Lightning Charm デザイン設定」から、以下の設定が可能です。

1. トップページスライドショーのアニメーション変更

チェックを入れるとトップページスライドショーのアニメーションをフェードエフェクトに変更できます。

トップページスライドショーのアニメーション変更

トップページスライドショーのアニメーション変更

2. ディスクリプション表示

チェックを入れるとヘッダーのロゴ上部に、管理画面「設定 > 一般設定 > キャッチフレーズ」に登録されているディスクリプションテキストが表示されます。(PC表示のみ)

ディスクリプションをヘッダーへ表示

ディスクリプションをヘッダーへ表示

3. コンテンツ背景色

コンテンツ部分の背景色をカラーピッカーで選択&変更できます。

コンテンツ背景色の設定

コンテンツ背景色の設定

4. コンテンツ背景テクスチャ

コンテンツ部分の背景にあらかじめ用意しているテクスチャ画像からお好みのものを設定できます。

コンテンツ背景テクスチャの設定

コンテンツ背景テクスチャの設定

ご用意しているテクスチャは、木目 / ストライプ 縦 / ストライプ 横 / ダマスク / ダマスク(反転) / ドット / ドット(反転)です。木目以外のテクスチャはコンテンツ背景色と組み合わせてご使用いただけます。

5. コンテンツオリジナル背景画像

コンテンツ背景にオリジナルの背景画像をご使用いただくことが可能です。ご用意しているテクスチャでイメージに会わない場合はこちらからお好みの画像をアップロードしてご利用下さい。

オリジナル背景画像の設定

オリジナル背景画像の設定

画像を繰り返しリピートして表示したい場合は「オリジナル背景画像リピート」にチェックを入れて下さい。

6. オリジナル背景画像サイズ

オリジナル背景画像を「画面の横幅いっぱいに表示」または「画面縦のサイズに合わせて表示」に変更することができます。シームレスなパターン素材などを使わず大きい画像をオリジナル背景画像に設定された場合などに便利です。

背景画像の表示サイズを設定

背景画像の表示サイズを設定

7. ページヘッダー画像

フロントページ以外で表示されるヘッダーの背景画像を設定できます。デスクトップ用とスマートフォン用の画像を設定可能です。フロントページ以外の全てのページでこの設定の画像が有効になります。

ページヘッダー画像設定

ページヘッダー画像設定

Lightning Charm ショートコード設定

ギャラリーショートコード設定

「管理画面 > 外観 > カスタマイズ > Lightning Charm ショートコード設定」からギャラリーショートコードの設定をします。

ギャラリーショートコード設定

ギャラリーショートコード設定

  1. 「ギャラリーショートコードを有効化」にチェックを入れ機能を有効化します。
  2. メイン画像の高さを px の単位で設定します。
    デフォルトの値はPCレイアウト時に 370 px程度の高さです。デフォルト値より変更したい場合はそのサイズをpx値で入力して下さい。
  3. サムネイルの位置をメイン画像の上下どちらに配置するか選択できます。デフォルトではメイン画像下に表示されます。
  4. 表示するサムネイルの枚数を3〜6枚の間で設定できます。スマートフォン時の表示枚数は3枚です。

以上でギャラリーショートコード設定は終了です。

ギャラリーショートコードを入力してギャラリーを作る

  1. 投稿または固定ページへ、「メディアを追加」から画像を挿入します。挿入する際に「配置 / リンク先」は「なし」にして下さい。(入力があっても無効になります)

    ギャラリーにしたい画像を挿入する

    ギャラリーにしたい画像を挿入する

  2. ギャラリーとして表示したい画像を [charm-gallery][/charm-gallery] というショートコードではさみます。
    ショートコードを入力

    ショートコードを入力

    これでショートコードではさみ込んだ画像がサムネイル付きのギャラリーとして表示されます。ギャラリーは1ページに複数設置可能です。

■ ギャラリーを表示しているサンプルページを見る

ギャラリーの設定を個別に行う

ギャラリーは複数設置可能です。各ギャラリーショートコードにオプション値を記入することで、ギャラリーごとに サムネイルの位置 / メイン画像の高さ / サムネイルの表示枚数 を設定することができます。(管理画面での設定よりもショートコードに記入した設定が優先されます)

サムネイルの位置を個別に設定する

サムネイルの位置をメイン画像上か下のどちらかを設定するには、以下のようにショートコードを記入します。

サムネイルを上に表示する

thumb_pos=”before” というオプション値をショートコードへ記入し、画像をはさみ込みます。

[charm-gallery thumb_pos="before"][/charm-gallery]

before

[charm-gallery thumb_pos=”before”][/charm-gallery] 設定表示例

サムネイルを下に表示する

thumb_pos=”after” というオプション値をショートコードへ記入し、画像をはさみ込みます。

[charm-gallery thumb_pos="after"][/charm-gallery]

after

[charm-gallery thumb_pos=”after”][/charm-gallery] 設定表示例

メイン画像の高さを個別に設定する

メイン画像の高さを各ギャラリーごとに設定したい場合は、main_height=”設定したい高さ” というオプション値をショードコードに記入します。

画像の高さが 425 px でその高さを設定する場合以下のように記入し、画像をはさみ込みます。

[charm-gallery main_height="425"][/charm-gallery]

[charm-gallery main_height="425"][/charm-gallery] 表示例

[charm-gallery main_height=”425″][/charm-gallery] 設定表示例

サムネイルの表示枚数を個別に設定する

表示するサムネイルの枚数を個別に変更する場合は、max_slide=”表示枚数” というオプション値をショートコードに記入します。3〜6までの数値が設定できます。

[charm-gallery max_slide="3"][/charm-gallery]

[charm-gallery max_slide="3"][/charm-gallery] 表示例

[charm-gallery max_slide=”3″][/charm-gallery] 設定表示例

ギャラリーショートコード設定サンプルを見る

Google Mapショードコード設定

「管理画面 > 外観 > カスタマイズ > Lightning Charm ショートコード設定」からGoogle Mapショードコードの設定をします。

Google Map ショートコード設定

Google Map ショートコード設定

  1. 「Google Map ショードコードを有効化」にチェックを入れ機能を有効化します。
  2. Google Map ショードコードをトップページのウィジェットエリアで使用したい場合はチェックを入れます。
  3. Google Map APIキーを入力して下さい。Google Map APIキーの入力がないと Map の表示ができません。Google Map APIキーの取得方法はこちら「Google Map APIキーの取得方法」の項目をご覧ください。
  4. 「Map 緯度」「Map 経度」で表示したい地図の緯度・経度を入力して下さい。地図の経度緯度を調べるにはこちらのサイト「Geocoding – 住所から緯度経度を検索」が便利です。
  5. 「拡大比率」を10〜20の間で設定できます。一般的に 15 付近の比率で表示しているサイトが多いです。
  6. サイトのデザインに合ったオリジナル画像のピンを「目的地ピン画像」から設定できます。設定がない場合は Google Map 標準のピンを表示します。
    「目的地ピンのタイトル」に目的地名を入力していただくと、ピンをマウスオーバー時にそのテキストを表示します。
  7. Google Map を表示する高さを PC 時 / スマートフォン時 それぞれ入力して下さい。

以上で Google Map ショートコード設定は終了です。

Google Map を表示する

投稿または固定ページのマップを表示したい箇所へ、 [charm-gmap] とショートコードを入力して下さい。これで管理画面で設定した Google Map が表示されます。

Google Map ショートコードを入力

Google Map ショートコードを入力

■Google Map を表示しているサンプルページを見る

Google Map ショートコードをトップページウィジェットエリアで使用する

Charm の Google Map ショートコードは WordPress のデフォルトで登録されている「テキスト」ウィジェット内で使用できるようになっています。

テキストウィジェット

「管理画面 > 外観 > カスタマイズ > Lightning Charm ショートコード設定」で「Google Map ショードコードをトップページウィジェットで有効化」にチェックを入れた後、

「外観 > ウィジェット」でトップページコンテンツエリア上部などへ「テキスト」ウィジェットをドラッグ&ドロップし、[charm-gmap] とショートコードを入力して下さい。

ウィジェットでショートコードを実行

ウィジェットでショートコードを実行

これで Google Map がご希望の位置へ表示されます。

Google Map の設定を個別に行う

Google Map は複数設置可能です。各 Google Map ショートコードにオプション値を記入することで、Map ごとに Map 位置(経度緯度の設定) / 拡大比率 / 目的地ピン画像 / ピンのタイトル を設定することができます。(管理画面での設定よりもショートコードに記入した設定が優先されます)

Google Map を複数設置する

Google Map を1つのページに複数設置したり、違う目的地の Map を複数設置することができます。

複数設置する場合には、ショートコード毎に id=”id名” というオプション値をショートコードに記入する必要があります。

[charm-gmap id="map1"]

id 名は任意のもので結構ですが、ユニーク(サイト内で一意の)な半角英数字のものを記入して下さい。(例:map_meiekitenn / map_sakaetenn / map1 / map2 等)

複数設置した Google Map にそれぞれ違う Map を表示する

それぞれ違う Map を表示するには先の項目での id 設定に加え、目的地の経度と緯度を lat=”経度” long=”緯度” というオプション値で個別に設定する必要があります。

[charm-gmap id="map1" lat="35.172364" long="136.908309"]

[charm-gmap id="map1" lat="35.172364" long="136.908309"] 表示例

[charm-gmap id=”map1″ lat=”35.172364″ long=”136.908309″] 設定表示例

[charm-gmap id="map2" lat="35.184482" long="136.897654"]

[charm-gmap id="map1" lat="35.172364" long="136.908309"] 表示例

[charm-gmap id=”map2″ lat=”35.184482″ long=”136.897654″] 設定表示例

■ Google Map を複数設置のサンプル表示を見る

拡大比率を個別に設定する

拡大比率を各 Map ごとに設定したい場合は、zoom=”拡大比率” というオプション値をショートコードに記入します。

1つの Map だけ大きく拡大した Map を表示したくて拡大比率を20に設定する場合は以下のように記入します。

[charm-gmap id="map3" zoom="20"]

[charm-gmap id="map3" zoom="20"] 表示例 [charm-gmap id=”map3″ zoom=”20″] 設定表示例[/caption]

目的地ピン画像を個別に設定する

目的地のピン画像を各 Map ごとに設定したい場合は、pin_image=”画像がアップロードされている位置へのパス” というオプション値をショートコードに記入します。

あらかじめ、画像アップローダーでピンの画像を以下のアドレスへアップロードしてあるとします。
http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin534363.png

[charm-gmap id="map4" pin_image="http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin534363.png"]

[charm-gmap id="map4" pin_image="http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin534363.png"] 表示例

[charm-gmap id=”map4″ pin_image=”http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin534363.png”] 設定表示例

目的地ピンタイトルを個別に設定する

目的地のピンタイトルを各 Map ごとに設定したい場合は、pin_title=”タイトルテキスト” というオプション値をショートコードに記入します。

ピンタイトルを「名古屋駅」を変えたい場合は以下のように記入します。

[charm-gmap id="map5" pin_title="名古屋駅"]

[charm-gmap id="map5" pin_title="名古屋駅"] 表示例 [charm-gmap id=”map5″ pin_title=”名古屋駅”] 設定表示例[/caption]

■ Google Map ショートコード設置のサンプルを見る


注意事項

対応アプリケーション WordPress 4.5.3 以降 / Lightning 2.3.0 以降
対応ブラウザ 下記ブラウザ最新版及びIE11
* Chrome
* Safari
* Firefox
* Eddge
テーマカスタマイザーより変更可能なCharm固有の項目 トップページスライドショーのアニメーション変更 / コンテンツ背景色設定 / コンテンツ背景テクスチャ設定 / コンテンツオリジナル背景画像設定 / オリジナル背景画像サイズ設定 / ページヘッダー画像設定
ライセンス  GNU General Public License version 2
※一つのプラグインの購入で複数のサイトにご利用いただけます。
販売価格 販売価格 6,980円(税込)

※楽天ID決済でご購入のお客様はメールアドレスが取得できませんので、将来的に商品アップデート通知やアップデートデータを受け取れなくなる可能性があります。DLmarketの都合上、楽天ID決済を使えなくする事が出来ないので、楽天ID決済をご利用の方は、上記についてご理解の上ご購入ください。


DL-MARKETで購入


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

更新履歴

Version リリース 変更箇所
2.1.0 2017.9.21 デザイン調整
Lightning Advanced Unit で新規追加された LTG 全幅見出しウィジェット に対応するCSS調整
2.0.4 2017.06.07 バグ修正
トップページメインビジュアル(スライドショー)について特定の画面サイズ領域において左右が非表示になる不具合を修正
2.0.3 2017.05.31 仕様変更
今までトップページメインビジュアル(スライドショー)について端末の画面サイズが狭い場合には両端15%を非表示にする仕様としていましたが、「勝手に切れる」という意見が多かったため、この仕様を廃止し、登録した画像がそのまま表示されるようになりました。
その替わりにLightning 3.1.0ではモバイル用の画像が「外観 > カスタマイズ > Lightning トップページスライドショー」より別途設定出来るようになっています。
2.0.2 2017.04.27 バグ修正
特定のサーバー環境において、フロントページ以外のヘッダー画像が反映されない不具合を修正
1.1.2 2016.09.28 バグ修正
ウィジェット LTG コンテンツエリア投稿リストを使用した場合にタイトル装飾にキーカラーが適用されないバグを修正
1.1.1 2016.09.24 バグ修正
ギャラリーショードコードでサムネイル表示枚数が変更できないバグを修正
1.1.0 2016.09.23 機能追加
ヘッダーにディスクリプションを表示 / ギャラリーを表示するショートコード / GoogleMap を表示するショートコード機能を追加
1.0.3 2016.09.18 バグ修正
PC表示時にフッターメニューが横並びにならないバグを修正。
1.0.2 2016.09.07 バグ修正
Lightning デザイン設定の「投稿詳細ページで最終更新日を表示しない」「投稿詳細ページで投稿者名を表示しない」が反映されないバグを修正。
1.0.1 2016.09.06 機能追加
Lightning専用拡張プラグイン「Lightning Advanced Unit」デザイン設定、メニュータイプ / メニューボタンの位置 / サイドバーの位置 の機能に対応しました。
1.0.0 2016.08.12 初版リリース

Google Map APIキーの取得方法

こちらのページ「ウェブ向け Google Maps API  |  Google Developers」へアクセスし「キーを取得」ボタンをクリックします。

「キーを取得」ボタンをクリック

取得手順が表示されます。そのまま「続ける」をクリックします。

取得手順が表示

「プロジェクトを作成」を選択した状態で「続行」をクリックします。

「プロジェクトを作成」を選択

認証画面へ移りますので、まず「名前」を入力します。

認証画面

キー制限で「HTTPリファラー」にチェックを入れるとドメインの設定項目が表示されますので、マップを表示したいサイトのドメインを 「※.サイトのドメイン.com/※」 のように入力し、「作成」をクリックします。

※実際の入力はすべて半角英数字で行なって下さい。

APIキーが表示

APIキーが表示されます。このコードをコピー&ペーストしてご利用下さい。

VK All in One Expansion Unit

WordPressでウェブサイトを構築する時に毎回沢山のプラグインをインストール・更新するのが手間ではありませんか?
また、気に入ってたテーマの機能があるけれど、テーマを変更するとその機能が使えなくなるからテーマを変更出来ないといった事はないですか?

VK All in One Expansion Unit は最近のウェブサイトに求められる様々な機能を実装した多機能統合型プラグインです。

もちろんプラグインなので、テーマ(デザイン)を何にするかはあなたの自由です。