ルクセリタスのブログカードを利用して外部リンク用のカードを使い分ける

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

このまま利用すれば、内部リンクでも外部リンクでもブログカードが利用出来ます。

初期デザイン

今回は、ブログカードのデザインをカスタマイズして、内部記事用と外部リンクで使い分ける方法についてです。

 

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

内部リンクだとわかるように

通常の内部リンク（自サイトの記事用）の場合は、「詳細はこちら」と表示しています。

内部リンク

上記のようなデザインカスタマイズは以下に詳細まとめています。

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

外部リンクだとわかるように

外部リンクには「外部リンク」と明示し、内部リンクのカードとはラベルの色を変えます。

外部リンク

以下のデザイン設定はカスタマイザーから行えます。

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

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

簡単！Luxeritasルクセリタス・ブログカードの使い方とプチカスタマイズ

 

内部と外部でカードデザインを変える実現方法

ブログカードのデザインは１種類しかないので、使い分けるには自身で振り分ける方法を設定する必要があります。

 

通常のブログカードのコードは以下のようになっています。

<a href="https://XXXXX/" data-blogcard="1">説明</a>

 

外部ブログカードの際には、その外側にひとつ「DIV」タグを追加してIDを付けておきます。

<div id="gaibu">
<a href="https://XXXXX" target="_blank" rel="noopener" data-blogcard="1">サイト名</a>
</div>

あとはこの名称でCSSを追記します。

 

CSS追記

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

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「style.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;
}

 

 

外部リンク用

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

/* 【外部リンク】表示 */
#gaibu a.blogcard-href::before {
content: "外部リンク";
position: absolute;
color: white;
font-size: 12px;
background: #000000;
width: 120px;
height: 22px;
font-weight: bolder;
text-align: center;
bottom: 0;
right: 0;
}

 

外部リンクHTML用

#gaibu p.blog-card-desc {
display: inherit;
padding: 3px;
}
#gaibu p.blogcard-link {
display: inherit;
}

 

 

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

マカロンビビッドパステル和色セーフ色名 赤桃青紫黄橙緑茶黒

 

以上です。