2016年04月04日

さくらブログのフォント変更方法

スポンサーリンク

さくらブログを始めて、まず気になるのが記事内の文字の大きさです。
文章を書いてみると解りますが、テンプレートのままだと、字が細かすぎてゴチャッとする印象です。

パッと見で文字がぎっしりあると、読む気にならないな〜と感じるのは私だけでは無いはず。

文字が小さいと縦の長さが抑えられますので、スクロールなしで読めるというメリットもありますが、ブログは文字を読むもの。
せっかく来ていただいた方に、読みづらいと感じさせてしまうのは、好ましくありません。

私もネット技術を調べる時に、検索で諸先輩方のブログやホームページを参考にさせていただいています。
本当に貴重な情報が書かれているサイトもあり、感謝と尊敬をしていますが、超細かい字で書かれていて目がショボショボする事が少なくないです。

初心者であればあるほど、こういったパッと見小難しそうな細かい文字サイトは読みづらいはずです。

そこで、まず最初にブログ全体の文字サイズを変えて読みやすくします。

この記事は、テンプレート「さくらブログの超シンプル(右サイドバー)」を使用している場合の解説となります。
基本的に、どのテンプレートでも同じようにカスタマイズ出来るはずですが、テンプレートによってコードや場所が違うかも知れません。
元のコードを全部コピーして、テキストエディタに貼り付けて保存しておきましょう。
バックアップを取っておけば、改造に失敗しても戻す事が出来ます。

さくらブログの【デザイン】→【デザイン設定】→適応されているテーマタイトルをクリックします。
すると、下のような文字から始まるコードが書かれたページが表示されると思います。

 /* font size & font family */
 body                        {font-family:"MS Pゴシック";font-size:small;}
 #banner                     {font-family:"Verdana" sans-serif;}
 #banner h1 a                {font-size:x-large;}
     ・
     ・
  (以下、ずっと下まで続いてますが省略)

コードがズラズラっと書かれていますが、気にしないでください。

今は、内容を細かく見る必要はありません。
カスタマイズを幾つかやって慣れてくれば、どれが何の設定か解るようになると思います。

実は、私も正直全ては把握してません。HAHAHA!

このコード群は、Cascading Style Sheets(カスケーディングスタイルシート)と言います。
一般的にCSS(シーエスエスとかスタイルシート)と呼ばれます。
CSSは、文字の大きさや装飾などのパーツやページ全体の幅などの、見た目を指示しています。

今すぐブログ幅を変えたい、せっかちさんは下記からどうぞ。

本来は、文字の大きさを指定している部分を直接書き換えた方が良いのですが、今回は後々でも簡単に再変更できるよう、一番下に追記していく方法で文字の大きさを設定します。

CSSの一番下までスクロールして、下記を追加しましょう。

/* ▼文字の大きさ変更▼ */
body{
font-size:16px; /* 大きさ変更 */
color:#3F3F3F; /* 色の変更 */
line-height:180%; /* 記事の行間設定 */
}
/* ▲文字の大きさ変更、ここまで▲ */

/* 〜説明文〜 */ この記号は、コメントアウトといって説明文を書いている部分です。
この記号の間にある文字は、プログラムが実行される際に読み込みませんので、自由にコメントを書く事が出来るものです。

コメントアウトは、実際のプログラムには必要ありませんが、後で「これ何のコードだった?」となるのが防げますので、初心者の方は一緒にコピペしておいた方が良いです。
説明文は、お好きなように書き換えてください。


追記が出来たら下にある【プレビュー】ボタンを押して確認してください。
気に入らなければ、font-size:の数値を変えてお好みのサイズにしてください。

色は、カラーコードというパソコンで使用できる文字色で指定します。
下地が真っ白の場合、文字が真黒だと目がチカチカして読みづらいです。
なので、私は薄いグレーにしています。

カラーコードと検索すれば、カラーコードと色がセットで表示されている色見本ページがいっぱい出てきます。
下記サイトでは、カラーピッカーで色を選ぶとコードが表示され便利です。
好きな色のコードをそのまま使用してください。


文字を大きくするとブログ内全ての文字が大きくなると思います。
どれくらいの大きさが読みやすいかは、ターゲットの年齢にもよります。
そのような点も踏まえ、良い感じに調整してください。

行の間隔調整

文字の大きさが、大きくなったので行と行の間隔がちょっと狭く感じるようになりました。
そこで、行と行の間をどれくらい開けるかを設定しているところを探します。

実は、まだ上記で設定したline-height:180%;という設定がまだ効いていません!
ブログタイトル部分にしか、効いていない状態です。

何故か、基本デザイン設定の中にあるコードが邪魔しているようです。
そこで、デフォルトの行間設定をコメントアウト(オフに)してしまいましょう。

/.blogbody{
margin-bottom:0px;
}
h3.title{
margin:0 0px 10px;
padding:0px 0px 3px 0px;
この文字列を探してください。
上から4分の1くらいのところにあるはずです。

「.blogbody{ 」 の下を見て行くと「.text{ 」というまとまりのコードがあります。
	.text{
margin:0 0 0 0px;
color:inherit;
padding:0px 15px 10px 0px;
/*line-height:1.5; ▼記事の行間設定-オフ▲ */
font-weight:normal;
background-color:#fff;
min-height: 1px;
}

「.text{ 」の中に「line-height:1.5;」という部分がありますので、この行のみコメントアウトします。
消しちゃっても構わないのですが、戻せるようにコメントアウトしておきます。

コメントアウトするには、/* */ でオフしたい部分を囲みます。
(例:/* ここはオフされます */ )


このブログでは、1.5という設定をオフにして、最初に追加したCSSで180%という設定しています。
line-height:の数値は、1.5でも150%;でも同じ隙間になります。

この.text{ が本来のブログ記事に関する設定なので、ここに先ほどの文字の大きさを設定するコードを追加してあげても構いません。
その場合は、ブログ記事のみ文字が大きくなります。

私は、面倒なので一気に全部の文字を大きくしています。

記事タイトルの文字サイズ変更

記事の文字サイズを変更したので、記事タイトルが小さく見えます。
記事のタイトルを大きく変更します。

下記を、CSSの一番下に追加してください。
/* ▼-----記事タイトル文字サイズと色変更-----▼ */
.title{
font-size: 22px; /* 文字の大きさ */
}
.title a {
color: #000; /* 文字の色 */
text-decoration: none; /* アンダーライン無し */
}
.title a:hover{
color:#949494; /* カーソルが乗った時の色 */
text-decoration: underline; /* アンダーラインあり */
}
/* ▲-----記事タイトル文字サイズと色変更、ここまで-----▲ */

.titleで、記事タイトルの文字を、14pxから22pxに変更。
.title aで、記事タイトルの色指定とアンダーライン消してます。
リンクのアンダーラインを全て消している場合、ここでのアンダーラインなしは必要ありませんが、あっても不具合は無いので、一応記載しておきます。
.title a:hoverで、記事タイトルにカーソルが乗った時の色を変更して、アンダーラインを付けてます。


記事タイトルの設定が出来ましたので、もともとある記事タイトルの設定を一応コメントアウトしておきます。
先ほど、探した「.blogbody{ 」の中の必要無いものをオフします。
.blogbody{
margin-bottom:0px;
}
h3.title{
margin:0 0px 10px;
padding:0px 0px 3px 0px;
line-height:1.5;
/* font-size:14px; ▼フォントのサイズ-オフ▲ */
/* color:#E7142D; ▼フォントの色-オフ▲ */
font-weight:bold;
border-bottom:dotted 2px #333; /* ▼タイトル下のライン1pxから2pxに変更▲ */
}
フォントサイズとカラーをコメントアウトしています。
ついでに、記事タイトル下の点線も太く変更しました。

フォントの設定

さくらブログに最初から設定されているフォントは、少し読みづらいです。
文字の大きさや行間設定ついでに、フォント自体も変更してみましょう。

これは、あちこちで紹介されてるフォント設定です。
/* ▼フォント変更▼ */
body {
font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande",
"Lucida Sans Unicode", Arial, Verdana, sans-serif;
text-rendering: optimizeLegibility;
}
/* ▲フォント変更、ここまで▲ */

先ずはメイリオで表示して、ダメならヒラギノで表示して・・・みたいな感じです。
これも難しい事は考えずに、CSSの一番下にコピペすれば良いです。
プレビューして見てみてください。

満足な状態なら保存ボタンを押してセーブしておきましょう。

お疲れさまでした!

スポンサーリンク
posted by ノービス at 07:36 | Comment(0) | さくらブログ カスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: