LinkWithinのフォントサイズを変える！cssのfont-sizeを強制適用

イントロダクション

「LinkWithinのフォントを変える！cssのfont-familyを強制適用」では、LinkWithin の関連記事のタイトルに使用されている標準のフォントを変更し、ブログで使われているフォントと同じものを適用するスタイルシートを作成しました。

今回は、LinkWithin の関連記事のタイトルの文字の大きさを、LinkWithin が指定する標準のサイズから、ブログで使用しているフォントのサイズに変更してみたいと思います。

LinkWithin の関連記事一覧

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

関連記事のタイトルのフォントをブログで使われているフォントに統一したもの
フォントサイズは、LinkWithin が指定する標準サイズ

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

以下の CSS を定義します。

CSS定義

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


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

解説

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

.linkwithin_posts > a > div > .linkwithin_title {

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

    font-size: inherit !important;

フォントサイズとして、親要素のフォントサイズを使用するようにします。

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


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


}

結果

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

LinkWithin の関連記事一覧

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

関連記事のタイトルのフォントをブログで使われているフォントに統一したもの
フォントサイズは、ブログで指定する標準サイズを適用

以上、今回は 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-familyを強制適用 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html