Lightningをカスタマイズする
この記事を読むのに必要な時間は約 6 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
Lightningのトップページカスタマイズ
Lightningのトップページをカスタマイズするのは、外観のカスタマイズを編集するという方法ともう1つは、ウィジェットを使う方法の2つがあります。
実は、もっと高度な方法もあるのですが・・・
素人の方には、ちょっと難しい方法でもあります。
先に2つの方法を記載しておきます。
Lightningのスライダーから下の部分をキャプチャーしてみました。
それぞれのブロックごとに分かりやすく番号入れています。
上記の順番で説明します。
1.PR Blockの編集
まず、管理画面の左側メニューの外観→カスタマイズを開きます。
赤枠のLightningトップページPR Blockをクリックして開きます。
PR Blockの編集画面開きました。
まず、1番目このセクション必要ない方はこの①のチェックを外してください。
それでこのユニットが非表示になります。
必要ない方は、これで終わりです。
初期設定では、表示する設定になってます。
次の②は、3つあるうちの一番左側の設定です。
このアイコン表示には、Font Awesomeのアイコンフォントというものを利用して表示しています。
お気に入りのアイコンがあればいいのですが・・・
今は、バージョンが4.7になっていますが新しいのは5.0というのがあります。
まずは、見てみましょう。
左の設定が反映されて矢印の先のところに表示されるようになってます。
では左側の赤枠のicon listをクリックしてください。
クリックされると新しいタブで上記のFont Awesomeのサイトが開きます。
少しスクロールしてください。
いろんなアイコンがあります。
検索ボックスで検索するとキーワードにヒットしたアイコンだけ表示されます。
1つアイコンを選んで開いてみます。
上記画像の赤枠の部分だけをコピペします。
それだけで簡単にアイコンが変更されています。
どうですか?
変わっていますか?
後は、タイトル・サブテキスト・URL設定をするだけです。
それを3回やるとPR Blockの設定が完了します。
2.3PR Block
まず、管理画面の左側メニューの外観→カスタマイズを開きます。
開くと左のメニューでウィジェットを選択します。
他にも外観→ウィジェットで追加する方法もありますが、こちらの方がわかりやすく確実なのでこちらでのやり方をおすすめします。
ウィジェットを開くとどのウィジェットを編集するのか選択できます。
ここでトップページコンテンツエリア上部を選択してクリックします。
上の画像では2つありますが、作成したばかりの時は何もありません。
そこで下にある赤枠の「ウィジェットを追加」をクリックします。
右に追加できるウィジェットが出てきました。
この中から選択して追加します。
VK3PRエリアをクリックすると同じように追加できます。
数を増やしたい場合も連続して同じ操作で追記できます。
では、コンテンツを追加していきます。
1から3までありますが、左から123と順番に反映していきます。
タイトルや画像・説明文やリンクさせるアドレスなどが追加できます。
スマホ用に別に画像がある場合には追加できます。

左の画像では、スマホ用画像や説明文・リンク先などが追加できます。
これが、1つのブロックの流れです。
これが3つあるので3PRブロックなのです。
いかがですか?
追加できましたか?
3.動画ウィジェット
まず、管理画面の左側メニューの外観→カスタマイズを開きます。
先ほどと同じようにウィジェットを開くとどのウィジェットを編集するのか選択できます。
ここでトップページコンテンツエリア上部を選択してクリックします。
ここでは、WordPress内に動画がなくてもYouTubeやFC2・Vimeoなどの動画サイトからリンクさせることも可能です。
では、赤枠の部分をクリックして動画を追加します。
YouTubeなどの場合は、左のURLから挿入をクリック
動画を直接アップロードする場合は、画像のようにドラッグ&ドロップしてください。
YouTubeやFC2動画などから呼び出す場合は、赤枠のところにURLをコピペします。
赤枠で囲んだアドレスどちらでもいいのですが・・・
できればリンクの共有のアドレス使う方がいいです。
こちらをコピーして先ほどの部分に貼り付けします。
これで動画がトップページに表示されますよ。
今回は、代表的な部分だけ紹介しましたが他にも表示できるウィジェットがあるのでうまく使ってください。
以上、トップページの編集について書かせていただきました。
![]() |
くまはちLABのご利用ありがとうございます! |