Lightning研究2では、カスタマイズ→サイドバーの”追加CSS”にコピペするだけで、クオリティーの高いカスタマイズを施していきます。
このページのCSSは、何時間もネットで調べたり、研究を重ねた結果のものがいくつもあります。
見本では、よくありがちなデザインかもしれませんが、以下のレイアウトやCSSが把握できれば、応用的にどのようなサイトでも作れますし、Google Adsense、アフィリエイト、ブログ、お店、企業のホームページに至るまで、すべてを網羅することが可能ですので、じっくり時間をかけ自分のものにしましょう！
その素晴らしい成果が”秒”で手に入ります。
ヘッダーロゴサイズ変更
トップのヘッダー画像をブラウザいっぱいに配置したい場合の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