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

カスタマイズ

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

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

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

初期デザイン

画像です

 

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

 

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

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

通常の内部リンク(自サイトの記事用)の場合、アドレスは不要なので非表示にし、「合わせて読みたい」と表示しています。

内部リンク

画像です

 

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

外部リンクには「合わせて読みたい」と表示するのはちょっと違うので、ここを「外部リンク」と明示し、内部リンクのカードとは違うデザインにしてみました。

外部リンク

画像です

 

内部リンク用のブログカードでは非表示にしていたURLや記事抜粋も表示可能です。

画像です

 

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

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

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

 

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

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

具体的には、外部リンクの場合のみ別のセレクタを指定するコードを追記する事で可能です。

 

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

<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>
実際にDIVで囲うには、テキストエディタで直接記述するか、定型文などに登録しておくなど使いやすい方法で。

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

 

ブログカードのカスタマイズ

当サイトでは、まずブログカード自体をカスタマイズした後に、外部リンク用のコードを追記した為、最初のデザインありきの解説になります。

 

全体・枠などのデザインコード

内部リンク

画像です

 

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;}
.blogcard-img {float: left;}

 

アドレス・記事抜粋を非表示に

p.blog-card-desc {display: none;} /*記事抜粋を非表示にする*/
p.blogcard-link {display: none;} /*URL非表示にする*/

 

「合わせて読みたい」と表示

/* 【合わせて読みたい】表示 */
a.blogcard-href::before {
content: "合わせて読みたい";
position: absolute;
color: white;
font-size: 12px;
background: #fb8a8a;
width: 120px;
height: 22px;
font-weight: bolder;
text-align: center;
bottom: 0;
right: 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;
}

 

URL・記事抜粋の表示

内部リンク用のブログカードで非表示にしていない場合は必要ありません。

画像です

 

内部リンクでは非表示にしたいけど、外部リンクには表示したい場合は以下を最後に追記。

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

 

※CSS内での条件分岐や、「:not」を使ってやってみたのですがうまくいかなかった為、通常のブログカードデザインカスタマイズ用CSS+外部リンク用CSSがダブっています・・。

 

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

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

 

以上です。