ルクセリタスのブログカードを利用して外部リンク用のカードを使い分ける
ルクセリタスのブログカード初期デザインは以下のような感じです。
このまま利用すれば、内部リンクでも外部リンクでもブログカードが利用出来ます。
初期デザイン
今回は、ブログカードのデザインをカスタマイズして、内部記事用と外部リンクで使い分ける方法についてです。
目次
ブログカードのデザインをカスタマイズ
内部リンクだとわかるように
通常の内部リンク（自サイトの記事用）の場合、アドレスは不要なので非表示にし、「合わせて読みたい」と表示しています。
内部リンク
外部リンクだとわかるように
外部リンクには「合わせて読みたい」と表示するのはちょっと違うので、ここを「外部リンク」と明示し、内部リンクのカードとは違うデザインにしてみました。
外部リンク
内部リンク用のブログカードでは非表示にしていたURLや記事抜粋も表示可能です。
以下のデザイン設定はカスタマイザーから行えます。
- カードの最大幅
- カードの角の丸み
- カードに影を付ける
- 画像の位置 右 or 左
- 画像の角の丸み
ルクセリタスのブログカード機能自体の使い方は以下をご覧ください。
https://ayaito.net/luxelitas/l_manual/6160/
内部と外部でカードデザインを変える実現方法
ブログカードのデザインは１種類しかないので、使い分けるには自身で振り分ける方法を設定する必要があります。
具体的には、外部リンクの場合のみ別のセレクタを指定するコードを追記する事で可能です。
通常のブログカードのコードは以下のようになっています。
<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がダブっています・・。
色の変更には以下もご利用下さい。
以上です。