Bloggerのテーマをロディアのブロックメモ風にカスタマイズするための手順について、今回はテキストの各種指定の方法を紹介します。ただし、htmlやcssについてはほぼ初心者で、内容はWeb上にある指南記事の寄せ集めなので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あるかと思いますが、そのあたりはどうかご容赦ください。
1. 記事テキストのフォントの色・種類・サイズの変更
管理画面の左のメニューから、テーマ ⇒ カスタマイズ ⇒ Bloggerテーマデザイナー ⇒ 上級者向け ⇒ ページのテキストと選択することでテキストのフォント種類・フォントサイズ・テキストカラーを指定できるようになります。変更の結果は画面下にプレビューされるので、確認しながら選択すると良いでしょう。
上の画像で見られるように初期設定では『字が小さすぎて読めない！（渡辺謙）』状態だったのでフォントサイズを16pxと少し大きくしました。
2. テーマデザイナーにないフォントの使用
記事テキストでテーマデザイナーにないフォントを使用したり、フォントサイズを細かく指定するにはhtmlを書き換える必要があります。管理画面左のメニューからテーマ ⇒ HTMLの編集を選ぶとhtml編集画面が表示されるので、最近流行りの游ゴシックやメイリオを使用する場合には、20行目あたりにあるvalue=の後ろにフォント名を書き加えます。同時に同じところでフォントサイズも指定できます。
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px '游ゴシック',メイリオ,Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
プレビューで指定通りにフォントが変更されているのを確認した後、更新で保存します。（※注）保存後、'游ゴシック'と入力したものは自動的に'游ゴシック'に書き換えられます。
3. 記事テキストの行間の指定
Bloggerの初期設定の行間は日本語表記には詰まりすぎているように思います。個人的好みで言えば、行間を指定するline-heightの値は1.6から1.8くらいが読みやすいのではないかと思います。400行目前後のline-heightの値を書き換えることで、記事テキストの行間を変更できます。
font-size: 110%;
/* 行間変更 */
line-height: 1.75;
position: relative;
}
4. 見出しのデザイン
Bloggerの記事作成画面で指定できるのは見出し・小見出し・準見出しの３種類で、それぞれ<h2>、<h3>、<h4>に対応しています。このうち小見出しは記事タイトルにも使われています。
初期設定のままでは、テキストのサイズが大きくなって、太字になるだけなので視認性的にもイマイチなので少しデザインを変えてみましょう。見出しのデザインは「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」が参考になると思います。
まず、上のサイトにあるデザインの中の「下線」と「左線」を組み合わせて、下のようなコードを作成します。次に、管理画面左のメニューからテーマ ⇒ HTMLの編集を選ぶとhtml編集画面が表示されるので、240行目あたり、コンテンツの最後の部分に書き加えます。
h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 15px #7db4e6;/*左線*/
border-bottom: solid 3px #7db4e6;/*線の種類（実線）*/
}
h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 10px #7db4e6;/*左線*/
border-bottom: solid 3px #7db4e6;/*線の種類（実線）*/
}
結果は下のようになります。
5. 変更の確認と保存
「テーマをプレビュー」でテキストが指定したとおりに表示されているのを確認した後、「テーマを保存」する。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認する。
6. テーマのバックアップ
ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ／復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。
