Lightningをモダンな黒ベースに変身!

以下のCSSを外観>カスタマインズ>追加CSSに張り付けましょう。実際には黒ではなく濃紺ですので、「#02131B」→「#000」に変更すると黒になります。

CSS

/* Lightningの各種パーツを白黒に */
:root{
--vk-color-text-body: #fff;
--vk-color-text-link: #fff;
--vk-color-text-link-hover: #ff8c00;
--vk-color-text-meta: #fff;
--vk-color-primary: #000;
--vk-color-primary-dark: #fff;
--vk-color-primary-vivid: #ff8c00;
--vk-color-header-bg: #000;
--vk-color-accent-bg: #000f;
--vk-color-border: #fff;
--vk-color-border-hr: #000;
}
/*タイトル背景*/
.page-header {
    color: #fff;
    background-color: #007bff;
}
 
/* ヘッダー・本文 */
.site-header {
    background-color: #02131B;
}
.header_scrolled .site-header {
    background-color: #02131B;
}
#mega-menu-wrap-global-nav #mega-menu-global-nav {
    padding: 30px 0px 15px 0px;
}
body, html,
.site-header {
    background-color: #02131B !important;
}
 
/* 箇条書き・段落のリンク */
li a, p a {
    text-decoration-color: #fff;
}
 
/* 見出し2 */
h2 {
    border-top: 2px solid #fff;
    border-bottom: 1px solid #fff;
}
 
/* 見出し3・見出し4 */
.site-footer-title:after,
.sub-section-title:after,
h3:after {
    border-bottom: 1px solid #00d084;
}
 
/* 引用 */
blockquote {
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 20px;
}
.breadcrumb {
     background-color: #02131B;
}
.site-body {

    background-color: #02131B;
}
.site-footer {
    background-color: #02131B;
}
.vk_button .btn.has-background:not(.has-text-color), .editor-styles-wrapper .vk_button .btn.has-background:not(.has-text-color) {
    background-color: #02131B;
}

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA