本記事を読んでほしい人
- ブログ初心者で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の数字を大きくすることで、ブログ名の一つ一つの文字の間のスペースの幅をおおきくすることができます。
こちらも画面を見ながらバランスを調節していただければよいと思います。
どのくらいの大きさが適切かはわかりませんが、パソコンの画面だけではなく、スマホの画面の字の大きさも確認しながら画面全体とブログ名の文字の大きさの全体感を調節していただければよろしいかと思います。
いろいろな方のブログのトップ画面を見ながら参考にして、ご自身のイメージにあったトップ画面を作られるとよいと思います。
