相互リンク詳細へ

ルクセリタスのブログカードをカスタマイズ

2019-02-24カスタマイズ

 

 

最初にビフォーアフター

 BEFORE → AFTER

少しシャープにして影を付け、オンマウスでふわっと浮き上がる仕様です。

「合わせて読みたい」と文字で表示しています。

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.7

ダウンロードはこちら

ルクセリタスに用意されている「デザイン選択」からのデザイン変更はせずにデフォルトからカスタマイズしています。

 

カスタマイズ方法

 

対象のクラス名

 

ブログカードのデザイン装飾は、親テーマ内の「blogcard.css」に記述されています。

今回は以下のクラス名を使います。

blogcard-href
blog-card-title
blog-card-desc
blogcard-img
blogcard-link
 上記のファイルを直接、編集しないようにご注意下さい!

 

CSS追記

 

子テーマのスタイルシートにCSSを追記します。

「Luxeritas」→「子テーマの編集」でスタイルシートを選択します。

 

以下のコードを追記します。

コードを表示
/*************/
/* ブログカード */
/*************/
/*枠・影の設定*/
a.blogcard-href {
padding: 0px;
min-height: 102px;
box-shadow: 0 2px 5px #f0f0f0;
transition: .3s;
}
/*オンマウス時*/
a.blogcard-href:hover {
box-shadow: 0 4px 20px #a5a5a5;
transform: translateY(-5px);
}
/*タイトルの表示位置*/
p.blog-card-title {
margin: 5px 5px 5px 5px;
}
/*アイキャッチの表示位置*/
.blogcard-img {
float: left;
}
/*記事抜粋を表示しない*/
p.blog-card-desc {
display: none;
}
/*記事アドレスを表示しない*/
p.blogcard-link {
display: none;
}
/* 【合わせて読みたい】表示 */
a.blogcard-href::before {
content: "合わせて読みたい";
position: absolute;
color: white;
font-size: 12px;
background: #b67070;
width: 120px;
height: 22px;
font-weight: bolder;
text-align: center;
bottom: 0;
right: 0;
}

 

それぞれにコメントをつけていますので、変更したい箇所を変えてご利用下さい。

 

以下、ちょっと変えてみるサンプルですのでご参考に。

 

アドレス表示した例

上記のCSSから以下を削除
/*記事アドレスを表示しない*/

p.blogcard-link {
display: none;
}

 

記事抜粋を表示した例

上記のCSSから以下を削除

p.blog-card-desc {
display: none;
}

 

「関連記事」と表示した例

 

上記CSSの「合わせて読みたい」を以下に変更します。

コードを表示
/* 【関連記事】表示 */
a.blogcard-href::before {
content: "<strong><span style="color: #ff00ff;">関連記事</span></strong>";
position: absolute;
color: white;
font-size: 12px;
background: #b67070;
<strong><span style="color: #ff00ff;">width: 70px</span></strong>;
height: 22px;
font-weight: bolder;
text-align: center;
bottom: 0;
right: 0;
}

 

ルクセリタスのその他カスタマイズは以下もご覧ください。