WordPress

ワードプレステーマ【ライトニング】初心者でも簡単!カスタマイズ・使い方を解説!

はてなちゃん
はてなちゃん
Lightningテーマをインストールしたけど設定がチンプンカンプンなんだけど!
ひろ
ひろ
WordPressに慣れるまでは、カスタマイズするのも大変ですよね
はてなちゃん
はてなちゃん
もー半日迷ってるよ!
ひろ
ひろ
それは大変でしたね。まずはこの記事通りに作業していけばすごく簡単にカスタマイズできますよ!

こんなことで困っている方

・Lightningテーマをインストールしたけど、設定方法が分からない・「オシャレなサイト」にしたいけどやり方が分からない・「記事書いたらこのまま公開していいのかな?」

・WordPressの管理画面の名称からして分からない。ウィジェットとかプラグインとか・・・

安心してください!

私が、初心者の方でも、簡単にカスタマイズや設定ができるように、解説していきます!

そもそもWordPressとはなに?から知りたい方はこちらの記事からご覧ください!

【ワードプレス】使い方マニュアル【初心者向け網羅版!】WordPressの基本操作や基本設定を初心者向けに網羅的に解説しています。50枚以上の画像で解説しているのでとにかくわかりやすいです。...

この記事の手順通りに作業していくと、あくまでもイメージですが、こんなデザインになります

完成サイトイメージ

こんな感じです

一般的なWEBサイトの名称が分からない方はこちらを見て頂いてから、下記のカスタマイズにのぞんだ方がスムーズかもしれません。(ヘッダー、フッター、サイドバーなど分かればOKです)

それでは始めていきましょう!

と、その前にLightningの上位モデル(有料)「Lightning Pro」というテーマが非常に高機能ですので、もしご興味がありましたら、のぞいてみてください!

これから稼ぎたい!という方は、先行投資してみてはいかがでしょうか?

「Lightning Pro」を確認したい方はこちらをクリック!

Lightningテーマをインストールしよう!

まずは、Lightningテーマを一緒にインストールしていきましょう!

Lightning公式マニュアルも一緒に見ていくと便利です

Lightningテーマのインストール方法

WordPress管理画面の「外観」>「テーマ」からインストールしていきます

Lightningテーマのインストール方法

「新規追加」をクリック

Lightningテーマのインストール方法

検索窓に「Lightning」と入力します

すると、Lightningテーマがでてきます

Lightningテーマのインストール方法

「インストール」をクリックして完了です

インストールが終わりましたら、画面はそのままで

Lightningテーマが推奨しているプラグインもインストールしちゃいましょう!(必須です)

VK All in One Expansion Unitプラグインをインストール

インストールは簡単です

VK All in One Expansion Unitプラグインをインストール

テーマのインストールが終わった画面の上に

「プラグインのインストールを開始」という表示が出てきますのでこちらをクリック

VK All in One Expansion Unitプラグインをインストール

「インストール」をクリックでインのインストールされます

VK All in One Expansion Unitプラグインをインストール

「必須プラグインのインストール画面に戻る」をクリック

次にこのプラグインを有効化していきます

VK All in One Expansion Unitプラグインをインストール

「有効化」をクリックして完了です

VK All in One Expansion Unitプラグインをインストール

「ダッシュボードに戻る」をクリック

ダッシュボードに戻りましょう

Lightningテーマのデザインを確認

この段階でどんなデザインになっているか確認してみましょう!

ダッシュボード(管理画面)の左上から現在のサイト表示ができます。

WordPressのダッシュボードの画像

上記にカーソルを合わせて右クリック

「新しいタブで開く」を選択します

WordPressのダッシュボードの画像

別のタブで開けますので、なにかと便利なのでこの開き方がおすすめです
もちろん普通に「サイトを表示」をクリックしても開けます

そうするとこんなサイトが表示されます。

サイト画面

ここから、デザインをカスタマイズしていきます!

Lightningのデザインをカスタマイズしていこう!

カスタマイズは、管理画面の「外観」>「カスタマイズ」で設定していきます

カスタマイズ項目はこれだけあります

カスタマイズ項目

色々カスタマイズできるのですが、デザインに何日もかけて肝心の記事が書けないと本末転倒なので、ここでは最低限のカスタマイズを解説していきます

カスタマイズする画面の見方

こちらは、カスタマイズ画面の見方になります

カスタマイズ画面

左側:「カスタマイズ項目」です

右側:左側でカスタマイズしたものが、リアルタイムに反映されるフィールドです。こちらを確認しながら、カスタマイズができるので便利です

