LinkWithinのフォントを変える！cssのfont-familyを強制適用

イントロダクション

「LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！」では、スタイルシートを作成して、LinkWithin の関連記事一覧を標準の横方向の表示から、縦方向の表示への変更してみました。

そうして縦方向に表示した LinkWithin の関連記事の一覧表示は次のようになりました。

LinkWithin の関連記事一覧
CSS を適用することによって、縦方向に表示されるようになった

さて、そうして表示された LinkWithin の関連記事一覧を見てみると、関連記事のタイトルのフォントがブログで適用しているフォントとは異なっていることが分かります。

LinkWithin の関連記事タイトルのフォント

このブログでは、「ストレスなく文章が読めるブログを作る！CSSでfont-familyを指定しよう！」のときに紹介した、文字の輪郭が滑らかになるフォントを使用しています。

そのため、LinkWithin の関連記事のタイトルの文字の部分だけ、文字の輪郭がギザギザしている状態になっています。

今回は、LinkWithin の関連記事のタイトルの文字にも、ブログ内で適用しているのと同じフォントを適用するように、スタイルシートを定義したいと思います。

LinkWithin の関連記事のタイトルの文字にも、ブログ内で適用しているのと同じフォントを適用

以下の CSS を定義します。

CSS定義

.linkwithin_posts > a > div > .linkwithin_title {
    font-family: inherit !important;
}

この CSS を head タグ内の style タグ 内などに貼り付けます。

解説

各 CSS の意味は次のようになります。

.linkwithin_posts > a > div > .linkwithin_title {

LinkWithin の記事タイトル部分にスタイルを適用します。

    font-family: inherit !important;

フォントファミリーとして、親要素のフォントを使用するようにします。

標準では、font-family として arial が適用されているので、 inherit を !important によって強制的に適用しています。


font-family と inherit については、以下のページが参考になります。

font-family - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-family

inherit - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/inherit

また、もし、LinkWithin の関連記事のタイトルの部分だけ、フォントを違うものに変えたい場合には、上記の CSS で inherit としている部分に、適用したいフォントの名前を記載すればよいわけです。

指定の仕方は、「ストレスなく文章が読めるブログを作る！CSSでfont-familyを指定しよう！」を参考にしてください。

}

結果

上記のを反映させると、LinkWithin の関連記事のタイトルのフォントが、ブログ内で適用されているフォントに変わりました。

LinkWithin の関連記事一覧

CSS を適用することによって、縦方向に表示されるようになった後に、

関連記事のタイトルのフォントをブログで使われているフォントに統一したもの

関連記事のタイトル部分のみを抜き出して、拡大して変更後と変更前を比べてみると、その違いは一目瞭然です。

LinkWithin の関連記事タイトルのフォント（変更後）

LinkWithin の関連記事タイトルのフォント（変更前）

以上、今回は LinkWithin のフォントをスタイルシートによって変更するというお話でした。

関連記事

LinkWithinの記事一覧を横ではなく縦に表示したい！CSS変更でやってみた！ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-vertical.html

LinkWithinの関連記事一覧を階段状に表示できた！？偶然の産物です - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-stepwise.html

LinkWithinのフォントサイズを変える！cssのfont-sizeを強制適用 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font-size.html