ヘッダーロゴサイズ変更

Lightning のトップのヘッダー画像をブラウザいっぱいに配置したい場合のCSSです。

ヘッダー画像とグローバルメニューを自由にカスタマイズ・配置できれば、見栄えのする、プロ仕様のホームページ・ブログとして活用できるはずです。

Lightningに最適なデザインを無料で提供していきたいと思います。 

/****************************
ヘッダー画像 横幅一杯処理 80%
****************************/
.navbar-header .navbar-brand {
	margin-left: calc(50% - 40vw) !important;
	width: 80vw !important;
	margin-bottom: 0.5em !important;
}
.navbar-brand img {
	max-height: none;
	max-width: 100%;
}
.siteHeader_logo {
	margin: 0px !important;
	padding: 0px !important;
}
/****************************
ここまで
****************************/

※横幅を100%にする場合は、以下のようにします。
.navbar-header .navbar-brand {
margin-left: calc(50% – 50vw) !important;
width: 100vw !important;
margin-bottom: 0.5em !important;
}

※直接開かず、ダウンロードしてお使いください。
header_pic.txt

ヘッダーメニューの2段化

グローバルメニューの表示を、上段に日本語、下段に英文字を入れる場合のCSSです。

分かりにくいかもしれませんが、各メニューは、数値で関連付けられており、その番号をCSSに入れることで紐づけられます。
ページのソースを見て、その該当部分の数を控え、下方にあるテキストデータを修正します。

修正したテキストデータをコピーして、カスタマイズ→サイドメニューの”追加CSS”を開き、そこにペーストします。 

*****************************
グローバルメニュー
メイン文字下の英文字設定

各メニューの右側の数値は、
ページソースを見て、
調べてください。
****************************/
#menu-item-11 > a:after {
	content: 'home';
	display: block;
}
#menu-item-18 > a:after {
	content: 'sample';
	display: block;
}
#menu-item-19 > a:after {
	content: 'price';
	display: block;
}


※直接開かず、ダウンロードしてお使いください。
nidan_menu.txt

続・2段化PRO仕様

2段にカスタマイズしたグローバルメニューを、デザイン、色、サイズなどをさらに進化させて、ビジュアル面をカスタマイズしていきます。

すでに、上にある2段のカスタマイズを施している場合には、その部分を今回のCSSで上書きして保存してください。

方法はすべて同じで、下にあるテキストデータをコピーして、カスタマイズ→サイドメニューの”追加CSS”を開き、そこにペーストします。

※直接開かず、ダウンロードしてお使いください。
nidan_menu_pro.txt

PRブロックの設置

Lightningには、最初からPRブロックが設置されていますので、まずはそのPRブロックを非表示にします。

カスタマイズ→サイドメニューの”Lightning トップページPR Block”の最上部の”PR Block を表示する”のチェックを外します。

これで、初期設定のLightning PR Blockが非表示になります。

この後に、ワンランク上のPRブロックを設置します。

ワンランク上のPRブロックを実装するために、まずは、多機能プラグインの”VK All in One Expansion Unit”をインストールしていきます。

ダッシュボード→プラグイン→新規追加をクリックし、検索窓に”VK All in One Expansion Unit”と入力して、ダウンロード後、有効化します。

ダッシュボード→ウィジェットより、VK PR Blockをクリックし、”トップページコンテンツエリア”を選択後、”ウィジェットを追加”ボタンを押せば、トップページにVK PRブロックが設置されます。

追加したVK PRブロックは、上の画像に書いてある手順で、内容を入力します。

入力を終えた後は、トップページより、カスタマイズ→PR ブロック近くの鉛筆マークをクリックし、編集も可能です。

PRブロックに写真を入れると、ひと際目を引くデザインになりますし、インパクト、アピール度も増して、魅力あるトップページが完成します。

ページ全体横幅調整

ブラウザサイズにより、ページ全体の横幅が極端に狭くなったりと、微妙な動きをするので、一定の横幅サイズになるよう調整しました。スマホでは、横幅がもともと狭く見難いため、左右の余白をギリギリまで狭め、見やすく調整しました。

下にあるテキストデータをコピーして、カスタマイズ→サイドメニューの”追加CSS”を開き、そこにペーストします。

※直接開かず、ダウンロードしてお使いください。
wide_select.txt

フッターメニュー調整

調整内容としては、フッターメニューのレイアウト、幅などが不規則で見た目も悪く、扱いにくいレイアウトを調整し、スマホ以外ではセンタリングで等幅表示にして、使えるレイアウトに変更しました。

Lightningのバージョンアップにより、再調整が必要になる場合もございますので、その際には再調整したいと思います。

下にあるテキストデータをコピーして、カスタマイズ→サイドメニューの”追加CSS”を開き、そこにペーストします。

※直接開かず、ダウンロードしてお使いください。
footer_layout.txt