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

2019年10月6日2020年8月16日Luxeritas

WordPressテーマ『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」をお使いの方はぜひ使ってみてください。

また、紹介したカスタマイズは一例です。また当ブログに合わせて作っていますので、コピーして使う場合はご自分のサイトに合わせて変更してください。