LION MEDIAの記事タイトル下にある白枠を消す方法
GENKI自分でする細かいデザイン、CSSカスタマイズです。Lion Mediaの記事タイトル下にある白い枠って、やたらと目立って気になりませんか？
Lion Mediaって個人的には使いやすくていいなと思うんですが、特に記事のタイトル部分に微妙な違和感を感じるんですよね。
こんな感じ。タイトルがかすむくらい白枠が目立ってません？
この独特のタイトル部分がLion Mediaらしさでもあるとは思うのですが、私はもっと馴染むようにカスタマイズしたいなと思いました。
とりあえずしたことは記事作成日やカテゴリーを表示する場所の白枠。これが黒ベースの背景に白枠となっているので結構な存在感があります。タイトルを目立たせたいのに、この白枠の存在感のせいでタイトルのアテンションレベルが下がっているように思います。
白枠の消し方
下記コードをコピペするべOKです。
/*記事タイトル下の白枠を削除*/
.dateList.dateList-singleTitle {
background-color: inherit;
}"dateList.dateList-singleTitle"で該当箇所をスポット。そこの背景色を"inherit"してあげれば、勝手に周りの色と馴染んでくれます。
英語で”受け継ぐ” ”相続する” という意味です。普通は継承されないスタイルを親要素から子要素に強制的に継承させることができます。例えば親クラスAのボーダーが15pxで子クラスBのボーダーをinheritしてあげると子クラスBのボーダーは15pxとなります。
で、上記コードを入れてあげると、こんな感じ。
白枠がアイキャッチの背景と同じになった！
どうですか？目立たなくなったのではないでしょうか？個人的には無駄に飛び飛びに色を使いたくないので、これでタイトル部分の印象は小さな変化ですがけっこう変わったと思います。
今回の記事は以上です。
ライオンメディアの上位互換『ザ・トール』のご紹介
Webに本気なら、Webに本気のテーマで。
ライオンメディアで少しずつカスタマイズしていくのもいいと思います。しかし、デザインやレイアウトの学習ばかりに時間をかけていては、いつまでたっても肝心のWebコンテンツが完成しません。そして無料版では最終的に必ず限界が来ます。
『ザ・トール』は、デザインの拡張性が抜群でカスタマイズも自由自在。クリック操作だけで簡単に自分好みのオリジナルデザインが完成します。煩わしいHTMLやCSSをいじる必要もないので初心者の方でも安心です。
令和の時代では、もうコードを書く必要はないんです。ライオンメディアを選んだアナタなら、間違いなく同じ会社が提供する『ザ・トール』を気に入ることでしょう。
一流の開発チームが作り上げた国内最高峰のWPテーマで、ぜひスムーズなWeb制作を可能にしてください。
