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により非表示設定することも問題ありません。

フッターのコピーライトを非表示化すると、オリジナル感が強まった印象になります。

 

蛇足
とりあえず宿題が一つ完了しました。
満点の設定が無いので、「とりあえず」完了です。
自己採点できることも自主運営の魅力です(笑)。

 

<ご案内>

■林友範税理士事務所

ご依頼はこちら

■副業をされている方も応援しています!

副業から始める確定申告セミナー動画