WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

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

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

Canvaバナー おすすめ画像編集ソフトです。当サイトのアイキャッチ画像やバナー、Instagram用の画像や当サイトのチラシもこちらのCanvaで作っていますよ!無料版で十分です。  
無料で予約サイトが作れ、月額課金のサブスクの決済も導入できます。Zoomとも連携し、予約が入るとURLが自動発行される便利機能も無料で使えます。
 カテゴリー
翻訳
PAGE TOP