WordPress「Lightning」CSSカスマイズ

WordPressでウェブサイトを作る時、シンプルでカスタマイズ性が高い「Lightning（無料版）」というテーマをよく使用します。テンプレートをそのまま使っても良いのだけど、流石にそれでは差別化を図る事ができないので、CSSを追加することによって色々と自分好みにカスタマイズして使っています。ああしたい。こうするには？とか毎回ググりながら制作していて結構時間をロスしてしまっていたので、こちらの記事に覚書としてまとめてみようと思いました。

「Litning」でCSSの追加をする場合は、編集メニューの「外観」→「カスタマイズ」→「追加CSS」に追加していきます。

CSSを追加していく前に「子テーマ」を作っておく

子テーマの説明は別記事でご紹介します。事前に作っておいた子テーマにカスタマイズしたいCSSを追加していくイメージです。「Lightning」テーマに直接CSSを加えていくとテーマの更新をした時に追加したCSSがリセットされてしまいます。別ファイルである「子テーマ」にCSSを記載する事で本体の「Lightning」を更新した時にCSSがリセットされる事を防ぐ事ができます。

フッターの「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」を非表示に。

「Copyright © ●●●● All Rights Reserved.」だけ表示させたい場合下記コードを追加すると「Powered by WordPress〜」の表記は非表示になります。

footer .copySection p:nth-child(2) {
display:none !important;
}

固定ページのタイトルとタイトル背景を非表示に

固定ページのタイトルを入力すると「背景付きのタイトルが」自動的にページ上部に表示されます。これは要らなかったので、「背景付きのタイトル」を強制的に全固定ページで非表示にさせました。ただ会社のHPなどを作る場合、各ページ上部に画像を配置する機会はありそうなので、その時はこのコードで指定の画像を表示させる設定にした方が良さそうです。

.page-header {
display:none !important;
}

パンくずリストを非表示に

「パンくずリスト」とはヘッダー下にある「HOME / Blog / Web制作覚書」などのような、辿ってきたページの道筋表示の事で、これが不要なら下記コードを追加することで全ページから非表示にできます。

.breadSection{
display:none !important;
}

パンくずリスト下の線を非表示に

パンくずリストは必要だけど、下に表示される「グレーの線」が邪魔だと思うならば、下記コードを追加することで「グレーの線」だけを非表示にできます。

.breadSection{
border-bottom: 0px solid ;
}

パンクズリストのリンクカラーを変える

パンくずリストの下線が出るリンク文字色を変更。下記コードを追加することで変更できます。

.breadSection .breadcrumb a {
    color: #●●●●●●;
    padding-bottom: 2px;
}
.breadSection .breadcrumb a:hover {
    border-bottom: 1px solid #●●●●●●;
    text-decoration: none;
}

参考ページ：[ 解決済 ] Pale　パンくずリストやリンク文字の色が青になる

フッター上のラインを非表示に

デフォルトだとフッター上に「ライン」が表示されます。不要なら下記コードを追加することで「ライン」だけを非表示にできます。

footer.siteFooter {
border-top: 0px solid ;
}

ヘッダー下のぼかしを非表示に

へッター下の「ぼかし」が不要なら下記コードを追加することで「ぼかし」だけを非表示にできます。

header.siteHeader {
border-bottom: 0px solid rgba(0,0,0,0);
box-shadow: 0 0px 0px rgba(0,0,0,0);
}

スマホメニューボタンのデザイン変更

スマホ用のメニューボタンを自分で用意したものに変更する事ができます。下記コードのURLの所に指定のアイコンを設定して下さい。（参考までに「40×40ピクセル」のサイズが丁度良かったです。）

.vk-mobile-nav-menu-btn {
    border: none;
    background-image: url("http://www.閉じているアイコン.png");
	  background-size: cover;
}
.vk-mobile-nav-menu-btn.menu-open {
    border: none;
    background-image: url("http://www.開いているアイコン.png");
	  background-size: cover;
}

参考サイト：【「Lightning」カスタマイズ】ハンバーガーメニューのデザインをオリジナルデザインに変更する方法

背景を全幅にする

固定ページに全幅の背景を交互に使うのは、割と今っぽい感じなのでよく使うかもしれません。HTMLの方には<p>ああああ</p>だけですが、必要に応じてコンテンツを入れ込んで下さい。

.full-width {
    margin: 0 calc(50% - 50vw);
    padding: 5em calc(50vw - 50%);
}

<div class="full-width" style="background-color: #カラーコード;">
<p>ああああああああああ</p>
</div>

参考サイト：【Lightning全幅設定】Lightningで全幅背景を設定する方法

前の記事・次の記事の画像を非表示に

サムネイル画像を非表示にする場合は、下記のコードを「functions.php」に貼り付けます。必ず「子テーマ」側の「functions.php」を編集しましょう。

add_filter( 'lightning_next_prev_options', function( $options ){
    $options['display_image'] = false;
    return $options;
} );

参考サイト：Lightningの前の記事・次の記事をとことんカスタマイズする！その1

前の記事・次の記事「タイトル」の文字色を変更

文字色だけ指定の色と違って表示されるので強制的に色を指定しています。

