Lightning
Lightningとは、無料で利用可能なWordPressのテーマで専門知識が不要、個人/商用利用可能など、これからWordPressを使用したWebサイトで
ブログなどを始める方やWebサイトは開設したがテーマが見つからないので無料のテーマから試してみたい方などにオススメのWordPressテーマとなります。
本記事では、mixhostで専門的な知識不要でシンプルな無料のWordPressテーマ「Lightning」の使い方について紹介します。
項目 | 概要 |
料金 | 無料(有料の上位プラスも有) |
事前知識 | 専門的な知識は不要 |
個人/商用利用 | 可能 |
テーマの信頼性 | WordPressの公式テーマ |
拡張性や既存エディターの対応 | ・ブロックエディタ対応
・関連の無料プラグインあり |
テーマ導入方法
WP公式ディレクトリ
WP公式ディレクトリからテーマのインストールを行うことができ、PCのローカルフォルダなどにテーマファイルを保存しておくなどの
理由がなければ基本的にこの方法からテーマのインストールを行いましょう。
1.テーマの検索~有効化
運営しているWebサイトのWordPressの管理画面内から【①:外観欄:テーマ】→【②:テーマページ内:新規追加】をクリックし、
テーマを追加ページ内の【③:検索欄にLightning】→【④:検索結果からインストール】を順に行いましょう。
インストールが完了後に表示されるテーマの「有効化」クリックしてWordPressテーマの切り替えを行いましょう。
ダウンロード
1.Lightning公式サイトへアクセス
Lightningのテーマファイルをダウンロードできる場所へ、下記画像からLightning公式サイトへアクセスしましょう。
2.ページ下部のダウンロードボタンをクリック
Lightning公式サイトのページ下部にプロジェクト選択項目から無料版欄の「Lightningをダウンロード」をクリックしWordPressのテーマダウンロードページへアクセスしましょう。
※リンク先が英文となっており、同ページの日本語サイトへはこちらから
3.ダウンロードボタンをクリックしテーマファイルを保存しましょう。
この後にWordPressのWebサイトへアップロードを行うため、ファイル名【lightning.xx.yy.z】のダウンロードを開始します。
※.xx.yy.zについてはその時のVer.によって変化します。
4.テーマファイルをWordPressサイトへ追加しましょう。
運営しているWebサイトのWordPressの管理画面内から【①:外観欄:テーマ】→【②:テーマページ内:新規追加】をクリックし、
テーマを追加ページ内の【③:テーマのアップロード】→【④:参照ボタン】から3.にてダウンロードしてテーマファイルを選択しましょう。
インストールが完了後に表示されるテーマの「有効化」クリックしてWordPressテーマの切り替えを行いましょう。
Lightningの使用方法
Lightningの見出しやボタンデザインなどについて、デモサイトが用意されており、下記ボタンのリンク先にて確認することができます。
デザイン要素サンプルへはこちら 外部リンク先を新しいタブで開きます。
WordPressテーマのカスタマイズについて
LightningをWebサイトに適用しテーマのレイアウトなどを行うカスタマイズ画面へは、WordPressの管理画面の【外観欄:カスタマイズ】からカスタマイズ画面へ進むことができます。
Lightningのカスタマイズ
Lightning テーマカスタマイズは以下のように「Lightning 」+XXXXXX名の項目が追加されこの項目ごとにテーマのカスタマイズを行うことができます。
ここでは、WordPressに不慣れで「Lightning」のテーマカスタマイズを行う人向けの設定項目についていくつか紹介します。
カスタマイズ項目 | 主な設定内容 |
Lightning CSS最適化(高速化)設定 | ・Tree shaking(実行されないコードを削除)の有効化設定
・Preload CSS 有効化設定 |
Lightning 機能設定 | ・世代設定(第3世代以前のLightningに変更) |
Lightning デザイン設定 | ・デザインスキン
・ヘッダーロゴ画像 |
Lightning トップスライドショー | ・トップスライドショー設定 |
Lightning レイアウト設定 | ・カラム設定
・サイドバー設定 |
Lightning モバイルナビ | ・メニューボタンの位置
・メニューのスライド方向 |
Lightning Font Awesome | ・Font Awesome バージョン |
0.不慣れでもワンクリックで簡単にカスタマイズ項目へ
Lightningでは、カスタマイズ画面にて表示されるペンマークをクリックすることで直感的に該当の項目を開くことが可能です。
その他のレイアウト設定(カラム設定)やモバイルナビ(メニュー位置)などについても設定項目があり簡単に設定変更を行うことができます。
1.Lightning トップスライドショーでデフォルトのスライドを非表示に
Lightningのテーマを導入した時点の設定の場合、Lightningの宣伝用スライドが表示されるようになっており
【Lightning トップスライドショー】からスライドの表示設定を「スライドを非表示にする」に変更後、「公開」をクリックし設定を保存しましょう。
2.Webサイトヘッダーロゴの設定
WordPressのデフォルト設定では、サイト名をヘッダーに表示する設定となっています。
【Lightning デザイン設定】の項目から「ヘッダーロゴ画像:画像の選択」をクリックしWordPressメディアライブラリに
アップロードされている画像から選択することで簡単にヘッダーロゴ用画像を変更することができます。