WordPressのLightningを追加CSSで変更!
見出しの変更方法
おまけフッターを非表示化
ブログの感想は記事の内容が全てです、とは言いません(笑)。
装いを新たにしてみました。
追加CSSで変更 課題と宿題も自作
ブログやサイトを自主運営する魅力は、
- コスト
- 柔軟なカスタマイズ
といった点にあります。
「柔軟なカスタマイズ」を深掘りしてみると、
- 欲しい機能や
- 期待する表示形式を
- その都度変更できる
ということができます。
丸投げやお仕着せにはない魅力です。
その一方で、WordPressでのサイトの自主運営では、
- 課題の解決だけでなく、
- 何が課題かも設定しなければならない
といった問題を抱えています。
良くも悪くも、初期状態で放置しかねません。
WordPressでは「プラグイン」の利用で機能が追加できます。
機能とは別にサイトの見た目は「CSS」での設定を行います。
私にとって「追加CSS」の利用は宿題となっていました。
(WordPressを使うとCSSの利用に鈍感になるのか?)
追加CSSで変更 見出しの変更方法
ウェブサイトは「HTML」と「CSS」で構成されています。
たとえば、「見出し」。
- HTML:<h2>○○</h2>で表示
- CSS:色や余白、線などを設定
WordPressで利用する「テーマ」では、あらかじめ設定されています。
初期設定を変えずに、表示スタイルを変更する仕組みが「追加CSS」です。
私の使っているテーマ「Lightning」では下記より「追加CSS」を利用します。
- 「外観」→「カスタマイズ」
「追加CSS」に変更後のCSSを入力します。
テーマに合致したCSSでなければ反映されないので、
変更前の状態より構造や形式を確認します。
ブログの見出しの変更をする場合、
- ブログを開いた状態で「F12」
よりデベロッパーツールが起動します。
下記のように左上の矢印アイコンをクリックした後で、
カーソルを見出しにもっていくと表示が変わります。
注目するのは、上記の「スタイル」でも見出しに関する箇所です。
上記「h2」~「}」までをコピーして、「追加CSS」に貼り付けます。
線の太さや色を変更してみます。
グッと引き締まった印象になりました。
追加CSSで変更 オリジナリティに変えていく
Lightningは定評のある人気のテーマです。
まとまりのあるサイトが作りやすく、ウェブでも情報が充実しています。
反面、「どこかで見たような…」と印象の弱さが玉に瑕です。
追加CSSを「チョイ足し」すると、他サイトとの違いが強調できます。
オリジナリティといっても、少しずつ作っていくことも可能です。
おまけ フッターを非表示
Lightningをデフォルトで利用するとコピーライトが表示されます。
2行目ではLightningがVektorにより提供されていることがわかります。
Vektorのサイトをみると、下記の記載が確認できます。
下記のように追加CSSにより非表示設定することも問題ありません。
フッターのコピーライトを非表示化すると、オリジナル感が強まった印象になります。
蛇足
とりあえず宿題が一つ完了しました。
満点の設定が無いので、「とりあえず」完了です。
自己採点できることも自主運営の魅力です(笑)。
<ご案内>
■林友範税理士事務所
■災害と税金の情報
■確定申告のご依頼も受付中!