Emporioサイトでフォント調整のため設定した、実際のCSS定義を公開する
テーマEmporioを使ったサイトをこれまで2つ作ったのだが、おかげでEmporioのフォント調整についてかなり経験が積めた。
今では
というのが確立されたので、参考までに紹介する。
解説がいらないという人は、実際に自分のEmporioサイトで使われてるコードを載せてますので「実際のCSS定義」までズギャンと行っちゃってください(・∀・)
ここではそのカスタマイズのポイントを解説する。
実際のCSSは後述しますが、ここで挙げたカスタマイズはすべてテーマデザイナーからCSSを追加することで実装可能です。
という問題があると思う。
対処の詳細は以下にまとめたので参照してほしい。
要するにフォントは全部メイリオに、画像キャプションの文字は小さく変更した。
のが不格好に思えた。
ので、文字を小さく設定し、センタリングも左寄せに変更。
ことにした。
CSS自体は別に難しくないが、適用範囲を抑えるのが多少ひっかかる。
範囲を気にせず適用すると、サイドバーにあるガジェット（「人気の記事」とか）のタイトルまで水色の線が出たりして不格好になる。
大見出し・小見出しのデザインを本文のhタグだけに適用する方法については以下を参照してください。
やり方は以下を参考にしたが、
基本的に上記に書いてるままで動く。
ちなみに最初の2つの書き換えが
の日付表示と対応しており、最後の1つは
に対応している。
ただ、このままのやり方だとフォントを全体にメイリオにしている関係で、公開日・更新日までそうなってしまった。
本来より大きくクッキリ目立ってウルサいので、これもCSSでデザインを適用。
ただメイリオの設定とぶつかるので、CSS定義の順番が重要となる。
CSS定義で、公開日・更新日のデザインの後にメイリオの設定を書いておくとうまくいった。
テーマデザイナーのCSS追加でコピペすると、フォントや見出しが変更されて我がブログ「GET A LIFE in Khmer!」「おとなになってからの英語学習」と同じルック＆フィールになりますよ(・∀・)
/*公開・更新日時のデザイン*/
.date-published{
color:#666666;
font-size:12px;
}
/*フォントをメイリオにする*/
* { font-family: meiryo,メイリオ,"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif !important; }
/*画像キャプションのフォント小さく*/
.tr-caption {
color: $(picture.caption.text.color);
font: $(picture.caption.font);
font-size: 12.8px; /*←*/
font-style: italic;
}
/* 引用の文字のサイズ、行またぎは左詰め */
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:16px;
font-style:italic;
font-weight:300;
text-align:left
}
/*見出しのデザイン*/
.entry-content h2 {
font-size: 1.5em
}
/*小見出しのデザイン*/
.entry-content h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
margin-bottom: 12px;
}
でもテーマデザイナーで設定するのもできそうに思う。
/*リンクのフォント*/
.entry-content a:link {
text-decoration:none;
color: $(link.color);
font-size: 18px;
}
フォントのメイリオへの変更：
更新日時の設定：
CSSデザイン例：
クラスやフォントサイズといった基礎知識：
例によって、有用な情報を公開してくださった方々に感謝します m(_ _)m
BloggerでCSSを追加する方法についてはこちら
BloggerでCSSを追加してフォントを調整する基本戦略
今では
Emporioを使うならフォント設定はこのワンセットだろう！
というのが確立されたので、参考までに紹介する。
解説がいらないという人は、実際に自分のEmporioサイトで使われてるコードを載せてますので「実際のCSS定義」までズギャンと行っちゃってください(・∀・)
Emporio、フォントのカスタマイズ方針
Emporioを使ったブログでは、デフォルトのフォントが気に入らず、いろいろ細かなカスタマイズをしている。ここではそのカスタマイズのポイントを解説する。
実際のCSSは後述しますが、ここで挙げたカスタマイズはすべてテーマデザイナーからCSSを追加することで実装可能です。
記事内のフォント
Emporioの記事内のフォントは、- 記事本文のフォントがかすれてる
- 画像キャプションの文字がやけにでかい
という問題があると思う。
対処の詳細は以下にまとめたので参照してほしい。
>> Emporio、テンプレートデザイナーでできないフォント調整とその対処
要するにフォントは全部メイリオに、画像キャプションの文字は小さく変更した。
引用のデザイン
引用に関しても、- 本文より文字がでかい
- 引用が行をまたぐと文字列がセンタリングされる
のが不格好に思えた。
ので、文字を小さく設定し、センタリングも左寄せに変更。
見出しのデザイン
見出しについては- 大見出しは大きく
- 小見出しは左に水色の線を入れる
ことにした。
CSS自体は別に難しくないが、適用範囲を抑えるのが多少ひっかかる。
範囲を気にせず適用すると、サイドバーにあるガジェット（「人気の記事」とか）のタイトルまで水色の線が出たりして不格好になる。
大見出し・小見出しのデザインを本文のhタグだけに適用する方法については以下を参照してください。
>> BloggerでCSSを追加してフォントを調整する基本戦略
公開・更新日時のフォント
Emporioはデフォルトで記事の公開日だけしか出ないが、SEO的な関心もあって更新日を入れることにした。やり方は以下を参考にしたが、
>> Bloggerのテーマ「Emporio」で公開日と更新日を表示する方法
基本的に上記に書いてるままで動く。
ちなみに最初の2つの書き換えが
- トップに出る注目の記事
- トップに並ぶ各記事
の日付表示と対応しており、最後の1つは
- 個別記事の日付
に対応している。
ただ、このままのやり方だとフォントを全体にメイリオにしている関係で、公開日・更新日までそうなってしまった。
本来より大きくクッキリ目立ってウルサいので、これもCSSでデザインを適用。
ただメイリオの設定とぶつかるので、CSS定義の順番が重要となる。
CSS定義で、公開日・更新日のデザインの後にメイリオの設定を書いておくとうまくいった。
実際のCSSを公開！
というわけで上記を実装したCSS定義を公開する。テーマデザイナーのCSS追加でコピペすると、フォントや見出しが変更されて我がブログ「GET A LIFE in Khmer!」「おとなになってからの英語学習」と同じルック＆フィールになりますよ(・∀・)
実際のCSS定義
というわけで以下、実際に使っているコード↓/*公開・更新日時のデザイン*/
.date-published{
color:#666666;
font-size:12px;
}
/*フォントをメイリオにする*/
* { font-family: meiryo,メイリオ,"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif !important; }
/*画像キャプションのフォント小さく*/
.tr-caption {
color: $(picture.caption.text.color);
font: $(picture.caption.font);
font-size: 12.8px; /*←*/
font-style: italic;
}
/* 引用の文字のサイズ、行またぎは左詰め */
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:16px;
font-style:italic;
font-weight:300;
text-align:left
}
/*見出しのデザイン*/
.entry-content h2 {
font-size: 1.5em
}
/*小見出しのデザイン*/
.entry-content h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
margin-bottom: 12px;
}
おまけ、リンクのフォント設定
また自分は結局使ってないが、本文内のリンクのフォントも以下の感じで設定できるはず。でもテーマデザイナーで設定するのもできそうに思う。
/*リンクのフォント*/
.entry-content a:link {
text-decoration:none;
color: $(link.color);
font-size: 18px;
}
参考サイト
Emporioでフォント関係をカスタマイズするために参考にしたサイトは以下の通り。フォントのメイリオへの変更：
>> Bloggerでブログ全体のフォントをメイリオに変更したのでメモ
更新日時の設定：
>> Bloggerのテーマ「Emporio」で公開日と更新日を表示する方法
CSSデザイン例：
>> CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
クラスやフォントサイズといった基礎知識：
>> Htmlのタグでclassの意味がわかりません。class="クラス名"す... - Yahoo!知恵袋
>> あなたはどれにする？CSSの文字サイズ指定「px、em、%」 | デザインメモ
例によって、有用な情報を公開してくださった方々に感謝します m(_ _)m
BloggerでCSSを追加する方法についてはこちら
BloggerでCSSを追加してフォントを調整する基本戦略
|
|
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/155a064f.28e3a052.155a0650.d8d39a49/?me_id=1278256&item_id=17318650&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F9925%2F2000006229925.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F9925%2F2000006229925.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
コメント
コメントを投稿