Lightningをカスタマイズする

Lightningのトップページカスタマイズ

Lightning

Lightningのトップページをカスタマイズするのは、外観のカスタマイズを編集するという方法ともう1つは、ウィジェットを使う方法の2つがあります。

実は、もっと高度な方法もあるのですが・・・

素人の方には、ちょっと難しい方法でもあります。

先に2つの方法を記載しておきます。

 

Lightningトップページ編集

Lightningのスライダーから下の部分をキャプチャーしてみました。

それぞれのブロックごとに分かりやすく番号入れています。

  1. PR Block
  2. 3PR Block
  3. 動画ウィジェット

上記の順番で説明します。

?1.PR Blockの編集

まず、管理画面の左側メニューの外観→カスタマイズを開きます。

PR Block

赤枠のLightningトップページPR Blockをクリックして開きます。

 

PR Block編集

PR Blockの編集画面開きました。

まず、1番目このセクション必要ない方はこの①のチェックを外してください。

それでこのユニットが非表示になります。

必要ない方は、これで終わりです。

初期設定では、表示する設定になってます。

次の②は、3つあるうちの一番左側の設定です。

このアイコン表示には、Font Awesomeのアイコンフォントというものを利用して表示しています。

お気に入りのアイコンがあればいいのですが・・・

今は、バージョンが4.7になっていますが新しいのは5.0というのがあります。

まずは、見てみましょう。

PR Blockアイコンの設定

左の設定が反映されて矢印の先のところに表示されるようになってます。

では左側の赤枠のicon listをクリックしてください。

 

Font Awesome

クリックされると新しいタブで上記のFont Awesomeのサイトが開きます。

少しスクロールしてください。

 

Font Awesome Icon

いろんなアイコンがあります。

検索ボックスで検索するとキーワードにヒットしたアイコンだけ表示されます。

1つアイコンを選んで開いてみます。

 

Font Awesome Icon

上記画像の赤枠の部分だけをコピペします。

それだけで簡単にアイコンが変更されています。

どうですか?

変わっていますか?

後は、タイトル・サブテキスト・URL設定をするだけです。

それを3回やるとPR Blockの設定が完了します。


2.3PR Block

まず、管理画面の左側メニューの外観→カスタマイズを開きます。

カスタマイズ

開くと左のメニューでウィジェットを選択します。

他にも外観→ウィジェットで追加する方法もありますが、こちらの方がわかりやすく確実なのでこちらでのやり方をおすすめします。

 

トップページコンテンツエリア

ウィジェットを開くとどのウィジェットを編集するのか選択できます。

ここでトップページコンテンツエリア上部を選択してクリックします。

 

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

上の画像では2つありますが、作成したばかりの時は何もありません。

そこで下にある赤枠の「ウィジェットを追加」をクリックします。

 

ウィジェットを追加する

右に追加できるウィジェットが出てきました。

この中から選択して追加します。

VK3PRエリアをクリックすると同じように追加できます。

数を増やしたい場合も連続して同じ操作で追記できます。

 

3PRコンテンツ追加

では、コンテンツを追加していきます。

1から3までありますが、左から123と順番に反映していきます。

タイトルや画像・説明文やリンクさせるアドレスなどが追加できます。

スマホ用に別に画像がある場合には追加できます。

3PR追加

上の画像では、画像とタイトルを追加できます。

左の画像では、スマホ用画像や説明文・リンク先などが追加できます。

これが、1つのブロックの流れです。

これが3つあるので3PRブロックなのです。

いかがですか?

追加できましたか?

 


3.動画ウィジェット

まず、管理画面の左側メニューの外観→カスタマイズを開きます。
先ほどと同じようにウィジェットを開くとどのウィジェットを編集するのか選択できます。

ここでトップページコンテンツエリア上部を選択してクリックします。

動画ウィジェット追加

ここでは、WordPress内に動画がなくてもYouTubeやFC2・Vimeoなどの動画サイトからリンクさせることも可能です。

 

動画の追加

では、赤枠の部分をクリックして動画を追加します。

 

動画の追加

YouTubeなどの場合は、左のURLから挿入をクリック

動画を直接アップロードする場合は、画像のようにドラッグ&ドロップしてください。

 

URLをコピペ

YouTubeやFC2動画などから呼び出す場合は、赤枠のところにURLをコピペします。

YouTubeアドレスのコピー

赤枠で囲んだアドレスどちらでもいいのですが・・・

できればリンクの共有のアドレス使う方がいいです。

こちらをコピーして先ほどの部分に貼り付けします。

これで動画がトップページに表示されますよ。


今回は、代表的な部分だけ紹介しましたが他にも表示できるウィジェットがあるのでうまく使ってください。

以上、トップページの編集について書かせていただきました。

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ

フォローお願いします!