賢威のヘッダーにあるタイトル(ロゴ)・文章の横幅を変更する方法


今回は、賢威6.2のヘッダーにあるタイトルや文章などの幅を変更する方法について解説します。

賢威7での変更方法は、以下の記事で解説しています。

→賢威7のタイトルロゴのフォントサイズを変更する方法

賢威6.2のヘッダー領域には、

・トップ(一番上のサイトマップが表示されている箇所)

・タイトルロゴ

・メタディスクリプション

・h1タグ

この4つの要素があり、それぞれの表示領域がCSSで決められています。

なので、タイトルロゴなどの幅だけを変更したい場合でも、隣に表示されているメタディスクリプション(説明文)に干渉してデザインが崩れないかを考慮しながら、フォントサイズ(文字の大きさ)や表示幅の調整をする必要があります。

1

上の画像は、タイトルロゴが隣のメタディスクリプションに干渉して、タイトルが中途半端な箇所で折り返されているのが分かります。

この場合、『タイトルロゴ』『メタディスクリプション』『h1タグ』など、それぞれの表示幅やフォントサイズ(文字の大きさ)を調整する必要があります。

特にヘッダー領域はサイトにアクセスしてきた人が最初に見る部分ですので、レイアウトが崩れていたら直帰(1ページだけ見て離脱すること)されてしまいかねません。

なので、上の画像のようにレイアウトが崩れた時は、それぞれの表示幅やフォントサイズ(文字の大きさ)を変更して見栄えを良くします。

賢威6.2のヘッダータイトルの文章幅を変更する

賢威6.2でタイトルの文章幅を変更して見栄えを良くするには、2通りの方法があります。

1つは横幅を変えて、2段にする方法。タイトルの字の大きさを変えずにレイアウトを整えられますが、2段にしたくない場合はデメリットとなります。

もう1つはタイトルのフォントサイズを小さくする方法。横幅を変えずにタイトルを1行にできますが、少し字が小さくなるデメリットがあります。

そもそもタイトルを短くすればいいだけの話なのですが、せっかく想いを込めて付けたタイトルを変えたくないという事もあります。

なので、ここでは2つの方法を解説します。

2

そのためにはまずワードプレスのダッシュボード→外観→エディター→design.cssに行って、上の画像の赤枠の部分を探してください。

タイトルの横幅を変える

まずはタイトルの横幅を変えます。

上の画像の「タイトルの横幅」と書かれた赤枠の部分がタイトルの横幅を指定していて、今59.5%となっています。

これは以前書いた記事→ワードプレス賢威のサイドバーやメインコンテンツのサイズ横幅を変更する方法と同様です。

「サイト全体の横幅を100%として、タイトルの配置はfloat: left;(左端)を基準とし、そこからタイトルの横幅を59.5%の位置まで広げる」という指示です。

これはデフォルトの設定で限界ギリギリです。これ以上幅を広げると、かえってレイアウトが崩れます。

3

このようになってしまいます(60.5%にしてみました)。

今回の場合は、この数字は59.5%以下にしないと綺麗なレイアウトになりません。

例として56.5%にして見ました。(小数点以下の数字も必ず記載しないとレイアウトが反映されないようです)

4

「まとめ」の文字が下にきて、レイアウトが整いましたね。このようにしてみるのもいいと思います。

フォントサイズを小さくする

次にフォントサイズを小さくする方法です。

始めの画像で「タイトルのフォントサイズ」と書かれた赤枠の部分にあった「font-size: 3em;」の数字を変更すればOKです。

フォントサイズを小さくするので、ここでは「2.7em;」にしてみました(小数点を付け足してもちゃんと反映されます)。

5

ちょうど収まりましたね。

人によってはここのちょうどいい数字は違いますから、上手く調整してください。

サイトの説明文の文章幅を変更する

続いては、タイトルの隣にあるサイトの説明文です。こちらの説明文のCSSはこちらです。

6

タイトルの文章幅を設定をした部分のすぐ下のほうにあります。

こちらも要領は同じです。

まず、画像赤枠の「右上の文章の横幅」と書かれた数字を見てください。

width: 40%;の数字を変更するわけですが、この右上の説明の配置は、「サイト全体の横幅を100%として、タイトルの配置はfloat: right;(右端)を基準とし、そこから文章の横幅を40%の位置まで広げる」という指示です。

こちらも綺麗なレイアウトにするためには数値を40%以下にしないといけません。

今回は分かりやすい例として、半分の20%にしてみます。

するとこうなります。

7

つまり、タイトルの幅59.5%と右上の文章の幅40%の合計が100%を超えない範囲であれば、レイアウトは崩れません。タイトルによっては次の画像のように、タイトルの幅を39.5%、右上の文章の幅を60%にしてもいいわけです。

8

実際に設定するとこうなります。逆にタイトルの幅を79.5%、右上の文章の幅を20%にしてもいいわけです。

9

こうして見ると、CSSって結構単純なんですよ。

h1タイトルの文字の大きさ

ついでなのでh1タイトルの文字の大きさを変えてみます。

10

変更するところは、先ほどのこの画像で、赤枠「h1タイトルのフォントサイズ」の指している「font-size: 1.167em;」の部分です。ここがタイトル下の「h1タイトル」のフォントサイズについて指定している部分です。

この、font-size: 1.167em;の数値を変えてやれば、h1タイトルの文字の大きさを変えることができます。

今回は例として2.167em;にしてみます。

11

こうなりますね。

ヘッダー部分のCSSについては以上になります。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