ワードプレステーマLightning G3カスタマイズに関連する備忘録

ワードプレステーマLightning G3のカスタマイズで、役立ちそうな記事のリンクを掲載していきます。


グローバルナビの後ろに電話番号と問い合わせボタンを追加するやり方（追加CSS）

https://demo1.uonuma-js.com/lightning-g3-global-nav-phone-contact-buttons/










追加CSSでヘッダーの背景や文字色を変更する方法

https://www.nishi2002.com/34940.html

（↑出典元詳細は上記ページをご確認ください。）
元のソースはh1.page-header-title となっていましたが、h1をつけると下層のカテゴリで効かないところがあったので、私は、h1を外して、下記のソースにしました。

　

 Lightning G3（v14以降）では次のようになります。

/* ページヘッダーの背景色 */
.page-header {
    background-color: #000080;
}
 
/* ページヘッダーの文字色 */
.page-header-title {
    color: #fff;
}




Lightning　スライドショーモバイルの最適な画像サイズ



（↑出典元）
横750px×高さ530px




クリックで、ギャラリー画像を拡大し、ライトボックス風にするJetPackプラグインのやり方



LightningG３無料版で、著者名を非表示にするやり方

（上記サイトに詳細が記載されています。）

下記ソースを追加CSSに記入
.entry-meta-item-author { display: none; }



LightningのCTAの設置方法


【WordPress】LightningテーマのCTAを設置する方法【成約率アップ】


コピペでかんたん。左に寄ったフッターメニューを中央寄せする方法。美しいを整えるLightningテーマ[WordPress]


※スマホでは、適用したくありませんので、767以上のPC画面のみCSSを反映させています。

@media screen and (min-width: 767px){/*　PC用767px以上　*/
ul.menu.nav#menu-mainmenu-1{/*　フッターメニュー中央寄せ　*/
	position: relative;
	left: 50%;
}
.footerMenu li {
	left: -25%;/*　コンテンツに応じて適時変更　*/
}
}



Lightningで見出しの前後にアイコンを入れる方法を解説






Lightningテーマで便利な追加CSS



ボタンブロックのマウスホバー時の色を指定する - WordPress




Contact Form 7 のお問い合わせフォーム レイアウトのカスタマイズ例

ライトニングでの追加CSSでのコンタクトフォーム７のカスタマイズ例です。



Lightningカスタマイズ: フォントのサイズと色


:root { --vk-size-text: 18px; --vk-color-text-body: black; }

https://affilife.sainoa.com/archives/10803.html（引用元）


Lightning 標準のスライドショーのフォントサイズを変更するには

/* スライドタイトル */
.ltg-slide .ltg-slide-text-title {
    font-size: clamp(16px,3dvw,32px);
}


/* スライドテキスト */
.ltg-slide .ltg-slide-text-caption {
    font-size: clamp(12px,2dvw,18px);
}


/* ボタン */
.ltg-slide .btn {
    font-size: clamp(12px,1.8dvw,16px);
}
ｖ



コメント

コメントを投稿