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


賢威のヘッダーにあるタイトルや文章などの幅を変更したいと思うときがあると思います。

1

当サイトのデフォルトの状態だと、この様にタイトルの文章が長くなって、下に文章がはみ出ているのが分かります。特にヘッダー領域はサイトにアクセスしてきた人が最初に見る部分ですから、レイアウトが崩れていたら直帰(1ページだけ見て離脱すること)されてしまいかねません。

なので、文章によってレイアウトが崩れた時は、CSSファイルを変更して見栄えを良くしましょう。

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

タイトルの文章幅を変更して見栄えを良くするには、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については以上になります。

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