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

2019-02-24カスタマイズ

ルクセリタスのブログカード初期デザインは以下のような感じです。

初期デザイン

 

内部リンクのアドレスは不要なので非表示にしたいと思い、シンプルでスマートにカスタマイズしてみました。

カスタマイズ後

 

変更箇所

  • 少しシャープにして影を付け、オンマウスでふわっと浮き上がるデザインに
  • 「合わせて読みたい」と文字で表示
  • URLを非表示に
  • 記事抜粋を非表示に
  • サムネイルの位置指定 など

 

ある程度のデザイン設定はカスタマイザーから行えます。

  • カードの最大幅
  • カードの角の丸み
  • カードに影を付ける
  • 画像の位置 右 or 左
  • 画像の角の丸み

ルクセリタスのブログカード機能自体の使い方は以下をご覧ください。

 

 

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

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

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;
}

 

色の変更には以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 

 

外部リンク用のブログカードデザインを分ける

内部リンク

 

外部リンク

 

外部リンク用にデザインを変更する例は以下をご覧ください。

 

 

 

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