>

ブログ運営

WordPressブログサイト名の大きさと文字の間を調整するCSSを紹介します!

 

おにいさん
WordPressでブログをはじめて、早く記事を書きたい

 

どんどん書かないとPV増えないわよ
おねえさん

 

おにいさん
でも、肝心のブログの顔のトップ画面が整ってなくて…

 

そんな細かいこといいから早く記事書きなよ!
おねえさん

 

おにいさん
トップ画面のデザインが気になって、記事を書く気持ちになれないんだよ~

 

本記事を読んでほしい人

  • ブログ初心者でWordPressの設定中の人
  • トップページの見栄えが気になりすぎている人
  • WordPress設定でテキスト入力でシンプルなサイトタイトル画面にしたい人

 

WordPressのブログ名 文字表示の大きさを調節する

 

やっとの思いで

 

  • ドメイン取得
  • サーバー契約
  • WordPressをインストール

 

さあ、これからブログをガシガシ書くぞ!という気持ちなのに、あれ~なかなかうまく進まないよ~。

 

これどうするんだよ~使いにくくてわからない。誰か助けて~。

 

早く記事を書くことに集中したいのに、何とかならないかなとお感じの方もいらっしゃるのではないでしょうか?

 

そんな方のために、今回はトップ画面に表示されるブログ名の文字の大きさ文字の間のスぺースを調整する方法について解説していきます。

 

そもそも、ブログ名がまだ自分のブログ名になっていないという方は、WordPressダッシュボード下の設定から「一般」をクリックしていただいてサイトのタイトル」=これがご自分のブログ名になる場所ですので、そこにご自分の考えているブログ名を入力してくださいね。

 

そしてキャッチフレーズはブログのサブタイトルを入れればいいです。入れなくても結構です。

 

これでトップ画面にご自分のブログ名が表示されるかと思います。

 

クーヤン
おっと、画面下の「変更を保存」をクリックするのを忘れずにお願いします。

 

サイト名の文字の大きさと文字間をするCSS

 

では、さっそくご自身のサイト名をトップ画面のヘッダーに表示させて、文字の大きさ=フォントサイズ、文字と文字の間の幅=レタースペースを調整する方法を解説していきたいと思います。

 

なお、このブログの運営者クーヤはWordPressテーマにafffinger5を使用しています。

 

ではさっそく、ヘッダーにある自分のブログ名の文字のフォントサイズ、それからレタースペースの調整方法について解説していきたいと思います。

 

まずWordPressのダッシュボード画面で「外観」の中の「カスタマイズ」をクリックします左側にいろいろなメニューのある画面が出てきます。

 

左側のメニューの中を下のほうにスクロールしていくと、「CSS追加」という項目が出てきます。ここにしたのコードを貼り付けます。

 

プレゼント

header .sitename {
display: inline-block;
font-size: 27px;
letter-spacing: 3px;
}

 

「追加CSS」の中にコピペをしていただければOKです。このfont-sizeの数字の値を大きくすることでブログ名の文字の大きさを大きくすることができます。

少しずつ数字を変えてみて画面を見ながら調節してみてください。

 

またletter-spacingの数字を大きくすることで、ブログ名の一つ一つの文字の間のスペースの幅をおおきくすることができます。

 

こちらも画面を見ながらバランスを調節していただければよいと思います。

 

どのくらいの大きさが適切かはわかりませんが、パソコンの画面だけではなく、スマホの画面の字の大きさも確認しながら画面全体とブログ名の文字の大きさの全体感を調節していただければよろしいかと思います。

 

いろいろな方のブログのトップ画面を見ながら参考にして、ご自身のイメージにあったトップ画面を作られるとよいと思います。

 

クーヤン
うまくできましたでしょうか?お疲れさまでした。

 

 

  • この記事を書いた人
  • 最新記事

クーヤン・キンポー

アラフィフ l 会社員 l ブロガー2年生
Twitterフォロワー1,000人
ブログ運営ノウハウをズブの素人目線を大事に情報を発信します!

-ブログ運営

© 2021 クーヤンブログ