Lightning でコーポレートサイトを作る ロゴ、メニュー、色、PRセクションーその２

「コーポレートサイトにもかっこいいテーマ Lightning でコーポレートサイトを作るーその１」では、Lightningというテーマについての説明と、インストール、スライダーのカスタマイズについて書きました。
今回はLightningのロゴ、メニュー、色、PRセクションをカスタマイズする方法について書きます。

既に存在しているWebサイトをLightnningに置き換えたらどのぐらい変わるか？

カスタマイズについて試そうと思ったときにあまりにも架空の内容だとリアリティがないと思いました。そこで、私の個人事業「ゆうそうと」のWebサイトを置き換えてみようかと思います。現在は、

Simplicityでかわいらしい感じのWebサイトとなっています。これを順次Lightningに置き換えていこうと思います。

同じデータで確認していきたいので、データをエクスポートしてインポートしようと思います。

ゆうそうとのダッシュボードで

ツール＞エクスポート をクリック

すべてのコンテンツ にチェックが入っていることを確認して、 エクスポートファイルをダウンロード をクリック

wordpress.年-月-日.xml　というファイル（実際には年月日はその日の数字）がダウンロードされます。

インポートしたい側のダッシュボードの

ツール＞インポート をクリック

WordPress をクリック

ここでまだ一度もインポートをしていないときはプラグインのインストールになりますが、画面の指示に従っていけばインストール後に次の画面に進みます。インストールしてある場合も

この画面になります。ファイルを選択 をクリックして、先ほどダウンロードした wordpress.年-月-日.xml を指定して

ファイルをアップロードしてインポート をクリック

こういう画面になるので 添付ファイルをダウンロードしてインポートする にチェックを入れて、実行 をクリック

エラーがたくさん出ますが、元のサイトで使っているプラグインをインストールしていないのでその分はエラーになりますが、通常の固定ページと投稿ページはインポートされたはずです、たぶん(^_^;

ロゴ画像、キーカラーのカスタマイズ

サイト名をロゴ画像にするには、

管理者バーの カスタマイズ（あるいはダッシュボード 外観>カスタマイズ）をクリック

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

ヘッダーロゴ画像 の 画像を選択 をクリック

まだロゴ画像をアップロードしていなかったので　ファイルをアップロード をクリック

ロゴを ドラッグ&ドロップ して

画像の選択 をクリックします

ヘッダーロゴが入りました。次に、このロゴに合わせて、キーカラーを変えたいと思います、色を選択をクリックして

色コードを

変更します。

もう一カ所 キーカラー（暗）、の色を選択をクリック

このように表示されるので、

色コードを入力します。

保存して公開 をクリック

表画面を確認すると、

ロゴが指定したものになり、今まで青色で表現されていたボタンやラインも指定したピンク色に変わりました。

メニューを表示させる

メニューを作るには、

ダッシュボード　外観＞メニュー をクリック

今回データをインポートしたのでメニューは

このように　メニュー１　というものが既に存在していました。データがない場合は　新規メニューを作成 をクリックして、メニュー構造のところに固定ページをドラッグ&ドロップするなどしてメニュー内容を決めます。

テーマの位置 Header Navigation のチェックボックスをクリックし

メニューを保存 をクリック

表画面を見ると

メニューが入りました。しかし、なんか違う…

Lightningのページのメニューは下に英語が入っているので縦位置のバランスがいいです。この英語の部分ってどこで入力すればいいんでしょう？？？

調べました！

外観＞メニュー の上部にある 表示オプション をクリック

説明 に

チェックを入れます。そしてメニューの項目を一つずつ開いて、

説明　という項目に英語を入力していきます。

全部入力したら メニューを保存 をクリック

表画面を読み直すと、こんな感じに英語の部分が表示されてバランスが良くなりました。

これがあるとコーポレートサイトっぽい！PRセクションを設置する

前回も合わせてここまでで、スライダー、ロゴ、カラー、メニューのカスタマイズが終わりました。今度はいよいよ、これがあるとコーポレートサイトっぽい！というPRセクション

を入れたいと思います。このPRセクションは VK All in One Expansion unit プラグインのウィジェット機能 を使って入れることになります。

[ryus_blogcard url=”https://usortblog.com//lightning-corpo-1/”]

で、テーマをインストールした直後に入れた２つのプラグインのうちの１つです。

ダッシュボード　外観＞ウィジェット をクリック

VK_PR Blocks をクリックして トップページコンテンツエリア 上部 をクリック ウィジェットを追加 をクリックします

トップページコンテンツエリア 上部 にブロックが挿入されました。各ブロックは、

この入力エリアを自分のサイトに合わせてカスタマイズしていきます。ウィジェットを入れた時点で

このようにPRセクションが入っているのがわかります。

表示されている各アイコンは

Font Awesome Icons をクリックすると、

こんな感じのアイコン一覧が表示されるので変更したいアイコンを

クリックして、

表示されたクラス名をコピーして、

貼り付けます。

アイコンの背景色を変えます

色を選択 をクリックして

色番号を変えます。

説明文と、リンクするURLを入力します。

これを３つのPR分行います。すべて入力が済んだら

保存 をクリックします。

表画面を確認すると、

こんな感じになって、だいぶコーポレートサイトっぽくなりました(^^)/

アイコンではなく写真を指定すると

こんな感じにすることもできます。

まとめ：コーポレートサイトっぽいイメージはPRセクションですね

やっぱりこのPRセクションがあると、「コーポレートサイトっぽい」感じが出てきますね。

残りはトップページに固定的な内容と最新記事を載せるとか、フッターの指定、お問い合わせボタンなどを追加するというものがの残っています。また、別の記事でこの辺について書いて、さらにコーポレートサイトっぽい雰囲気に近づけていきたいと思います(^^)/

Lightning関連記事一覧

Lightningについて書いた記事をまとめておきます

[ryus_blogcard url=”https://usortblog.com//lightning-corpo-1/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-2/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-3/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-4/”]
[ryus_blogcard url=”https://usortblog.com//lightning-kotheme-slider-interval/”]
[ryus_blogcard url=”https://usortblog.com//lightning-slider-string/”]