WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます
※本サイトはプロモーションが含まれています

Lightningテーマの追加CSS 固定,投稿,ウィジェット,タイトル見出しやロゴの文字の大きさ変更方法

Lightningテーマの追加CSS 固定,投稿,ウィジェット,タイトル見出しやロゴの文字の大きさ変更方法

Lightningテーマで自動で表示されるサイト名のテキスト、投稿もしくは固定ページのタイトルの文字やロゴの大きさなどの文字や大きさを変更するカスタマイズ方法(追加CSSの記述例)を紹介します。

CSS(スタイルシート)の追記方法

今回は、LightningテーマのCSSの記載例を紹介しますが、この 「外観」>「カスタマイズ」>「追加CSS」に移動して、ここにCSSコードをコピペで記載します。

外観のカスタマイズをクリックします。

追加CSSをクリックします。

記述例

入力したら忘れずに「公開」をクリックします。

サイトのロゴの大きさを変更するには

横長のロゴの場合、初期状態では小さくで文字が読みにくい場合があります。WordPressサイトのロゴを大きく変更する、もしくは小さく変更する方法です。

下記のCSS(スタイルシート)を「外観」>「カスタマイズ」>「追加CSS」をクリックして表示しCSSコードを記載します。

CSSコード
LightningG3テーマの場合

.site-header-logo img {
max-height: 70px;
}
Lightningテーマの場合(2021年5月頃以前の方)

.navbar-brand img {
max-height: 70px;
}

 

70ピクセルの記述例ですので、この数字を大きく、小さくして皆さんの希望のサイズに変更しましょう。

サイトのロゴを中央の真ん中に配置したい

 

横長のロゴの場合、初期状態では小さくで文字が読みにくい場合があります。WordPressサイトのロゴを大きく変更する、もしくは小さく変更する方法です。

下記のCSS(スタイルシート)を「外観」>「カスタマイズ」>「追加CSS」をクリックして表示しCSSコードを記載します。

CSSコード
LightningG3テーマの場合

.site-header-logo img {
max-height: 70px;
}
Lightningテーマの場合(2021年5月頃以前の方)

.navbar-brand img {
max-height: 70px;
}

 

70ピクセルの記述例ですので、この数字を大きく、小さくして皆さんの希望のサイズに変更しましょう。

投稿もしくのタイトルの文字の大きさ変更

初期状態では少し文字が大きいと感じる方も多いと思います。お知らせやブログ等の投稿のタイトル名の文字を変更する方法です。
下記のCSS(スタイルシート)を「外観」>「カスタマイズ」>「追加CSS」をクリックして表示しCSSコードを記載します。

CSSコード
h1.entry-title {
font-size: 22px;
}

フォントサイズが22の記述例ですので、この数字を変更して皆さんの希望のサイズに変更しましょう。(大きい数字はフォント(文字)が大きくなり、小さい数字は文字が小さくなります。

サイドバー等のウィジェットの見出しタイトルのデザイン変更

2カラムのデザインの右サイドバーや左サイドバーのウィジェットのタイトルの文字を変更します。
初期状態では、メインカラーが左に出ていて、途中からグレーの色の線が表示されます。
これを変更したい場合には、
下記のCSS(スタイルシート)を「外観」>「カスタマイズ」>「追加CSS」をクリックして表示しCSSコードを記載します。

CSSコード

フォントサイズが22の記述例ですので、この数字を変更して皆さんの希望のサイズに変更しましょう。(大きい数字はフォント(文字)が大きくなり、小さい数字は文字が小さくなります。

Lightningテーマで自動で表示されるサイト名のテキスト、投稿もしくは固定ページのタイトルの文字やロゴの大きさなどの文字や大きさを変更するカスタマイズ方法(追加CSSの記述例)を紹介します。

 

あああ

【LightningG3の以前のテーマ】

ロゴの大きさ

サイトタイトルの大きさ

投稿のタイトル大きさ

固定ページのタイトルの大きさ

サイドバー(ウィジェットのタイトルの大きさ)

カテゴリー一覧のカテゴリー名の大きさ

【LightningG3】

 集客&新規ビジネスに!はっちゃんの新サービス

WordPressで会員動画サイトが作れる!

\動画コンテンツで新しい収益を!/

オンライン講座機能付き
WordPressテンプレート新発売

多言語化によるお悩みを解決します

\導入費用のみ!月額費用は不要/

管理画面からカンタン更新!
AI翻訳+人力翻訳の使い分けも可能

 開催中のWordPress講座・セミナー

サイト制作&運営のお悩みを解決しませんか?

~ あなたのための特別カリキュラムでお悩み解決 ~
・制作・運営のちょっとした困ったを解決!
・集客&効率化のアドバイスも!
・オンラインレッスンだから全国どこでも参加可能
・受講後も安心!メールサポート付き

【東京開催】対面レッスンのElementor講座

~ 対面でのセミナーを再開しました~
ノーコードで簡単にデザインができる
大人気プラグイン「Elementor」の対面での講座です。

新しいWordPress作成のスタンダード!

~ Elementorでサイトデザインを作ってみよう ~
WordPressでの制作はこれから大きく変化します!
テーマを選んで当てはめていく作り方から、
自分で自由にデザインし、テーマまで作れるオンライン講座です。

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

  新サービス開始しました

WordPressで会員動画サイトが作れる!
オンライン講座機能付きWordPressテンプレート新発売!→詳しくはこちら

多言語化によるお悩みを解決します!
管理画面からカンタン更新!AI翻訳+人力翻訳の使い分けも可能→詳しくはこちら

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策が
6時間しっかり学べるコンテンツマーケティング講座(オンライン開催)→詳しくはこちら

 

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  ピックアップ記事

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP