【stinger3カスタマイズ】フォントを変えるまとめ。タイトル、サイドバー、NEWENTRY etc
2014/04/03
フォントは一つ変えたら全部変えたくなります。こだわりです。
ブログ開設１月半でやっとほぼフォントの変更が出来たのでまとめてみました。
目次
記事のフォントを変更する
記事のフォント、文字サイズは読みやすさに大きく影響を与えます。
すごくいいブログなんだけど字が小っさすぎ！っていうブログ良く見かけます。（特にfc2とかライブドアに多い）
stingerはそれらに比べると読みやすいんですがより読みやすく変更しました。アメブロでも使ってましたが「メイリオ」が読みやすくてかわいくてお気に入りです。
変え方は「おっちゃん」のブログが参考になります。
タイトルとその下、キャッチフレーズのフォント
タイトルとその下の文を指定しているのはスタイルシートの「基本のhタグ」の中にあります。
/*—————————–
基本のhタグ
——————————*/
の下にある
/*ブログタイトル*/ からがタイトル部分
/*ブログタイトル下の文*/ からがタイトル下の文を指定しています。
ブログタイトルのフォントを変更する
ブログタイトルを変更するにはブログタイトルをしているコードの一番下（/*ブログタイトル下の文*/のすぐ上）に
font-family: nyala;
を追記します。フォントの種類をお好みで変えて下さい＾＾
Google Fontsを使ってさらにCoolに
フォントはOSごとに表示が変わる場合があります。Google Fonts等、webフォントを使うとどのPCから見ても同じ表示になります。
Google Fontsを使ってStingerをかっこよくカスタマイズ！
を参考に当ブログもGoogle Fontsを利用しています。
タイトル下の文のフォント
タイトル下の文の文字を指定しているのは
/*ブログタイトル下の文*/ の下の方、#h-l .descrから始まる所です。
ブログタイトルと同じ要領で /*記事タイトル*/ のすぐ上に
font-family: フォントの種類;を追記します。
ついでにフォントの大きさを20pxにして文字の太さを太くしました。フォントの種類はメイリオです。
サイドバー、
サイドバー見出しのフォント変更
サイドバー見出し（デフォルトだと最近の投稿とかアーカイブの所）を指定しているのはCSSのサイドカテゴリの中のこの部分。
/*—————————–
サイド
——————————*/
の下のほうにある
/*サイドの各タイトル見出し*/
.menu_underh2 {
margin-bottom: 15px;
margin-top: 20px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 35px;
background-image: url(images/ca3.png);
background-repeat: no-repeat;
background-position: left center;
の一番下に下記を追加するといいです。
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
ちなみにbackground-image: url(images/ca3.png);の（）内を変更することですきな画像に置き換えれます。大きさは大体30pxくらい。
NEW ENTRYのタイトルのフォント変更
NEW ENTRYのタイトルのフォントは
/*———————————
関連記事とか
——————————–*/
の下の方
#topnews div {
padding: 10px;
margin-bottom: 10px;
の下に
font-family: ‘font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
を追記します。
これでだいたいのフォントが変えれるんじゃないかと思います。
これが変更後↓ 所々サイズとか色とかも変えました。
今回何気に力入ってます下手なりに。
合わせて読みたい記事
関連記事
-
-
pocket(Read it Later)がすごく便利だったのでstingerにも追加しました
実は以前からブックマークの管理とかすごく適当でなんかいい方法ないかと思っていてちょっと気になっていたのがpocketというアプリ。 以前はRead it Lat …
-
-
アメブロCSS編集始めの一歩 まずはここから。
スポンサーリンク 目次1 アメブロカスタマイズ始めの一歩1.1 まずはCSS編集用テンプレートを選択1.2 ブログレイアウトはどれがいいか1.3 いよいよCS …
-
-
stinger子テーマ、yukiguniを使ってブログをリニューアル。ヘッダーを横幅いっぱいに。
前々から気になっていた@Daisuke_9taroさんが作成しているstingerの子テーマ、yukiguniを導入してみました。 yukiguniは元々雪国ら …
-
-
【アメブロカスタマイズ】アメブロのヘッダーの位置を下げてStingerっぽくしてみた。
当ブログのテーマ、Stinger３のブログタイトルとヘッダーのレイアウトが気に入っているのでアメブロでもそれっぽくしてみました。 アメブロCSS編集が初めての方 …
-
-
WordPress話題のテーマ、Stinger3をカスタマイズしてみたりしてます。
アメブロと並行して始めたこのブログですがテーマは話題のStinger3を使用しています。 デフォルトでも十分スタイリッシュでかっこいいんですがやっぱり個性を出し …
Comment
[…] APPOLON 【stinger3カスタマイズ】フォントを変えるまとめ。タイトル、サイドバー、NEWENTRY etc […]
[…] ＞＞【stinger3カスタマイズ】フォントを変えるまとめ。タイトル、サイドバー、NEWENTRY etc […]
[…] し本当にPC初心者なので、出来ない場合はもっと詳しい人へ聞いて下さい＾＾；） 以上になります。 今回参考にさせて頂いたサイトは、APOLLON様です。 もしお役に立てていたら幸いです。 […]
[…] […]