WPテーマ Lightningのプチカスタマイズ
てんぺる
このページでは、備忘録も兼ねて、Lightningのテーマでカスタマイズしたい あるいは 検討している内容について、記載していこうと思います。
Contents
前の記事・次の記事の非表示 or カスタマイズ
以下のように、ページ下部に表示される、前の記事・次の記事の表示をなんとかしたい。
②カスタマイズする
https://lightning-g3.hp1.work/lightning-g3-prev-next-noimage-customize/
[実施状況] ①を採用。追加cssに以下記入すれば、簡単に非表示にできる。
.next-prev {
display:none;
}
ページヘッダーの非表示 or カスタマイズ
各ページのヘッダー部が単色＋中央文字で割と高さもあるため、デザイン的に変更したい。
①ページヘッダーを非表示にする →各ページにヘッダー画像の準備が必要で大変
https://www.satokobo.net/lightning/204
②ページヘッダーをカスタマイズする(背景画像・フォント)
https://lightning-free.hp1.work/page-header-background_image-font/
[実施状況] ②採用し、以下のとおり変更
◎追加cssに以下貼り付け。background:url()の括弧内に表示させたい画像のurlを入力
/* 以下ヘッダー画像カスタマイズ */
.page-header { / 文字色 / color: #0d386a; / 背景画像 */
background: url(https://hamo-reno.com/wp-content/uploads/2023/09/2cf21d2fdb6168eb7feea3d1c4a6c96e.png) no-repeat 50% center;
background-size: cover;
min-height: 9rem;
}
投稿ページ 投稿者非表示
以下の投稿者(てんぺる)を非表示にしたい。
[参考サイト] https://lightning-g3.hp1.work/lightning-g3-hide-entry-meta-item-author
[実施状況] 実施済。以下を追加cssに貼り付け
/* 投稿ページ投稿者非表示 */
.entry-meta-item-author { display: none; }
フッターコピーライト2行目の非表示
以下のコピーライトの2行目を非表示にしたい。
[参考サイト] https://webst8.com/blog/lightning-copyright-delete/
[実施状況] 実施済。以下を追加cssに貼り付け
/* フッターコピーライト2行目の非表示 */
.site-footer-copyright p:nth-child(2) {
display: none;
}
投稿ページタイトルのサイズが大きすぎる
バランスが悪い。特に、スマホにした場合など、サイズが大きいため、タイトルが２段になって見栄え的にもイマイチ。従ってサイズ調整。対象のh1のサイズを小さくする。
[実施状況] 実施済。以下を追加cssに貼り付け
/* 投稿ページタイトルサイズ変更 */
h1 {
font-size:20px;
}
目次の自動作成
ブログ記事に目次を付けたい
[方法] プラグイン「Table of Contents plus」をインストール
◎インストール方法や各設定については下記参照
https://souken-blog.com/2021/07/20/wordpress-table-of-contents-plus/
◎表示させるページを選択したい
→「以下のコンテンツタイプを自動挿入」でチェックを全て外す
→目次を表示させたいページの中で、目次を表示させたい場所にカーソル移動
ブロック「カスタムHTML」にて、次のショートコードを入力
◎目次に表示させる見出し(h2,h3・・・)の選択
→下部に隠れている「上級者設定」で選択可能
Lightningでヘッダーメニューにアイコンを表示させる方法
[方法] 専用サイトでアイコンを取得し、得たコードをメニューに追記
◎下記参照
https://d-elephant.com/archives/2519
◎アイコン取得先
https://fontawesome.com/search?q=twitter&o=r
◎外観→カスタマイズで表示されるメニューに、下記コードを追加
<i class="fa-brands fa-twitter"></i>
※「X」アイコンもあり、設定しようとしたが表示されなかったので、「twitter」のアイコンを選択
[実施状況] 実施済