※「Hello world(タイトル)」はWordPressにデフォルトで入っている記事サンプルです。

それでは1つずつ見ていきましょう!

サイト基本設定をしよう!

まずは、サイトの基本設定からしていきます

サイト基本設定

「外観」>「カスタマイズ」をクリック

サイト基本設定

「サイト基本情報」をクリック

サイトのタイトルとキャッチフレーズの設定

サイトタイトルとキャッチフレーズの設定をしていきます

サイト基本設定

サイトタイトル:サイトのタイトルを入力

サイトキャッチフレーズ:サイトタイトルの補足情報などを入力(なくてもOK)

サイト基本設定

こちらに反映されてます

サイトアイコンの設定

サイトアイコンをはこれです

サイトアイコンの説明

では、サイトアイコンを設定していきます

「サイトアイコンを選択」をクリック

メディアライブラリ画面

メディアライブラリが表示されますが、まだ何も入っていない方もいますよね

まだ画像やアイコンがないよという方は、下記を参考にして頂き、準備をお願いします

画像はすぐ準備できますが、アイコンやロゴをプロに依頼した場合は、数日かかると思うので、納品され次第、また戻って設定してみて下さい。(サイトアイコンは今すぐになくても大丈夫です)

画像を持ってないよという方は、下記の参考サイトになります。ブログを書いていくにあたって画像は必要になってきますので、参考にしてください!

●写真AC

日本最大の無料写真素材サイト。まずは写真ACがおすすめ

写真素材無料【写真AC】

はくたそ

日本人のモデルが多いです
ぱくたそ

●Unsplash(アンスプラッシュ)

海外のサイト
Unsplash(アンスプラッシュ)

●いらすとや

かわいいイラストフリー素材
いらすとや

 

自分のアイコンやロゴはココナラで作ってもらうのがおすすめです

私はいつもココナラを利用してアイコン、ロゴ、サムネイルなど作成してもらってます!

ブログを運営していく中では必要な投資かなと思います

準備はできましたか?

サイトアイコンを設定するとこんな感じで反映されます
サイトアイコン

「サイトタイトル」「キャッチフレーズ」「サイトアイコン」が設定できましたら、「公開」を忘れずにして次にいきましょう!

カテゴリーの設定をしていこう!

次にカテゴリーの設定をしていきます

カテゴリーとは記事を分類するものです。

私のこのサイトでは、この「WordPress」と「Twitter」の部分にあたります

カテゴリーの説明

もし、まだ何についての記事を書くか決まってないよということでしたら決まってから設定でも大丈夫です

カテゴリーの設置方法はこちらの記事をご覧ください

おかえりなさい(⌒∇⌒)

カテゴリーの設定が完了したら、次にメニューの設定にいきましょう!

メニューの設定をしていこう!

続いてメニューの設定をしていきます

メニューとはこの部分です

メニューの説明

「外観」>「カスタマイズ」をクリック

メニューの設定

「メニュー」をクリック

メニューの設定

「メニューを新規作成」をクリック

メニューの設定

メニュー名:メニューを管理する為の名前。私は「メインメニュー」とします

メニューの位置:メニューを表示させる位置の選択です。私は、ヘッダー、フッター、モバイルと全て選択します

メニューの設定

「項目」を追加をクリック

LION BLOGテーマメニューの設定

固定ページの「▼」をクリック

「ホーム」をクリック

LION BLOGテーマメニューの設定

カテゴリーの「▼」をクリック

先ほど設定したカテゴリーをクリック

LION BLOGテーマメニューの設定

このように選択したメニューが左側に移っていればOKです

「公開」します

メニューの設定

このように反映されます

ウィジェットの設定をしていこう!

ウィジェットとは「小さなパーツ」という意味で、利用したいものだけ組み合わせて使えます

WEBサイトの中では下記のように使われています。赤枠の部分がウィジェットで設置したものになります

ウィジェット画面の画像

これがウィジェットです

ウィジェットの設定手順

「外観」>「カスタマイズ」をクリック

ウィジェット画面の画像

「ウィジェット」をクリック

ウィジェット画面の画像

ここはウィジェットを配置する場所を選択します

今回はサイドバーに設置していきます

「サイドバー(共通上部)」をクリック

ウィジェット画面の画像

「+ウィジェットを追加」をクリック

ウィジェット画面の画像

たくさん、配置できるウィジェットが出てきますので、お好きなものを選択していってください

ここでは、「検索」を選択します

検索とは、読者がサイト内を検索する時に使う検索窓です

ウィジェット画面の画像

検索が配置されました

この要領で必要なウィジェットを配置していきます

「+ウィジェットを追加」をクリック

