ヘッダーロゴサイズ変更
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 {
width: 100vw !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