アメブロの強調表示CSSをカスタマイズする

アメブロのCSSをカスタマイズしてオリジナルの強調表示を実現します。

emタグ

emタグは可能な環境ではイタリック体（斜体）で表示されます。

しかし対応しているブラウザやフォントの組み合わせは限られています。

2018年2月現在、Windows10のFirefoxバージョン57.0ではメイリオフォントを斜体で表示しているのが確認できました。

しかしGoogle Chrome バージョン64.0やMicrosoft Edge 41.1などでは斜体表示は行われていません。

この斜体（イタリック体）というのは元々は欧文での強調表示です。

日本語で斜体にしてもいまひとつ強調されているという感じがしません。

このブログで英文などの欧文を書いてイタリック体で強調表示をすることは稀だと思います。

そこでemタグには赤字での表示をさせて、強調であることが分かりやすくなるようにCSSを考えてみました。

.skin-entryBody em {
    color: #f00
}

この中に*強調表示したい部分*があります。

とマークダウンで書くと…

<p>この中に<em>強調表示したい部分</em>があります。</p>

とHTMLに変換され、

この中に強調表示したい部分があります。

と表示されることになります。

strongタグは通常は太字（Bold体）で表示されます。

これはほとんどのブラウザで太字表示されますので、そのままで大丈夫でしょう。

.skin-entryBody strong {
    font-weight: 700
}

この中に**もっと強調表示したい部分**があります。

とマークダウンで書くと…

<p>この中に<strong>もっと強調表示したい部分</strong>があります。</p>

とHTMLに変換され、

この中にもっと強調表示したい部分があります。

と表示されることになります。

これは今までのCSSカスタマイズにより赤太字として表示されます。

この中に***更に強調表示したい部分***があります。

とマークダウンで書くと…

<p>この中に<strong><em>更に強調表示したい部分</em></strong>があります。</p>

とHTMLに変換され、

この中に更に強調表示したい部分があります。

と表示されることになります。

マーカー風の強調表示を導入します。

タグはmarkとします。

.skin-entryBody mark {
    font-weight: 700;
    color: #000;
    background: #ffff99
}

背景色を薄い黄色に設定し、文字色は黒にします。

この中に<mark>マーカーを引きたい部分</mark>があります。

とマークダウンで書くと…

<p>この中に<mark>マーカーを引きたい部分</mark>があります。</p>

とHTMLに変換され、

この中にマーカーを引きたい部分があります。

と表示されることになります。

これだけCSSカスタマイズを施しておけば、後はマークダウン記法でどんどん書いていくことができますね。

便利便利！

と、ここまで書いたのですが何故か今回追加した分だけCSSが適用されません。原因が分かったらまた追加で書きますね。

2018年3月3日追記

CSS設定の記述に誤りがありました。読者さんからの指摘で発覚！←コメントありがとうございます！

強調表示のCSS設定を修正しました。＞の有り無しだけなんですけどね。CSS的には意味はまったく違ってくる。

朝からいろいろと実験やってて見にくくなっていたらゴメンナサイ。でも最初のデザインを久しぶりに見たらびっくり！

なんだかんだ言っても成長しているなぁと感じました。

2,138円

Amazon