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

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

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

初期デザイン

※これは画像です。

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

 


 

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

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

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

内部リンク

※これは画像です。

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

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

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

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

外部リンク

※これは画像です。

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

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

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

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

 

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

ブログカードのデザインは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を追記します。

 

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

 

 

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

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

 

以上です。

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています