hxxk.jp

法令や制度（特に税制など）や、Web（HTML/CSS、WordPress）などの情報を深く掘り下げながら記録するweblog

NEW ARTICLE
出張査定業者の訪問を受けたので、注意点をシェア
  • LION BLOGに対して、hxxk.jpで指定している追加CSS（子テーマのCSSのユーザーカスタマイズエリア）

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

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

記事内目次

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

Advertisement

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

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 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」や「メイリオ」、「ＭＳ Ｐゴシック」などのプロポーショナルフォントが指定されています。

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

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

↑ 記事内目次にもどる

Google AdSense関係の指定

ユーザーカスタマイズエリアに記述した内容
ins[datetime]::before {
  content: " ( " attr(datetime) "\0020\008ffd\008a18\0020 ) ";
}

del[datetime]::before {
  text-decoration: none;
  content: " ( " attr(datetime) "\0020\004fee\006b63\0020 ) ";
}

/* Google AdSenseはinsでマークアップされて挿入されるため、指定を上書き */
ins.adsbygoogle::before {
    content: none;
}

/* Google AdSenseの記事内広告の上下にmarginをとる */
div.adPost {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
参照記事

Google AdSense関係は何故このような記述にしているかはそれぞれ別に記事を作っていますので、そちらを参照してください。

↑ 記事内目次にもどる