かなり久しぶりの更新です。
5ヵ月ぶりくらい？
というわけで心機一転、テーマを変えたので紹介しようと思います。
Brittany Light
今回採用したテーマはBrittany Lightです。→デモサイト
シンプルで高性能、デザイン性が高いテーマ。
変えたばっかりですが、とりあえずの感触はいいかんじです。
まずは外観→ウィジェットからサイドバーの設定をします。ここは他のテーマと同様なので省略。
これでもう使える状態にはなったんですが、何か所か気になるところがあったのでカスタマイズしていきます。
CSSでカスタマイズする
サムネイル表示を改善する
初期状態ではこんな感じ、サムネイルの高さが決まっていて、それに合わせて縮小された画像が左に寄っています。
真ん中を切り取って拡大してほしい。。
どこかで設定できるのかもしれないのですが、探すのも面倒だし戻すときも面倒だと思うので、カスタムCSSで対応します。
カスタムCSSの設定は外観→カスタマイズからできます。
.entry-thumb > a {
display: block;
position: relative; }
.entry-thumb > a:before {
content: '';
display: block;
padding-top: 60%; }
.entry-thumb > a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
上記が修正用のCSSです。
Scssをコンパイルしたものなので、見にくくて申し訳ないです。
これはよくある疑似要素を利用した縦横比を維持するやり方です。
（でもよく考えたらwidth100%にしてobject-fit:coverにすればよかっただけですね。。まいっか。）
これが修正後です。これでどんな画像を設定しても一様に表示されます。
コメント件数を非表示にする
次に気になったのはコメント件数の表示です。
「コメントはまだありません」って表示されるのは嫌じゃないですか。なので消します
a.entry-comments-no {
display: none; }
CSSはシンプルです。display:none;で消します。解決。
フォントを設定
海外製のテーマなので日本語のフォントが設定されていません。
html > body{
font-family: "Work Sans", "sans-serif","游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
}
これで日本語には游ゴシックが適用されます。
!importantはできるだけ使いたくないので、html > bodyとしています。
さいごに
とりあえずはこんな感じです。また気になったことがあったら追加していこうと思います。