ウィジェット画面の画像

今度はプロフィールを設定していきます

必要ない方はもちろんなくても大丈夫です

ウィジェット画面の画像

必要な項目を入力してきます

ウィジェット画面の画像

「+ウィジェットを追加」をクリック

ウィジェット画面の画像

次に「カテゴリー」と「最近の投稿」を設置します

ウィジェット画面の画像

このように設置しましたら、「<」をクリックして戻ります

ウィジェット画面の画像

今度は、デフォルトで配置されている必要のないウィジェットを削除していきます

「フッター上部」とがこの部分です

ウィジェットの設定

もちろん、サイドバーではなく、フッターにウィジェットを配置したいよという方

または、両方設置したいよという方は、お好きなようにカスタマイズしてください

ここでは、サイドバーに設置して、フッターは削除します

 

それでは削除していきます

ウィジェット画面の画像

「▼」をクリックして詳細を表示させます

「削除」をクリック

これを全部やっていきます

ウィジェット画面の画像

全部削除したら、「公開」をしましょう

ウィジェット画面の画像

このようにサイドバーにウィジェットが配置できました

簡単に追加、削除ができますので、自分のサイトに必要なウィジェットを選択してください!

 

Lightningデザイン設定をしよう!

ここでは、サイトの「ロゴ」や「色」を設定していきます

「外観」>「カスタマイズ」をクリック

Lightningデザイン設定

「Lightningデザイン設定」をクリック

Lightningデザイン設定

ここでは、「ロゴ」と「サイトの色」をカスタマイズしていきます

【ロゴの設置】

ロゴは持っていたら、設置していきましょう

私はもってないので、アイコンですが説明のため配置します

【サイトサラーの設定】

「キーカラー」はサイトメインカラーです

お好きな色を設定していきましょう

キーカラー(暗)は下記のような部分の色になります

Lightningデザイン設定

Lightningレイアウト設定をしていこう!

続いてレイアウトの設定をしていきましょう!

「外観」>「カスタマイズ」をクリック

Lightningレイアウト設定

「Lightningレイアウト設定」をクリック

ここは、特にこだわりがなければ設定はデフォルトのままでもOKです

Lightningレイアウト設定
カラムとは「列」や「蘭」という意味です

1カラムでしたら、サイト内を「1列」でレイアウトするということです

ここの設定では

1カラム:サイドバーなし

2カラム:サイドバーあり

となります

サイドバーない方がいいなという方は、設定を変更してください

Lightningレイアウト設定

サイドバーの位置とサイドバーの固定の設定です

 

Lightningトップページスライドショーの設定をしていこう!

続いて、トップページのスライドショーの設定をしていきましょう!

スラインドショーは最大5枚まで入れることが可能です

「外観」>「カスタマイズ」をクリック

Lightningトップページスライドショーの設定

「Lightningトップページスライドショーの設定」をクリック

Lightningトップページスライドショーの設定

たくさん設定項目がありますので、上から順にみていきます

スライドが必要なければ「非表示」にチェック

スライドの効果:「slide」と「fade」から選択

スライドの切り替え間隔:スライドが次のスライドに切り替わるまでの時間

Lightningトップページスライドショーの設定

