LION BLOGに対して、hxxk.jpで指定している追加CSS(子テーマのCSSのユーザーカスタマイズエリア)

LION BLOGに対して、hxxk.jpで指定している追加CSS(子テーマのCSSのユーザーカスタマイズエリア)

記事内目次

  1. ユーザーカスタマイズエリアの内容を記事として記録
  2. アイキャッチ画像のscale(拡大・縮小)を無効にする
  3. pre要素のフォントファミリーを等幅にする

ユーザーカスタマイズエリアの内容を記事として記録

WordPressのデザインを編集する3つの方法で、追加CSSを含む3つのデザイン編集方法を紹介・解説しました。

今回は、実際に私がLION BLOGに対してどのような追加CSSを設定しているか(※子テーマを導入したので、現在は子テーマのCSSのユーザーカスタマイズエリアに記述しています)を記録して紹介します。

なお、ユーザーカスタマイズエリアの内容は随時修正していく可能性があるため、この記事に記録するものは全部ではありませんし、適宜追加や修正を行います。特に「何故こうしているのか」を自分でも記録に留めておきたい箇所を重点的に書いていきます。

↑ 記事内目次にもどる

アイキャッチ画像のscale(拡大・縮小)を無効にする

LION BLOGのオリジナルの記述(style.css)
.eyecatch img:hover {transform: scale(1.2);}
ユーザーカスタマイズエリアに記述した内容
/* アイキャッチ画像の1.2倍scaleを無効化 */
.eyecatch img:hover{
  transform: scale(1);
}
参照する仕様

オリジナルでは、アイキャッチ画像(img class="eyecatch")にマウスオーバーしたとき(img:hover)に、transformプロパティで1.2倍に拡大するという指定がされています。

これは個人的には煩わしいと思ったので、ユーザーカスタマイズエリアでtransform: scale(1);と指定して、拡大も縮小もしないようにしました。

ちなみに、transform: none;としても拡大・縮小しないようにできますが、scale以外のtransformプロパティも無効にしてしまうので、scaleの値を1とする方が安全です。

↑ 記事内目次にもどる

pre要素のフォントファミリーを等幅にする

LION BLOGのオリジナルの記述(content.css)
/*整形済みテキスト*/
.content pre{
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "MS Pゴシック", "MS PGothic", "sans-serif";
  font-weight:400;
  font-size:1.4rem;
  margin-top:20px;
  padding:20px;
  background-color: #F2F2F2;
  border-left: solid 5px #191919;
  color:#7F7F7F;
  overflow:auto;
}
ユーザーカスタマイズエリアに記述した内容
/* pre要素は等幅フォントにする */
.content pre{
  font-family: Consolas, "Courier New", Courier, Monaco, monospace;
  font-size: 1.6rem;
}
参照する仕様

ほとんどのブラウザでは、pre要素の内容は等幅フォントで表示されますが、LION BLOGでは何故か「ヒラギノ角ゴシック Pro」や「メイリオ」、「MS Pゴシック」などのプロポーショナルフォントが指定されています。

[CSS]等幅フォントにするためのおすすめのfont-family指定を参考にして、等幅フォントを再指定しました。また、文字サイズが小さいと感じたので、font-sizeも1.4remから1.6remに大きくしています。

余談ですが、フォント名に空白文字を含むものは' 'または" "で囲む必要がありますが、LION BLOGではpre要素以外の部分でも、font-familyのフォント名全てを引用符で囲っています。<generic-family>も囲ってしまっているので、修正すべきです。(参考: CSSでfont familyの値を引用符で囲む時と囲まない時

↑ 記事内目次にもどる