日付け表示の選択
変更するのは3か所です。
- Blogger管理画面の左のメニューの「設定」をクリック
- その下の「言語と形式」をクリック
- 右側に表示される「フォーマット」の下の「日付ヘッダーのフォーマット」「コメントのタイムスタンプの形式」
- 左のメニューの「レイアウト」をクリック
- 右側に表示される四角の中の「ブログの投稿」の右下の「編集」、またはペンのアイコンをクリック
- 表示されるウインドウ内、日付けが書かれたドロップダウンリスト
３か所ともドロップダウンリストになっており、いろいろと選択ができるのですが…。
現実問題、日本語ブログで使えるのは
- 2019年1月19日
- 2019年1月19日土曜日
のどちらかだと思うんですよね。part1にも書きましたが「月」は書かれてて「日」が書いてないのは違和感すごいし、月日が「01」とか頭にゼロついて書かれてるのも一般の日本人には馴染まないですよね…。
というわけで、上記どちらかを選んでください。
ただし。下の画像をご覧ください。大きなフォントサイズで、まる文字で日付けが表示されてますよね？
実はこれ、Webフォントなんです。
Bloggerではかなりの種類のWebフォントがすぐに使えるようになっています。通常はCSSの書き換えなどが必要なのですが、Bloggerではメニューの中から選ぶだけでOK。
ただし日本語フォントはありません。まあ、日本語Webフォントが簡単に選択できるようになったら、何も知らない初心者が何種類も使いまくった挙句ブログが激重になりしかし初心者本人にはその理由がわからず「Bloggerチョー重い使えなーい」となる未来が目に見えてますからね…。仕方ない。
というわけで、半角英数字のみいろいろなWebフォントが適用されます。
従って日本語ブログでは本文には使えませんが、例えば「ブログのタイトルを英語にしてタイトル文字のみWebフォント」「日付けを半角英数字表示にして日付けのみWebフォント」という使い方なら可能です。
 |
| 日付け表示はWebフォント'LUCKIEST GUY' |
その場合、日付け表示は「1/18/2019」「1.18.2019」などをセレクトするといいですね。
なお、Notableなど一部のテーマでは、投稿の日付けに「2019年1月19日」形式を選択できませんので、必然的に半角英数字を選ぶことになります…。
タイトルでの使用例はSakura Sims BlogのタイトルがWebフォントを使ってるのでご参考に。
では次はそのフォントの指定のしかたです。
フォントの修正
- Blogger管理画面の左のメニューの「テーマ」をクリック
- ブログのプレビュー画像の下にある「カスタマイズ」ボタンをクリック。すると「Blogger テーマ デザイナー」が開きます
- 左のメニューの「上級者向け」をクリック。右隣にメニューが現れる
- 上から1つずつクリックして、フォントを選択するタブ(画像の赤丸でかこんでいるタブ)が表示されたらすべて「Arial」を選択。
- 画面下のプレビューを見て確認
- 右上の「ブログに適用」をクリックして終了
テーマによっては横にズラズラと長くタブが出るので、スクロールバーを横に動かして確認することをお忘れなく。
Webフォントを選択する
タイトルや日付けなど部分的にWebフォントを利用する場合は、それも名称がマチマチなので1つずつクリックしては下のプレビューを確認し、目的の個所が変更されるタブを見つけてください。
タイトルは「ブログのタイトル」などわかりやすいのですが、日付けは本当にバラバラです。
Notableではご覧のように、「フィード」の中の「投稿のサブタイトルのフォント」が日付けです。
以上2点の修正を行うとこうなります。Notableの例です。
 |
| デフォルト状態 |
 |
| 日付け表示とフォントを修正 |
これでようやく普通に読みやすいブログが完成！
…かと思いきや、テーマによってはもう1か所気になるところが。
これはエスィリアルのデフォルト状態。
読む人にギッチリして狭苦しい印象を与えてしまいます。
写真がメインでテキストはちょっと解説を書くくらいならいいかもしれませんが、文章メインのブログでこんなにギッチリでは読む気が減退してしまいます。
本文の文字サイズの修正
- Blogger管理画面の左のメニューの「テーマ」をクリック
- ブログのプレビュー画像の下にある「カスタマイズ」ボタンをクリック。すると「Blogger テーマ デザイナー」が開きます
- 左のメニューの「上級者向け」をクリック。右隣にメニューが現れる
- メニューの中から「Body Text(エスィリアル)」や「ページ(Awesome Inc.)」などをクリックして投稿の本文を指定するタブを探す
- 本文のフォントを選択するタブの下にある「〇px」と書かれたタブで文字サイズを変更。下のプレビューで確認
- 右上の「ブログに適用」をクリックして終了
カッコ良さと読みやすさのバランスを考えて調整してみてください。
本文の行間の修正
 |
| フォントサイズ14px、行間200%を指定 |
- Blogger管理画面の左のメニューの「テーマ」をクリック
- ブログのプレビュー画像の下にある「カスタマイズ」ボタンをクリック。すると「Blogger テーマ デザイナー」が開きます
- 左のメニューの「上級者向け」をクリック。右隣にメニューが現れる
- メニューの一番下の「CSSを追加」をクリック
- 表示された白枠内に下記のコードをコピー&ペーストしてエンターキーを押す。
- 下のプレビューで確認しつつ調整
- 右上の「ブログに適用」をクリックして終了
div.entry-content
{
line-height: 200%;
}
200%の数字は、お好みにあわせて150%、175%などを入れてみてください。中途半端な数字はあまりおすすめしません。
フォントはすっきり、行間も適度にあいて読みやすくなりました。
では次はようやくカスタマイズっぽいカスタマイズ、背景の設定にいきましょう。
→part4へ
コメントをどうぞ。コメントは管理者が確認の後、表示されます