画像を選択していきます(画像を探す場合はこちら

推奨サイズは、1900×600ピクセルなのでそれに合わせて画像も用意しましょう

Lightningトップページスライドショーの設定

スライドに色をかぶせたい場合は設定

スライドのリンクは、スライドをクリックしたときに、飛ばしたい先がある場合に設定

Lightningトップページスライドショーの設定

「スライドタイトル」と「スライドテキスト」を入力

スライドの中に文字を入力することができます

必要に応じて入力してください

Lightningトップページスライドショーの設定

ボタンの設定です

先ほどの「スライド画像リンク先」に飛ばします

「スライド画像リンク先」を設定していないと、ボタンも設置できません

Lightningトップページスライドショーの設定

「スライドタイトル」と「スライドテキスト」の文字の色と文字の影の設定になります

スライドショーが入ると、だいぶ自分が作りたいサイトイメージに近づいてきましたね!

 

Lightningトップページ PR Blockの設定をしていこう!

PR Blockとはここの事です

LightningトップページPR BLOCkの設定

設置していきましょう!

「外観」>「カスタマイズ」をクリック

LightningトップページPR BLOCkの設定

「Lightningトップページ PR block」をクリック

たくさん項目がありますが、順に設定していきましょう!

まず、アイコンを設定していきます

LightningトップページPR BLOCkの設定

「ICON list」をクリックすると「Font Awesome」のサイトに飛びます

font awesomeサイト画面の画像

Font Awesomeのサイトにはいったら、アイコンの検索窓に探したいアイコン名を入れます

ここでは試しに「book」をいれてみました

「book」を入れて検索すると

font awesomeサイト画面の画像

このように「book」から連想されるアイコンが出てきますので、好きなアイコンを選択します

font awesomeサイト画面の画像

このような画面になりす

上記の部分にカーソルを合わせて左クリックをするとコピーできます

コピーできたら、管理画面に戻ってください

PR Blockカスタマイズ画面の画像

コピーしたものを貼りつけます

PR Blockカスタマイズ画面の画像

コピーをしたら、上記のようにいらない部分を削除してください

そうすると、アイコンが選んだものに変わっていることが分かります

PR Blockカスタマイズ画面の画像

続いて、「タイトル」や「サブテキスト」も変更しましょう

PR Blockカスタマイズ画面の画像

最後に「リンクURL」を変更します

これはなにかと言いますと

このPR Blockをクリックしたときに、どのページに飛ばすかを設定するものになります

これを3つ設定しましょう!

PR Blockは、ウィジェットでも設定できます

「Lightningトップページ PR Block」で設定との違いは、アイコンではなく画像で作成できるという部分です

LightningトップページPR BLOCkの設定

お好きな方で設定しましょう!

 

Lightningフッター設定していこう!

続いてフッターの設定をしていきましょう

「外観」>「カスタマイズ」をクリック

フッターの設定

「Lightningフッター設定」をクリック

フッターの設定

ここは、フッターのウィジェットエリア設定だけになります

フッターにウィジェットを配置している方は、必要に応じて設定しましょう!

 

ExUnit設定をしていこう!

最後に、ExUnit設定の設定をしていきましょう

この項目は、「VK All in One Expansion Unit」のプラグインを有効化すると設定でいきます

「外観」>「カスタマイズ」をクリック

SNS設定

SNS関連の細かい設定ができます

必要に応じて設定していきましょう!

SNSの設定

「SNS設定」をクリック

まず「OGP」というのが出てきますが

「OGP」とは、「Open Graph Protcol」の略で、TwitterやFacebookなどのSNSでシェアした際に、設定したWEBページの画像やタイトルが表示されます

OGPの設定

ここの部分です

次に「ソーシャルボタン」とはこれのことです

SNSの設定

記事を読んでくれた方が、シェアしやすいように設置します

Google Analytics設定

Google Analyticsの設定になります

Google Analyticsの設定をすでにされている方は下記にトラッキングIDを入力すれば計測できます

Googleアナリティクスの設定方法

トラッキングIDは、下記より確認できます

「管理」>「<>トラッキング情報」>「トラッキングコード」

関連記事設定

関連記事の設定になります

同じタグの記事を関連記事として表示してくれます

関連記事の設定

これで、Lightningテーマのカスタマイズは終わりにします!

どんどん記事を書いていきましょう!

記事の書き方はこちらの記事をご覧ください

【ワードプレスブログ】記事の書き方(グーテンベルグ・クラッシックエディターを網羅的に解説!)この記事は、「投稿」と「固定ページ」の違い。グーテンベルグ(ブロックエディター)とクラッシックエディターでの記事の書き方を初心者向けに解説しています。...

また下記に、WordPressを使っていくにあたり最低限設定しておいた方が良いことを解説した記事もおいておきますので、確認して設定していくことをおすすめします!

WordPressを使用するにあたり最低限やっておいた方が良い設定

この記事では、WordPressテーマの「Lightning」のカスタマイズに絞って解説してきました

ただ、WordPressを使っていくには、デザインのカスタマイズの他にいくつかやっておいた方が良いことがあります

それは

・記事の書き方

・パーマリンクの設定

・プラグインの使い方

・お問い合わせフォームの設置

・プライバシーポリシーの設置

・パスワードの設定

・バックアップの取り方

など

上記の解説している記事がありますので、ぜひご確認ください

サーバー契約から

WordPressをインストールして

Lightningをインストールして

Lightningをカスタマイズして

まだあるのか~

かもしれませんが、もう一息です

今やっておけばあとが楽です

アイキャッチ画像
【ワードプレス ブログ】初期設定・使い方を初心者向けに丁寧に解説!WordPressの初期設定・使い方を網羅的に解説した記事です。WordPress初心者の方はこの記事で基本的な設定などはできてしまいます。画像も70枚以上使って解説しています。...

お互いブログがんばっていきましょうね!

それではまた別の記事でお会いできることを楽しみにしています(^▽^)/

ひろでした。