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

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

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

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

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

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

WordPressスクロールでふわっと表示・動きの作り方 CSS/JQuery コピペで使えるコードを紹介します！ スクロールでふわっと表示させたい！ デザインのいいサイトに行くとページの部品がふわっ...

■全幅見出しイメージ

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

ウィジェットに追加

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

カスタムCSSを編集

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

『ページのソースを表示』からCSSに使う対象のクラス名を探します。

高さ調整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全幅見出し』。

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

ぜひご利用下さい