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

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

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

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

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

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

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

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



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

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

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

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

WordPress をクリック

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

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

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

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

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

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

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

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



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

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

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

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



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

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

色コード

変更します。

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

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



色コード
を入力します。

保存して公開 をクリック

表画面を確認すると、

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

メニューを表示させる

メニューを作るには、

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

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

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

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

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

表画面を見ると

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

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

調べました!



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

説明

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

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

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

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

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

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

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

毎月行っている八王子WordPressもくもく会ですが、今回コーポレートサイトを作るときにかっこよくて使いやすい(んじゃないか?)と思われるテーマがあるという噂を聞きました。

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

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

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

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

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

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

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

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

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

クリックして、

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

貼り付けます。

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

色を選択 をクリックして

色番号を変えます。

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

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

保存 をクリックします。

表画面を確認すると、

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

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

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

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

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

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

Lightning関連記事一覧

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

毎月行っている八王子WordPressもくもく会ですが、今回コーポレートサイトを作るときにかっこよくて使いやすい(んじゃないか?)と思われるテーマがあるという噂を聞きました。

「コーポレートサイトにもかっこいいテーマ Lightning でコーポレートサイトを作るーその1」では、Lightningというテーマについての説明と、インストール、スライダー

Lightningというテーマを使うとコーポレートサイトがいい感じに作れる、ということで今まで2回に渡ってカスタマイズの方法を書いてきました。Lightningのコーポレートサ

Lightningというテーマはコーポレートサイトを作る際に簡単に「ちゃんとした感じの企業サイト」が作れます。そのインストールやカスタマイズについて、今まで3回にわたってblo

テーマLightningを使って実際のWebサイトを作っています。いくつか変更したいことがあるので、子テーマを作りました。作りました、といってもLightningは子テーマが用

テーマLightningを使って実際のWebサイトを作ったときに、スライダーの上に文字を表示したいなと思いました。スライダーはトップページに大きく表示されるのですが、スライダー

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

トップへ戻る