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

2019-02-24ルクセリタス・カスタマイズ

初期デザイン

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

ルクセリタス・ブログカード
※これは画像です。

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

 

サンプルの設定とCSS

サンプル

ルクセリタス・ブログカード
※これは画像です。

 

外観のカスタマイズで行う設定

「外観」→「カスタマイズ」→「ブログカード」

ルクセリタス・ブログカード設定

 

外観設定

  • 「ブログカードの丸み」に好みの数値を入れる
  • 「カードに影を付ける」にチェック
  • 「画像を枠線で囲む」にチェック
  • 「画像の丸み」好みの数値を入れる

ルクセリタス・ブログカード設定

 

 

CSS追記

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

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。(Ver.3.7.9以前は「style.cssタブ」)

Luxelitasスタイルシート編集画面

 

CSS追記

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

a.blogcard-href::before {
content: "詳細はこちら";
position: absolute;
color: white;
font-size: 12px;
background: #78aad2;
width: 90px;
height: 20px;
text-align: center;
bottom: 0;
right: 0;
border-radius:8px 0 8px 0;
}

 

アドレスを表示しない場合

ルクセリタス・ブログカード
※これは画像です。
p.blogcard-link { /*URL非表示*/
display: none;
}

 

記事抜粋を表示しない場合

ルクセリタス・ブログカード
※これは画像です。
p.blog-card-desc { /*記事抜粋を非表示*/
display: none;
}

 

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

 

 

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

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

 

アイキャッチ画像のサイズを変える

正方形サムネイルのCSS対応と、長方形サムネイル対応については以下にまとめています。

 

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

内部リンク

 

外部リンク

 

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

 

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

関連記事