無料のおすすめWPテーマ「Brittany Light」を紹介!

かなり久しぶりの更新です。

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としています。

さいごに

とりあえずはこんな感じです。また気になったことがあったら追加していこうと思います。



													

Related Posts