.vk_post_title.card-title a{
color: #6c6341!important;
}

前の記事・次の記事「日付」の文字色を変更

文字色だけ指定の色と違って表示されるので強制的に色を指定しています。

.vk_post_date.card-date.published{
color: #6c6341!important;
}

前の記事・次の記事囲み線の色をを変更したい

囲み線を直接希望の色に指定します。

.vk_post{
	border-color: #好きなカラー!important;
}

前の記事・次の記事のタイトルで日本語の所だけ太字になる。

下記CSSを書き加えることで解決。太さの値は好みで調整してください。

.vk_post_title.card-title{
font-weight: 200;]
}

スクロールした時にロゴも一緒に付いてくるように

Lightningでページをスクロールするときにロゴは置いていかれてメニューだけ付いてきます。下記のコードを追加することでロゴも一緒に付いてくるようになります。

.header_scrolled .site-header-logo {
display: block;
}

参考サイト：スクロールしたときにヘッダーロゴ画像を表示するカスタマイズ

Easy Google Fontsのバグ？対応

ナビゲーションで「外観」→「カスタマイズ」→「Typography」の各項目の「style」にある色指定の時、「#●●●●」と指定をしたいのに編集画面を開くと自動で閉じてしまう謎の現象が起こりました。勝手に閉じてしまうので色を指定できません。なので「shift」を押しながら編集画面を開く。そうすると別画面で同じページが表示され、その時に限り元々のページが編集可能になるので希望の「色指定」を入力する。正しいやり方ではないと思いますが自分はこれで解決しました。

記事一覧ページのh1タイトルのリンクカラーを指定する

全体的なリンクカラーや「Easy google font」でh1の色は指定しているはずなのに、ブログ記事一覧の「各タイトルだけ」意図しない色で表示されて困っていました。対応としては、「!important」を使いピンポイントで色を指定することで何とかなりました。

h1 a{
color: #6c6341!important;
}

記事ページのカテゴリーボックスの背景色を替えたい

記事一覧や記事の右上に掲載されているカテゴリーボックスの背景色は下記コードを追加することで変更できます。

.entry-meta_items_term .btn {
background-color: #好きなカラー!important;
}

記事ページ最下部のカテゴリーボックスとタグボックスの背景色を替えたい

上部のタグボックスはCSS追加で出来るのですが、「dt」を使った表示なので追加するコードが少し変わります。

dt  {
background-color: #好きなカラー!important;
}

記事ページ最下部のカテゴリーボックスとタグボックスの文字色を替えたい

上部のタグボックスはCSS追加で出来るのですが、「dd」を使った表示なので追加するコードが少し変わります。

dd a {
color: #好きなカラー!important;
}

投稿ページのタイトル下の線の色を替えたい

h1で指定するのではなくて「entry-header」で指定する必要があります。

.entry-header {
    border-bottom: 1px solid #好きなカラー;
}

投稿記事一覧にある水平線の色を替えたい

下記コードを追加で水平線カラーを変更できます。

.media {
    border-bottom: 1px solid #好きなカラー;
}

投稿ページ、ウィジェット「カテゴリー」で区切り線の色を変更したい

投稿ページで右側にカテゴリー一覧が表示される時、区切り先の色を指定する場合下記のコードを追加して下さい。

.widget .cat-item a{
    border-bottom: 1px solid #好きなカラー;
}

投稿ページ、ウィジェット「投稿リスト」で区切り線をドットにして色を変更したい

.widget_block ul li a {
	border-bottom: 1px dotted e5e2d5;
	
}

投稿ページ、ウィジェット「投稿リスト」で日時の色を変更したい

.wp-block-latest-posts__post-date {
color: #好きなカラー;
}

投稿ページ、ウィジェット「投稿リスト」で投稿リストの区切り線の色を変更したい

.widget .wp-block-latest-posts li{
    border-bottom: 1px solid #e5e2d5;
}

「Highlighting Code Block」プラグインを使用時に背景色を変更したい

.hcb_wrap .hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #9cdcfe!important; background: #f6f6f0!important;}/* 全体 */

スマホメニューの文字色と区切り線の色を変更したい

.vk-mobile-nav .widget_nav_menu menu ul li a, .vk-mobile-nav nav ul li a 
{
    color: #6c6341;
border-bottom: 1px solid #e5e2d5;
}

スマホメニューの一番上の区切り線の色を変更したい

スマホメニューの文字色と区切り線をしていした時、どういう訳か一番上の線だけ色の変更がされなかったので、直接していして色を変更しています。

.vk-mobile-nav nav>ul {
    border-top: 1px solid #E5E2D5;
}

テーブル内の文字サイズを変更したい

テーブルを使用する時に、テーブル内の文字だけ全体に指定している文字サイズが適用されないことがよくあるので、テーブルを使用した時に希望の文字サイズになるように指定しておく。

th, td {
  font-size: 13px;
}

グローバルメニューのサイズを変更したい

.gMenu>li .gMenu_name {
font-size: サイズ;
}

グローバルメニュー選択時の下線を消したい

@media (min-width: 768px){
.gMenu > li:before {
    border-bottom:none;
}
}