WordPress【Lightning】で全幅見出しを使う/CSSで調整

WordPress【Lightning】で全幅見出しを使う/CSSで調整

この記事はWordPressnのLightningテーマで帯状の全幅見出しってどうするの?という疑問に答えます!

ウィジェットにある『LTG全幅見出し』を使えば簡単にできます!CSSでカスタマイズ方法を教えます。

Lightningで全幅見出し使ってみよう

WordPressテーマ『Lightning』で全幅見出しを使ってみます。

ブログのアクセントとして、又動きのあるコンテンツとしても使い勝手の良い全幅見出し。

動きのあるコンテンツにする場合はこちら

WordPressスクロールでふわっと表示・動きの作り方 CSS/JQuery
WordPressでスクロール時にふわっと画像やタグを表示したい!簡単にデザインサイトを作る基本的な動きを解説!数行のコピペであなたのサイトもワンランクアップすること間違いなし。
READ MORE..

■全幅見出しイメージ
Lightningで全幅見出し使ってみるサンプル・SENSHINページ全景

使い方はウィジェット追加とCSS編集

ウィジェットに追加

『LTG全幅見出し』を対象ウィジェットに追加します。
タイトルやサブタイトルを入力します。

Lightningで全幅見出し使ってみる『LTG全幅見出し』を追加

カスタムCSSを編集

全幅見出しウィジェットの高さを広げる場合には、カスタムCSSで補正します。

『ページのソースを表示』からCSSに使う対象のクラス名を探します。Lightningで全幅見出し使ってみるクラス名の取得

高さ調整CSS

サンプルではPCサイズのみ表示するようにします。

#ltg_full_wide_title-3 
.widget_ltg_full_wide_title_outer
{
  height:300px;
  margin-top:80px !important;
  margin-bottom:80px !important;
  padding-top:100px;
  text-align:left;
}
@media (max-width:982px) {
 #ltg_full_wide_title-3 {
    display:none;
 }
}

上の余白を詰める

ウィジェットの上の余白を消したい場合はCSSを追加します。

※余白を詰めたい場合はCSSをコピペ追加します。

.carousel {
  border-bottom:none;
}
.home .siteContent {
  padding-top:0 !important;
}

まとめ

WordPressテーマのLightningをよりかっこよく使う事ができる『LTG全幅見出し』。

少し手を加える事であなたのサイトもより一層かっこよくなります!

ぜひ使ってみてください!

Follow me!