自分でする細かいデザイン、CSSカスタマイズです。Lion Mediaの記事タイトル下にある白い枠って、やたらと目立って気になりませんか？
Lion Mediaって個人的には使いやすくていいなと思うんですが、特に記事のタイトル部分に微妙な違和感を感じるんですよね。
こんな感じ。タイトルがかすむくらい白枠が目立ってません？
この独特のタイトル部分がLion Mediaらしさでもあるとは思うのですが、私はもっと馴染むようにカスタマイズしたいなと思いました。
とりあえずしたことは記事作成日やカテゴリーを表示する場所の白枠。これが黒ベースの背景に白枠となっているので結構な存在感があります。タイトルを目立たせたいのに、この白枠の存在感のせいでタイトルのアテンションレベルが下がっているように思います。
白枠の消し方
下記コードをコピペするべOKです。
/*記事タイトル下の白枠を削除*/
.dateList.dateList-singleTitle {
background-color: inherit;
}“dateList.dateList-singleTitle”で該当箇所をスポット。そこの背景色を”inherit”してあげれば、勝手に周りの色と馴染んでくれます。
inheritとは
英語で”受け継ぐ” ”相続する” という意味です。普通は継承されないスタイルを親要素から子要素に強制的に継承させることができます。例えば親クラスAのボーダーが15pxで子クラスBのボーダーをinheritしてあげると子クラスBのボーダーは15pxとなります。
で、上記コードを入れてあげると、こんな感じ。
白枠がアイキャッチの背景と同じになった！
どうですか？目立たなくなったのではないでしょうか？個人的には無駄に飛び飛びに色を使いたくないので、これでタイトル部分の印象は小さな変化ですがけっこう変わったと思います。
今回の記事は以上です。
