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翻訳+人力翻訳の使い分けも可能

Elementorテンプレート販売中!

\Elementor無料版対応/

サイトがまるごとインストールできる
Webサイトテンプレート
LPも追加しました!

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

 WordPress・サイト運営のお悩みを解決します

女性講師によるマンツーマンレッスン開催中!
・オンラインレッスンだから全国どこでも参加可能
・2011年から150回を超える研修実績あり
・受講後も安心!メールサポート付き
・受講中の録画動画をお渡しします

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

 はっちゃんYouTubeチャンネル

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

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

 【無料】オンライン講座・セミナー

新着情報

 みんなのワンちゃんが写真集に!

チワワやパグ・トイプー等の犬種別の50匹のわんちゃんで1冊の写真集をつくるプロジェクトが弊社の出版事業で募集開始!

まずは、ワンコから開始して、ニャンコ、小動物、そしてカエルの写真集も出したいですね😉 令和出版ロゴ

  新サービス開始しました

ノーコードでWordPressサイトが作れる!
WordPressテンプレート新発売!→詳しくはこちら

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

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

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策がしっかり学べるコンテンツマーケティング講座(オンライン開催)

 

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

  ピックアップ記事

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

友だち追加

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

公式メールマガジン

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

PAGE TOP