【Luxeritas】ブログカードの使い方とカスタマイズ

- 2020年8月16日
ブロックエディタでの使い方を追記sました。(この記事で紹介しているCSSはブロックエディタのブログカードにも適用されます。)
WordPressテーマ『Luxeritas(ルクセリタス)』には「ブログカード」という機能があります。
今回は『Luxeritas(ルクセリタス)のブログカードの使い方とカスタマイズ』について描きたいと思います。
ブログカードって?
ブログカードとは、テキストリンクを画像(サムネイル)付きのカード型にしてくれるものです。

※これは画像です。
きらり
テキストリンクより目立つよね~。これが「Luxeritas」では実装されてるんだね。
結耶
そうそう。プラグインを使わないから軽いしね!ありがたい機能です!
以前紹介したサムネイル画像付きリンクにできるプラグインなどを使わなくてもリンクをカード型にしてくれるので読み込み速度も速いんです。
ブログカードの設定
管理画面から「Luxeritas」「カスタマイズ(外観)」と進み、表示された画面の左のメニューの下の方に「ブログカード」という項目があります。
クリックするとブログカードの設定画面が表示されるので、一番上にある「ブログカードを有効化」にチェックを入れてください。
その他、ブログカードの丸みや画像(アイキャッチ)の位置などの設定ができるのでお好みで設定してください。
結耶
設定をしたら上にある「公開」ボタンをクリックしてください。
使い方
クラシックエディタ
設定で「ブログカードを有効化」にすると、投稿画面の上にブログカードボタンが表示されます。

ブログカードボタンをクリックすると以下のような画面が表示されます。

リンク先のURLを入力し、リンク追加をクリックすると記事にリンクが挿入されます。
「リンク文字列」はブログカードのタイトルになるものですが、入力しなくても自動で取得されます。ご自分の言葉で入れたい場合のみ入力してください。
HTML
「リンク追加」ボタンをクリックすると記事内に以下のようなHTMLが挿入されます。
※赤字の「リンク先URL」部分は表示されません。
きらり
これでリンクがカード型になるんだね!
結耶
簡単だよね~(*^^*)
ブロックエディタ
WordPressの新エディタ(Gutenberg)での使い方を紹介します。
まずは画面左上の「+」をクリックしてブロックの一覧を表示します。
「Luxeritas Blocks」の中に『ブログカード』があるのでクリックしてください。
記事にブログカードブロックが挿入されます。
あとはURLを入力してください。
ブロックエディタでも使い方は簡単だね。
うんうん。簡単だよね!ちなみにブロックエディタのブログカードのデザインも今から紹介するスタイルが適用されます。
スポンサーリンク
カスタマイズ
デフォルトでは以下のように表示されます。

