投稿ページのタイトルを変更する方法

賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、そのノウハウを余すことなく詰め込んだ、SEOテンプレートパックです。

みなさん、こんにちは。今回は、word pressテーマである「賢威テーマ」の投稿ページ(個別ページ)のタイトル文字サイズを変更する方法をご紹介します。

賢威7の文字サイズは少し大きい設定になっているので小さくしてみました。投稿ページの文字サイズを変更すると、TOPページやカテゴリーページ(記事一覧ページ)の文字サイズも一緒に変更されるので、サイト全体のバランスをみて変更するようにしてください。それでは投稿ページタイトルの文字サイズと文字カラーを変更していきます。

投稿ページのカスタマイズ前

投稿ページのカスタマイズ後

賢威テンプレートのタイトル

一覧ページのカスタマイズ前

一覧ページのカスタマイズ後

タイトル文字サイズが大きすぎてバランスが悪いので、小さくしてみたいと思います。文字サイズはbece.CSSで変更できます。

CSSファイル(bece.CSS)を編集する

wordpress管理画面の左メニューの外観➡テーマ編集➡bece.CSSを開き「ctrl+F」で「記事タイトル」と検索してください。1310行目辺りに下記コードがあります。

/*記事タイトルや基本単位毎の最初の見出し*/
.section-wrap .section-title{
	line-height: 1.5;
	margin: 0 0 0em;
	border: none;
	background: transparent;
	color: #FF9900;
	font-size: 2em;
	border-top: 0px solid #485859;
	border-bottom: 0px solid #dde1e1;
        font-weight: bold;
	padding: 10px 0 10px ;
	position: relative;
}

文字サイズを変更するには上記コードの

font-size: 2em;

カラーを変更するには

color: #FF9900;

を変更します。

文字サイズを小さく「2em➡1.3em」に変更してみました。文字カラーは「オレンジから青」に変更しました。

記事ページの変更後

一覧ページの変更後

上記変更後を見て頂くと分かるように、投稿ページのタイトルと一覧ページのタイトル文字は同じコードなため、どちらも変更されます。「2em➡1.3em」に変更すると、一覧ページのバランスは良いのですが、投稿ページの文字サイズは小さすぎる。バランスが悪いので投稿ページのタイトルだけ文字サイズを変更しましょう。

CSSにコードを追加

bece.CSSの分かりやすい場所に下記コードを追加してください。投稿ページタイトルの文字サイズだけ「1.3em➡1.7em」へ変更します。

.single .main-conts .section-wrap .section-title {
font-size: 1.7em;
}

記事ページの変更後

どちらのタイトル文字もバランス良くまとまりました。

Google Chromeを使っているとCSSを更新しても変更されない場合がございます。そんな時は、別のブラウザで更新を確認するかクロームの履歴を削除して確認してください。如何でしょうか?どちらの文字サイズも変更できましたか?「賢威テーマ」の投稿ページタイトル、一覧ページのタイトルの文字サイズとカラーを変更する方法をご紹介しました。

最後まで読んで頂きありがとうございました。

賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、ノウハウを余すことなく詰め込んだSEOテンプレートパックです。当サイトは賢威テーマで構築しております。




WEB運営・制作ディレクター

この記事のライター:BUTTER

Googleストリートビュー撮影、WEBサイト制作(WordPress)、デジタルマーケティング、モールテックス小物のハンドメイドをしております。中小企業の社長様から個人事業主の方までお仕事のご依頼を頂き、WEBサイト制作(ポータルサイト・メディアサイト・ECサイト)、楽天サイト制作、楽天サイト運営、店内ストリートビュー撮影、Google広告、Yahoo広告、SNS広告運用を担当させて頂きました。趣味:モールテックスDIY、ローカルガイド撮影、音楽観賞。

リンクツリー ツイッター インスタグラム

 

PR