デフォルトのままではちょっと大きくスペースをとってしまいます。スマホで表示すると尚更です。
それに内部リンクか外部リンクかを見てすぐわかるようにしたいですよね。
なのでブログカードの見た目をちょっとカスタマイズしてみました。
ブログカードで使われているクラス
- DIV.blogcard・・・入れ物
- A.blogcard-href・・・Aタグを装飾
- img.blogcard-img・・・画像(アイキャッチ)
- P.blog-card-title・・・タイトル
- P.blog-card-desc・・・抜粋文
- P.blogcard-link・・・リンク
Luxeritasのブログカードにはこのようにクラスが設定されています。これを使用し見た目をカスタマイズしていきます。
カスタマイズ
当サイトのブログカードをこのようにしてみました。CSSは以下のようにしています。
/*--------------------
ブログカード
--------------------*/
a.blogcard-href {
padding:10px 10px 5px;
min-height:105px;
background-color:#ffdbed;
box-shadow:0 2px 5px #ff93ac;
transition: .3s;
}
/*マウスが乗ったとき*/
a.blogcard-href:hover {
box-shadow: 0 4px 20px #ff6893;
transform: translateY(-5px);
}
/*画像(アイキャッチ)*/
img.blogcard-img {
width:90px;
height:90px;
margin-bottom:5px;
}
/*タイトル*/
p.blog-card-title {
padding:5px;
}
/*抜粋文の表示*/
@media screen and (max-width:540px) {
p.blog-card-desc {display:none;}
}
/*合わせて読みたいの表示*/
a.blogcard-href:before {
content:"合わせて読みたい";
position:absolute;
bottom:0;
right:0;
padding:1px 10px;
font-size:12px;
font-weight:boler;
color:#fff;
background-color:#ff6893;
}
※「合わせて読みたい」という言葉を「関連記事」などほかの言葉に変えたい場合は、35行目contentの「合わせて読みたい」を変更してください。
※抜粋分は画面の大きさが540px以下の場合「非表示」になるようにしています。画面の大きさに関わらず「非表示」にする場合は29行目の「@media screen and (max-width:540px) {」と31行目の「}」を削除してください。
リンクの非表示
ブログカードの下に表示されるリンクを非表示にする場合は以下のように記述すると非表示にできます。
リンクの位置を変える
リンクの位置を画像下から画像の横に表示する場合は以下のようにしてください。
/*リンクの位置を変更*/
p.blogcard-link {
clear:none;
margin:8px 0 0;
}
スポンサーリンク
外部リンク
上でブログカードの見た目を変更しましたが、これでは内部リンクと外部リンクが同じです。内部リンクか外部リンクかわかるようにしたいと想い、自分なりにいろいろ試してみたりしましたが上手く出来ません。
きらり
じゃあ、内部リンクと外部リンクの見た目をわかるように変えられないの?
結耶
調べてみたけど他の人も上手くできなかったみたい(^^;)
とはいえ方法がないわけではありません。上で書いたHTMLをDIVタグで囲み、外部リンク用のスタイルをしイェイすれば内部リンクと外部リンクを分けることができます。
外部リンク用HTML
<div class="gaibu_link">
<a href=”リンク先URL” data-blogcard=”1″>リンク先URL</a>
</div>
ブログカードのリンクを<div class="gaibu_link"> ~ </div>で囲みます。(クラス名はお好みで変更してください。)
ブロックエディタの場合
ブロックエディタの場合はブログカードブロックをグループ化してdivタグで囲んで、グループブロックに外部リンクのクラス名を入力してください。
「グループ化」についてはの以下記事を参考にしてください。
外部リンク用CSS
外部用のスタイルは上で書いたCSSがベースになりますので、変更する部分のみスタイルを書きます。
/*-- 外部リンク --*/
.gaibu_link a.blogcard-href {
background-color:#d1e8ff;
box-shadow:0 2px 5px #6785e0;
}
/*マウスが乗ったとき*/
.gaibu_link a.blogcard-href:hover {
box-shadow: 0 4px 20px royalblue;
transform: translateY(-5px);
}
/*抜粋文を非表示*/
.gaibu_link p.blog-card-desc {
display:none;
}
/*参考(外部リンク)の表示*/
.gaibu_link a.blogcard-href:before {
content:"参考(外部リンク)";
position:absolute;
bottom:0;
right:0;
padding:1px 10px;
font-size:12px;
font-weight:boler;
color:#fff;
background-color:royalblue;
}
※外部リンク用では抜粋文を非表示にしています。
※「参考(外部リンク)」はお好みで変更してください。
結耶
これで内部リンクと外部リンクを使い分けることができます。
DIVのクラス名を変えてスタイルを変えれば他にも見た目を変えることができます。
最後に
今回はLuxeritasのブログカードの使い方やカスタマイズについて書いてみました。
ブログカードはテキストリンクより目を引きますし、わかりやすいですよね。
使い方も簡単なので、WordPressテーマ「Luxeritas」をお使いの方はぜひ使ってみてください。
また、紹介したカスタマイズは一例です。また当ブログに合わせて作っていますので、コピーして使う場合はご自分のサイトに合わせて変更してください。
スポンサーリンク
ディスカッション
コメント一覧
結耶様
はじめまして、通常のブログカードと外部リンク用のブログカードを使い分ける方法を探していて、こちらの記事にたどり着きました。
おかげをもちまして、無事、使い分けができるようになりました。
どうもありがとうございます。
なお、勝手ではありますが、私のブログのプリフィールページに貴サイトのリンクを貼らせていただきました。もし、不都合ございましたらお知らせください。
> 飼い主さん
こんばんは。はじめまして。
コメントありがとうございます。
ブログカードは大変便利ですよね。ただ、内部も外部も見た目が同じで…私もどうにか使い分けられないかと随分悩みましたw
お役にたてたならとても嬉しいです。
リンクしていただき、不都合などありません。とても嬉しいです。
ありがとうございます。
結耶様
出来そうだけど、方法がわからない。できるかどうかもわからない。
そんなカスタマイズが網羅されていて、本当にありがたい記事ばかりです。
これからも参考にさせていただきます。
素敵な記事をどうもありがとうございます!
> 飼い主さん
こんばんは。
ただただ自分がやりたい事や疑問に思った事を実際にやって忘れないように記事に書いているだけですw
まだまだ未熟者なのでこれからもいろいろ勉強して記事を書きたいと思います。
コメントありがとうございました(*^^*)
こんにちは!ランキングから来ました。
ブログガードって、初めて知りました。
色々あるんですねー。なかなかついていけないです。
参考になりました。ありがとうございました。
> マルリンさん
こんにちは。
コメントありがとうございます。
ブログカード機能がついているのは「有料」テーマが多いですから(^^;
文字だけのリンクより目を引くのでいいですよね。
プラグインでもこのブログカードのようにサムネイル付きのリンクにしてくれるものがあります。
https://kirari-yums.net/2018/04/08/post-757/
ちなみに私が使っている「Luxeritas(ルクセリタス)」は無料で、ブログカード機能がついています(^ ^)